从零开始搭建个人博客到Github上

前言

• 本次搭建的博客为基于Hexo框架的静态博客
• 本次是在Windows上搭建个人博客，其他系统大同小异，使用的是git bash来运行一些简单的Linux命令
• Github国内访问速度较慢（特殊工具除外），所以这并不是最佳的搭建方案，有条件的话建议还是自己购买服务器进行搭建

---

具体搭建步骤

1. 下载Git

• 本次搭建博客，我们主要会用到git bash工具来执行Linux命令，使用cmd也行。前往Git官网下载Git工具，并在git bash中配置好git（设置全局用户名、全局邮箱等），如：

  git config --global user.name "John Doe"
  git config --global user.email [email protected]
  

• 没有Github账号记得先申请一个，后续所有命令都在git bash中执行

2. 下载node.js

• 前往node.js官网下载LTS版本（长期支持版），直接安装即可，因为后续Hexo的安装要用到npm工具：
  

• 下载完成之后直接安装，安装完成之后使用 node -v 和 npm -v 命令来检查是否安装成功：

  

3. 下载npm淘宝镜像

• 由于自带的npm工具下载hexo很慢（GFW牛逼~），所以先使用npm来下载cnpm工具，然后用cnpm下载hexo就会快得多：

  npm install -g cnpm --registry=https://registry.npm.taobao.org
  

• 如果命令执行失败了就多试几次。安装完成后使用cnpm -v来测试是否安装成功：
  

4. 下载hexo框架

• 使用cnpm工具下载hexo：

  cnpm install -g hexo-cli
  

• 使用 hexo v 命令来测试hexo是否安装成功：
  

5. 启动hexo

• 先创建指定文件夹，用于hexo博客站点，本次我创建的文件夹名为HexoBlogs，之后的git bash命令都在此文件夹内执行：

  

• 进入此文件夹，启动hexo框架之前先进行初始化：

  hexo init
  

• 初始化完成之后会创建一个默认的hello-world博客和默认的landscape主题。然后我们生成博客对应的页面

  hexo g # 或者hexo generate
  

• 然后我们启动hexo服务（退出时命令行使用ctrl+c）

  hexo s # 或者hexo server
  

• 前往http://localhost:4000页面查看本地博客页面是否生成成功：

6. 在Github上新建仓库

• 新建仓库命名格式必须为<Owner>.github.io，即“用户名.github.io”的格式，如tomandersen-cc.github.io：
  

• 创建完成之后保留此页面：
  

7. 上传本地hexo博客框架

• 安装配置工具：

  cnpm install --save hexo-deployer-git 
  

• 修改hexo相关配置，在之前创建的文件夹中，修改配置文件_config.yml，在最后几行的deploy模块中设置对应的参数type 、repo和branch：

  

• 其中参数repo的值即为之前创建仓库页面所显示的仓库地址，即：

  

• 修改完成后，保存退出

• 然后重新生成博客页面并上传至Github，依次输入以下命令：

  hexo clean
  hexo g # 或者 hexo generate
  hexo d # 或者 hexo deploy
  

• 通过之前设置的仓库名来访问上传的博客（之后仓库名不能更改）：

  

• 至此hexo博客就已经搭建完成，并且成功上传到Github了

---

发布博客

• 使用hexo n <blogname>命令创建博客，如：hexo n "My first blog"：
  

• 会在hexo站点文件夹下的 source/_posts/路径下创建对应名的.md文档，使用Markdown语法编辑此文档，然后再次创建博客页面，上传到Github即可实现博客发布：

  hexo clean
  hexo g # 或者 hexo generate
  hexo d # 或者 hexo deploy
  

---

更换博客主题

1. 下载主题

• 去Github检索相关主题，当然也可以去官方主题市场进行下载，这里选择Github上的 material-indigo 主题作为例。

• 使用git bash执行git clone命令，将工程克隆到之前创建的博客文件夹下的themes/indigo路径下：

  git clone https://github.com/yscoder/hexo-theme-indigo.git themes/indigo
  

• 若clone速度太慢可以尝试修改hosts文件或者其他方式，这里就不多赘述

2. 配置主题

• 修改博客站点文件夹下的_config.yml文件，将其中的theme参数设置成新下载的主题名：
  

• 然后依旧是重新生成博客页面hexo clean hexo g，开启hexo s开启服务，在本地查看是否配置成功：
  

• 最后便可以使用hexo d命令上传至Github，实现博客发布

• 具体博客主题相关配置参考对应主题的官方文档

End~