使用 Travis CI 自动生成与部署 Hexo 博客

请注意,本文编写于 123 天前,最后修改于 19 天前,其中某些信息可能已经过时。

我相信有许多同学选择使用 Hexo + GitHub Pages 作为自己的博客解决方案,例如我的 Wiki 站点即是如此。但是 Hexo 每次写完文章后都要执行一次生成与部署,当文章比较多时这个过程可能变得很慢。

本文介绍了使用 Travis CI 作为自动化手段实现构建、部署 Hexo 博客的过程。这种方法无需手动执行 hexo ghexo d ,只需在每次编写文章后将更改 push 至远程仓库即可,顺带实现了博客源码备份。使用该方法在第一次配置完成后即使是无 NodeJS 与 Hexo 环境时也可以编写并发布文章,因为构建与部署本身是由 Travis CI 完成的。

Travis CI

CI 是 Continuous Integration 的缩写,即「持续集成」,本意是帮助开发者在开发过程中随时对小规模的的代码更改进行生成、测试、部署。Travis CI 提供基于 GitHub 的 CI 服务,它可以从 GitHub 上随时同步代码,并对其进行生成与部署。

或许有同学接触过 GitHub 的 Webhooks 功能,即当代码仓库发生某些操作时,GitHub 会向指定的地址发送请求,当服务端收到这些请求时即可进行下一步操作,例如拉取最新代码-生成-部署。Travis CI 所做的事情与之是类似的。

思路

基本的思路如图(诚意手绘):

原理流程
原理流程

例如我的代码仓库 alandecode.github.io ,其 master 分支用于存储 Hexo 生成的静态文件,即博客网页;source 分支则用于存储博客源码,一般包括了 _config.ymlsourcethemespackage.jsonscaffolds 等文件与目录。

整个工作循环是这样的:在 source 分支下编写新的文章并保存,commit 后 push 至 GitHub 上的 source 分支。Travis CI 探测到 push 操作,即从 source 分支拉取新的源代码,并在自己的服务器上执行生成过程,并将生成结果 push 至代码仓库的 master 分支,完成部署过程。

实现

假设你已经对 Hexo 的部署与发布有一定的了解,博客已经部署在 xxxx.github.io 这个仓库的 master 分支上。

GitHub 侧

仓库设置

首先将博客仓库 clone 至本地:

git clone git@github.com:xxxx/xxxx.github.io.git

然后进入代码仓库,创建并切换至新的分支 source

cd xxxx.github.io
git checkout -b source

删除 xxxx.github.io 目录下的所有代码文件(注意不要删除 .git 目录),然后将你的 Hexo 博客源代码尽数拷贝至 xxxx.github.io 目录下。确保除 xxxx.github.io 根目录下存在 .git 文件夹外,其余位置均不存在,例如你的第三方主题可能是直接 clone 下来的,里面会有 .git 文件夹,删掉它。

某些临时文件是不必要推送到远端的,为了加快 push 速度,在 xxxx.github.io 下新建 .gitignore 文件,内容为:

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

检查一下此时 xxxx.github.io 目录下应该包括了 package.json 文件,里面记录了所有的依赖包。此时执行一次 commit 与 push:

git add .
git commit -m 'init source'
git push --set-upstream origin source

此时 source 分支应该已经推送至 GitHub 了。由于以后我们只会修改 source 分支,为了方便将 source 分支设置为默认分支:GitHub 仓库 Settings → Branches → Default Branch 设置为 source。

获取 Access Token

点击 GitHub 右上角头像 → Settings → Developer settings → Personal access tokens,点击 Generate new token,设置 token 名称,并勾选 repo 前面的框。

access-token.png
access-token.png

点击 Generate,然后将新生成的 token 记下。保管好它,你以后不会再看到这个 token 第二次了。

Travis CI 侧

Travis CI 官网,使用 GitHub 账号登录,然后添加仓库:待仓库列表同步完成后将 xxxx.github.io 勾选。

add-repo.png
add-repo.png

然后点击旁边的 Settings 按钮,如图设置:

travis-settings.png
travis-settings.png

下方 Environment Variables 填写 name 为 travis,然后 Value 为 GitHub 获得的 Access Token,取消勾选 Display value in build log,点击 add。

添加 travis 配置文件

回到 xxxx.github.io 目录下,创建一个 .travis.yml 的文件,内容为:

language: node_js
node_js: stable
install:
  - npm install
script:
  - hexo g
after_script:
  - cd ./public
  - git init
  - git config user.name "【GitHub 用户名】"
  - git config user.email "【GitHub 邮箱】"
  - git add .
  - git commit -m "Update docs"
  - git push --force --quiet "https://${travis}@${GH_REF}" master:master
branches:
  only:
    - source
env:
  global:
    - GH_REF: 【github.com/AlanDecode/alandecode.github.io.git】

对应修改其中用【】括起来的部分。再执行一次 commit 与 push:

git add .
git commit -m 'update'
git push

稍等片刻,在 Travis CI 的控制面板将可以看到构建历史:

build-history.png
build-history.png

若状态为 passed 则说明部署成功。

总结

如此下来,Hexo 生成、部署繁琐的问题也没有了。不过即使它万般好,评论系统仍然令人头疼。

以上。

Comments

添加新评论

已有 27 条评论

我用的 valine 评论系统,国内的不会被墙,坏处就是容易被灌垃圾评论。

我用过这个,不过是比较早期的版本,当时不支持自定义外观所以放弃了

Ryoma Ryoma 回复 @熊猫小A

现在还是有一个问题,就是回复邮件自定义起来比较麻烦。

对,我使用的那一版还没有回复自定义功能,所以提了需求。之后 Valine 的作者回复我说已经可以自定义了,不过那时我已经决定用 Typecho 了……

啊啊啊!冲着头图的六驱进来惹

∠( ᐛ 」∠)_ Disqus 海星,好像有个反代的DisqusJS可以用,不过也可以任性的直接提示访客自备梯子评论 哈哈

熊猫小A 熊猫小A 回复 @援军

用 Hexo 主要图个免费省事,反代 Disqus 需要墙外服务器,有服务器就不会用 Hexo 了……

Ghosin Ghosin 回复 @熊猫小A

DisqusJS作者有提供反代disqus API 服务器,但不保证SLA(目前还可以用(/ω\)

改.travis.yml的时候千万别忘了去掉'【】',别问我怎么知道的 我要把自己蠢哭了

原来是叫hexo吗,一只叫的hoex

hexo的评论系统可以用gitment啊

熊猫小A 熊猫小A 回复 @Sliber

可是也有人没有 GitHub 账号

wi1dcard wi1dcard
  - git add .
  - git commit -m "Update docs"

可以简化为 git commit -am

熊猫小A 熊猫小A 回复 @wi1dcard

好哒 学习了

过来学习学习

熊猫小A 熊猫小A 回复 @点滴记录

欢迎欢迎~互相学习哈哈

我在gitlab一键操作的,在线生成一个文件。以后直接在浏览器把md文档上传上去就行了,等不到1分钟就可以浏览访问了。

熊猫小A 熊猫小A 回复 @林海草原

Gitlab 这么强?学习了

之前在用Hexo,后来还是发现动态博客可定制性比较高。(等一个真香

熊猫小A 熊猫小A 回复 @Siphils

就是这样

  1. 1
  2. 2