使用Travis CI自动部署Hexo博客到Gtihub Pages

本博客的展示页面使用 Hexo 框架生成，并将生成后的文件托管在 Github Pages 。 Hexo 提供了如静态网页生成、一键部署等一系列工具，使用户只需关注博客的内容。一键部署用着确实方便，但每次发布博客时都需使用 Hexo CLI 工具手动生成页面文件，再手动将页面文件部署到 Github Pages，感觉用起来还是麻烦了点。于是上网搜了一下自动部署相关的东西，找到了一个叫 Travis CI 的持续集成工具。

使用前后对比

使用 Travis CI 之前，需自己手动使用 Hexo CLI 程序构建页面文件，再手动部署到 Github Pages，然后再将项目推送到 Github ：

# 编写博客 ...

# 清理 hexo 的生成记录
hexo clean

# 生成静态页面
hexo generate

# 将静态页面部署到 Github pages (需在 `_config.yml` 文件中配置)
hexo deploy

# 将项目推送到 Github (备份)
git add .
git commit -m 'add a post'
git push

使用 Travis CI 后，只需编写博客后推送到 Github , 然后 Travis CI 会根据项目的配置，自动生成博客的静态页面并部署到 Github Pages :

# 编写博客 ...

# 推送到 Github
git add .
git commit -m 'add a post'
git push

# 等待 Travis 自动构建并部署

使用 Travis CI

Travis CI 的使用非常简单，只需在项目的根目录里添加一个名为 .travis.yml 的配置文件，然后在 Travis CI 的网站里开启对这个项目的持续集成。配置好了后，在以后每次将项目推送到 Github 时，Travis CI 都会根据配置文件执行一系列的操作。

因为 Travis CI 要将项目部署到 Gtihub Pages ，所以需要有对 Github 仓库的操作权限，可以通过在 Github 生成一个 Token 来实现：

点击 Github 主界面右上角的头像，选择 Settings 进入设置界面
在左侧列表中点击 Developer settings 进入开发者设置界面
在左侧列表中点击 Personal access tokens 进入令牌界面
点击右侧的 Generate new token 按钮进入Token生成界面
在 Token description 项中输入一个用于描述该 Token 的名字（如：travis-ci）
在 Select scopes 多选框中勾选 repo 复选框
点击 Generate token 按钮生成 Token
复制新生成的Token

再将生成的 Token 加入 Travis CI 的环境变量：

进入 Travis CI 官网启用想要自动部署的项目并进入项目管理界面
在右侧的 More options 菜单栏中选择 Settings 进入设置界面
在 Environment Variables 栏目中添加一个新项：Name 为 GITHUB_TOKEN ， Value 为刚刚复制好的新生成的 Gtihub Token，输入好后点击 Add 按钮

这样设置好过后，剩下的就只需要编写 Travis CI 的配置文件了。进入项目根目录，新建一个名为 .travis.yml 的文件，并写入如下内容：

# 使用语言
language: node_js

# nodejs 版本号
node_js: "8"

# git 分支
branches:
  only:
  - master

# 缓存
cache:
  directories:
    - node_modules

# 安装依赖的命令
install: npm install

# 每次推送后需要执行的脚本
script: 
  - hexo clean
  - hexo generate

# 脚本执行成功后的后续命令
after_success:
  - cd ./public
  - git init
  - git config user.name "Hardo"
  - git config user.email "i@hardo.me"
  - git add .
  - git commit -m "Travis CI Auto Builder"
  - git push --force https://$GITHUB_TOKEN@github.com/hardo/blog.git master:gh-pages

每一个配置项的作用可以看配置文件中的注释。该配置文件的大致描述为：

推送后通过 npm install 命令安装依赖
依赖安装完成后通过 hexo generate 命令生成静态页面到 ./public 目录
静态页面生成完成后，将生成好的页面推送到 Github Pages

其中 hexo generate 命令依赖于 hexo-cli，需在项目中添加该依赖：在项目根目录执行 npm install -D hexo-cli 。