使用 Travis CI 实现 Hexo 博客自动部署

在前文 博客正式启用 Travis CI 自动部署 中提到了本博客现在使用 Travis CI 实现了自动化部署。以后更新博客再也不用受部署环境的限制了,文章写好后 push 到 Github 上就会自动触发构建并将生成的静态文件推送到 Github Pages 上完成更新。下面来简单介绍一下整个配置的流程吧。

前提条件

  • 一个 Github 帐号
  • Github Pages 仓库
  • Hexo 博客备份仓库/分支

本文介绍的是将博客部署到 Github Pages ,所以 Github 帐号和 Github Pages 仓库自然是不用多说。而 Hexo 博客的备份,对于 Hexo 用户来说应该也都会有所了解,整个博客的备份应该至少包含如下的文件结构(可能还会有其他文件)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
│ package.json
│ .gitignore
│ _config.yml
├─scaffolds
│ draft.md
│ page.md
│ post.md
├─source
│ ├─xxxxxx
│ ├─xxxxxx
│ └─_posts
│ ├─xxxxxx
│ └─xxxxxx
└─themes
└─xxxxxx

注意:我这里将博客用的主题也加进了博客备份中,有的人的博客备份跟主题备份是分开的,在 Travis CI 中 build 的时候需要一些额外操作(并不复杂,看完本文应该能够自己完成),这里不再过多赘述。

另外,有的人是使用 Github Pages 仓库另开一个分支来存放博客备份,而我这里是另外开了一个仓库专门用来存放博客备份,这两种情况的操作大体上差不多,只是在最后 push 的时候分支设置略有区别,这里不再过多描述,只针对我自己的情况进行介绍。

操作流程

下面开始介绍具体的操作流程,一切以我上面提到的前提条件为基础,Github Pages 仓库为 https://github.com/xirikm/xirikm.github.io ,博客备份仓库为 https://github.com/xirikm/BlogBackup (这是我的私有仓库,其他人无法直接访问到)。

登录 Travis CI 网站

Travis CI 的网站有两个,travis-ci.org 专门针对开源项目,Github 上所有的公开仓库都能够免费使用;travis-ci.com 针对私有及商业项目,新用户前 100 次构建是免费的,后面就要收费了。

由于我的博客备份仓库是私有的,所以只能用 travis-ci.com ,幸运的是我有 Github Education 权益包,所以可以免费使用,还是挺舒服的。本文只以我自己的情况做介绍, travis-ci.org 的使用没有太大区别,不再另外赘述。

访问 travis-ci.com ,点击首页大大的“Sign up with Github”使用自己的 Github 帐号登录。如果你有 Github Education 权益包,不需要任何设置,你的账户会自动升级为教育计划。

接下来到个人帐号的设置页面安装 Travis CI 的 GitHub Apps 到你的 Github 帐号,在安装时可以设置仓库访问权限,如果之后要修改的话可以到 Github 个人设置页面的 Applications 中找到 Travis CI 这个 GitHub Apps 重新进行配置。我这里只给了博客备份仓库这一个仓库的访问权限。

Github 个人设置页面

重新配置 Travis CI 的访问权限

这样配置之后拥有访问权限的仓库就会出现在我们的 Travis CI 帐号中啦。不过此时 Travis CI 只是能访问到我们的仓库,它并不知道我们需要干什么,要完成自动化部署的话还需要进一步的配置。

Travis CI 环境变量

在 Travis CI 中可以通过设置环境变量来传递一些不便于写在配置文件中的值(密码、密钥之类的),在这里我们设置 GH_TOKGHGH_REF 两个环境变量分别用来传递 GitHub Personal Access Token 和 Github Pages 仓库地址(仓库地址这个不需要保密,只是既然已经设置了一个,就干脆全搞成环境变量算了)。

Travis CI 环境变量

获取 GitHub Personal Access Token

要将博客部署到 Github Pages 上, push 操作自然是免不了的,这就要求要有相应的仓库权限。直接用帐号密码无疑是十分不安全的,所以这里通过 GitHub Personal Access Token 来实现。

点击 Github 用户设置页面 最下方的 Developer setting ,然后选择 Personal access tokens 来生成一个 token,由于我们只需要能够对普通仓库 push 就行了,所以把 repo 部分勾上即可。

GitHub Personal Access Token

生成的 token 只会显示一次,所以一定要及时保存下来,否则就只能删除重新创建了。

设置环境变量

这个操作起来还是挺简单的,在 Travis CI 网站中点进你的仓库,然后在右上角的 More options 处点击 Settings 进入设置页面,然后在 Environment Variables 处设置即可。

设置 Travis CI 环境变量

右边( Add 按钮的左边)的开关选项可以自由设置环境变量的值是否在日志(Build Log)中显示。

配置 .travis.yml 文件

在所有的准备工作完成后就是要定制我们自动构建部署的工作流程了。

Travis CI 通过仓库根目录下的 .travis.yml 文件来定制工作流程,下面开始来一步步的设计编写我们的 .travis.yml 文件吧。完整的文件内容可以直接拉到下面查看。

过程分析

首先需要确定部署环境,Hexo 是基于 nodejs 的,版本这里我们选择最新的长期支持版本( LTS) 应该就够用了

1
2
3
language: node_js
node_js:
- lts/*

travis.com 还提供了 cache 参数可以对特定目录进行缓存,加快后续构建的速度(看了网上一些资料,我不确定 travis.org 有没有这一参数,没有的话可以不用加,没有大影响)

1
2
3
cache:
directories:
- node_modules

然后开始进行部署环境的安装(在这里就是 nodejs 相关 modules 的安装)

1
2
3
install:
- npm install hexo-cli -g
- npm install

在环境安装好之后执行命令来生成静态文件

1
2
script:
- hexo g

跟在我们平时在本地的操作一样,hexo g 之后会在 public 目录下生成静态文件,只需要将该目录下所有文件推送到我们的 Github Pages 仓库即可完成部署(注意 git 用户名和邮箱需换成自己的)。

在这里我们通过如下格式的 url 访问来保证对仓库有操作权:https://your-gitHub-personal-access-token@your-repo-url。由于我们前面把 GitHub Personal Access Token 和 Github Pages 仓库链接都写进了环境变量,所以直接通过环境变量引用就行了(博客备份文件和 Github Pages 共用一个仓库的话需要注意修改最后一行的推送分支)。

1
2
3
4
5
6
7
8
after_script:
- cd ./public
- git init
- git config user.name "your-git-name"
- git config user.email "your-email-address"
- git add .
- git commit -m "Update blog content by Travis CI"
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master

在最后,如果博客备份仓库有多个分支的话,我们需要设置一下 Travis CI 监控哪一个分支的变动,我这里自然是 master 分支啦(若博客备份文件和 Github Pages 共用一个仓库的话需设置为博客备份文件所在分支)

1
2
3
branches:
only:
- master

完整配置文件

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
language: node_js
node_js:
- lts/*

cache:
directories:
- node_modules

install:
- npm install hexo-cli -g
- npm install

script:
- hexo g

after_script:
- cd ./public
- git init
- git config user.name "your-git-name"
- git config user.email "your-email-address"
- git add .
- git commit -m "Update blog content by Travis CI"
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master

branches:
only:
- master

检验效果

将上面所有的东西配置好之后 git push 一下就可以在你用的 Travis CI 网站上看到 build 过程啦。若无意外,稍等一会儿就能看到绿色的 build passing 图标,博客内容也成功更新啦。

Travis CI 自动构建成功

点击页面上的 build passing 图标,还能够获得其链接,可以将它贴在其他地方,随时监控博客的 build 状态。