基于码云/GitHub搭建个人博客

title: GitHub Pages + Hexo搭建博客
comment: true
tags: [技术, 静态独立博客, Hexo, GitHub Page, Git]
date: 2015-12-28 22:40:50

updated: 2015-12-29 15:12:00

如果是小小白，可以先花时间去了解下：
* Git
* GitHub
* GitHub Pages
* Hexo
* Markdown

2.4 Hexo

2.4.1 安装Hexo

安装Hexo相当简单。在安装之前，必须检查电脑中是否已经安装下列应用程序：
* Node.js
* Git
如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。

$ npm install -g hexo-cli

2.4.2 使用Hexo建站

由于默认的 NPM 镜像实在太慢太慢，我们把源替换成淘宝的镜像，在终端中执行如下命令：

npm config set registry "https://registry.npm.taobao.org"

安装完后，在你喜欢的文件夹内（例如D：\Hexo），点击鼠标右键选择Git bash，输入以下指令：

$ hexo init

该命令会在目标文件夹内建立网站所需要的所有文件。接下来是安装依赖包：

$ npm install

这样，我们就已经搭建起本地的Hexo博客了。可以先执行以下命令（在对应文件夹下），然后再浏览器输入localhost:4000查看。

$ hexo generate
$ hexo server

这个博客只是本地的，别人是浏览不了的，之后需要部署到GitHub上。

三、一般的搭建方法

在上面，我们已经配置好了所需的所有东西，也成功地搭建了一个本地Hexo博客。现在，需要使用GitHub Pages搭建一个别人能够访问的Hexo博客了。

3.1 使用默认theme

我们继续使用上面的文件夹D:\Hexo（也可以新建一个文件夹重新生成），然后编辑该文件夹下的_config.yml。

默认生成的_config.yml：

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type:

修改后的_config.yml：注意，冒号后的空格非常重要，一定要有！

deploy:
  type: git
  repo: 对应仓库的SSH地址（可以在GitHub对应的仓库中复制）
  branch: 分支（User Pages为master，Project Pages为gh-pages）

为了能够使Hexo部署到GitHub上，需要安装一个插件：

$ npm install hexo-deployer-git --save

然后，执行下列指令即可完成部署：

$ hexo generate
$ hexo deploy

然后在服务中找到pages选项，打开pages服务
之后，可以通过在浏览器键入：username.github.io进行浏览，开心吧~

四、优化部署与管理

4.1 概述

Hexo部署到GitHub上的文件，是.md（你的博文）转化之后的.html（静态网页）。因此，当你重装电脑或者想在不同电脑上修改博客时，就不可能了（除非你自己写html o(^▽^)o ）。

其实，Hexo生成的网站文件中有.gitignore文件，因此它的本意也是想我们将Hexo生成的网站文件存放到GitHub上进行管理的（而不是用U盘或者云备份啦(╬▔皿▔)凸）。这样，不仅解决了上述的问题，还可以通过git的版本控制追踪你的博文的修改过程，是极赞的。

但是，如果每一个GitHub Pages都需要创建一个额外的仓库来存放Hexo网站文件，我感觉很麻烦（10个项目需要20个仓库(ˉ▽ˉ；)…）。

所以，我利用了分支！！！

简单地说，每个想建立GitHub Pages的仓库，起码有两个分支，一个用来存放Hexo网站的文件，一个用来发布网站。
https://pic2.zhimg.com/v2-fac8f8564c4f1de0c54e3c142ae1f81d_r.jpg
下面以我的博客作为例子详细地讲述。

4.2 我的博客搭建流程

创建仓库，CrazyMilk.github.io；
创建两个分支：master 与 hexo；
设置hexo为默认分支（因为我们只需要手动管理这个分支上的Hexo网站文件）；
使用git clone [email protected]:CrazyMilk/CrazyMilk.github.io.git拷贝仓库；
在本地CrazyMilk.github.io文件夹下通过Git bash依次执行npm install hexo、hexo init、npm install 和 npm install hexo-deployer-git（此时当前分支应显示为hexo）;
修改_config.yml中的deploy参数，分支应为master；
依次执行git add .、git commit -m “…”、git push origin hexo提交网站相关的文件；
执行hexo generate -d生成网站并部署到GitHub上。

这样一来，在GitHub上的CrazyMilk.github.io仓库就有两个分支，一个hexo分支用来存放网站的原始文件，一个master分支用来存放生成的静态网页。完美( •̀ ω •́ )y！

4.3 我的博客管理流程

4.3.1 日常修改

在本地对博客进行修改（添加新博文、修改样式等等）后，通过下面的流程进行管理：

依次执行git add .、git commit -m “…”、git push origin hexo指令将改动推送到GitHub（此时当前分支应为hexo）；
然后才执行hexo generate -d发布网站到master分支上。

虽然两个过程顺序调转一般不会有问题，不过逻辑上这样的顺序是绝对没问题的（例如突然死机要重装了，悲催….的情况，调转顺序就有问题了）。

4.3.2 本地资料丢失

当重装电脑之后，或者想在其他电脑上修改博客，可以使用下列步骤：

使用git clone [email protected]:CrazyMilk/CrazyMilk.github.io.git拷贝仓库（默认分支为hexo）；
在本地新拷贝的CrazyMilk.github.io文件夹下通过Git bash依次执行下列指令：npm install hexo、npm install、npm install hexo-deployer-git（记得，不需要hexo init这条指令）。

http://lowrank.science/Hexo-Github/
http://crazymilk.github.io