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

前言

之前总结了一下如何使用 Travis CI 自动部署 GitBook 到 GitHub Pages,本篇文章主要总结一下部署 Hexo 博客的思路。就像之前提到的,使用 Travis CI 部署 Hexo 的必要性和便利性要比部署 GitBook 高一些,原因是 Hexo 没有类似 GitBook 提供的官方服务,其自带的 Git 部署服务也只是将生成的静态站点文件推送到仓库中。在进行静态网站的部署时,使用 Travis CI 可以省去在本地搭建 Node.js 环境和安装依赖,只需要 Git 服务,甚至可以直接在 GitHub 仓库中添加和编辑文档。


方案

  1. 脚本大法好!

  2. 使用 Travis CI 自动部署 Hexo 博客到 GitHub Pages

是的,我们主要讲一下第 2 种方案。

有关的前期准备可以参看之前的使用 Travis CI 自动部署 GitBook 到 GitHub Pages,这里就不过多重复介绍了。


创建新分支

如果用 Hexo 作为 User Pages(xxxx.github.io)的话,就必须将生成的静态站点文件部署到 master 分支,因此我们需要创建一个用于存放构建文件的分支,这里我创建了一个 hexo 分支,并将它设为默认分支


配置 Hexo

我们使用 Data files 进行配置,这需要 Hexo 的版本在 3.0 以上。

NexT 主题为例,我们需要主题目录下的 _config.yml 文件内容拷贝到 source/_data 目录下,如果没有目录的话需要手动创建,然后修改文件名为 next.yml,当然,文件名还可以是其它的。之后我们主题的配置都只要在这个 next.yml 文件中修改就可以了。

使用 Data files 的好处在于不需要修改主题仓库下的任何文件,这就允许我们不用推送主题文件到仓库,并且可以随时拉取最新版本的主题,也避免了拉取主题仓库时可能发生的冲突问题。其次是,你的配置文件是可以直接在模板中使用的。


编写 .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
34
35
36
37
38
39
40
41
42
43
44
45
language: node_js

node_js:
- "8"

# 缓存依赖
cache:
directories:
- $HOME/.npm

before_install:
- export TZ='Asia/Shanghai' # 更改时区

# 依赖安装
install:
- npm install
# 安装 NexT 主题
- git clone https://github.com/theme-next/hexo-theme-next themes/next
# 安装主题需要的插件
- git clone https://github.com/theme-next/theme-next-fancybox3 themes/next/source/lib/fancybox

# 构建脚本
script:
# 生成静态站点文件 使用主题自定义配置(高优先级) + 站点配置
- hexo generate --config _config.yml,source/_data/next.yml

# 分支白名单
branches:
only:
- hexo # 只对 hexo 分支进行构建

# GitHub Pages 部署
deploy:
provider: pages
skip_cleanup: true
# 在项目仪表盘的 Settings -> Environment Variables 中配置
github_token: $GITHUB_TOKEN
# 将 public 目录下的内容推送到 master 分支上(必须)
local_dir: public
target-branch: master
fqdn: $CUSTOM_DOMAIN
name: $GIT_NAME
email: $GIT_EMAIL
on:
branch: hexo

hexo generate 的默认输出是在 public 目录,--config 可以指定多个配置文件,最后的配置文件优先级最高,会融合或覆盖前面有相同名称的设置,生成一个 _multiconfig.yml 文件。

需要注意的是,如果是把 Hexo 作为 User Pages(即 xxxx.github.io)的话,那么一定要把 public 下的内容推送到 master 分支上,所以这里需要添加 target-branch: master 选项,否则默认是推送到 gh-pages 分支上的。


推送

把配置文件和其它文件推送到 hexo 分支上就可以触发构建部署了。

记得将 db.json_multiconfig.ymlnode_modulespublicthemes.deploy* 添加到 .gitignore

但是如果开启了显示文章更新时间的话,db.json 文件就不能被忽略。


后记

为了方便本地预览,可以在 package.json 中添加一些 npm 脚本:

1
2
3
4
5
6
7
"scripts":{
"config": "_config.yml,source/_data/next.yml",
"server": "hexo server --config config",
"clean": "hexo clean --config config",
"theme": "git clone https://github.com/theme-next/hexo-theme-next themes/next && git clone https://github.com/theme-next/theme-next-fancybox3 themes/next/source/lib/fancybox"
}
}
  • npm run server 运行 Hexo 服务

  • npm run clean 清理生成的本地文件

  • npm run theme 进行主题和插件的安装。

具体示例也可以参考我的 User Pages 仓库 XuToTo/xutoto.github.io

参考