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

使用前后对比

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 编写博客 ...

# 清理 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 :

1
2
3
4
5
6
7
8
# 编写博客 ...

# 推送到 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 来实现:

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 使用语言
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

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

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

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

万事具备,现在可以试试添加一篇新博客然后推送到 Github ,看看是否能自动部署了!