用Travis-CI构建Hexo博客

发表于 分类于 本文字数： 1.1k 阅读时长 ≈ 4 分钟

在用过Travis-CI之后，我只能说太香了！

前情提要

最近换了操作系统，Hexo博客的环境自然也就没了，需要重新搭建。本来这事儿应该很容易的，只需要在博客源文件的根目录跑下面的命令就可以了。

1
2
sudo npm install hexo-cli -g
npm install

然而问题来了，搞定博客所需的环境后，hexo g和hexo s --debug居然会出现Warning，然后hexo d居然直接报错。之后我尝试重装Hexo博客的环境，还是报错。于是我就去Hexo项目主页搜了下issue，发现已经有人提过了，讨论比较多的是Regression in Node 14 (issue #4260)。在这个issue讨论的最后，开发团队说已经在v4.2.1的Hexo修复了这个问题。

由于我之前部署的是v4.2.0的Hexo，那就升级呗。结果兴冲冲升级到最新的v5.0.0，发现还是报同样的错误，看来只能选择降低nodejs版本了。因为我不想在机子上装好几个nodejs环境，于是就打起了虚拟机的主意。刚刚好那会儿在跟zhaouv聊天，就顺便说了这事儿。zhaouv一针见血的指出，这种情况就是docker的典型应用。不过更直接的还是使用Travis-CI，这样就可以绕过自己学docker这一步，毕竟GitHub现在可以先build，跟gitlab那套基本一样了。

Travis-CI入门

首先当然是要用GitHub帐号登录Travis-CI，然后完成一系列的授权，就可以在Travis-CI看到自己全部repo了。

不过此时Travis-CI还没有权限对我们的repo进行操作，因此我们还需要在GitHub生成Personal access tokens。在Select scopes这里可以勾选对应的权限，这里勾选repo就可以了（Full control of private repositories）。提交之后GitHub会生成一个token，这个token只会显示一次，如果忘了复制那就只能重新生成。

接下来点击自己的博客项目，然后在More options > Settings里头找到Environment Variables。这里需要把刚刚获得的token添加为环境变量，记得再三确认Display Value In Build Log这个是否为关闭状态。

到这里Travis-CI就配置好了，现在需要在博客repo内提供一个.travis.yml，这样Travis-CI就知道在监听到push之后要干啥。这里提供本博客使用的.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
dist: jammy
language: node_js
node_js: lts/*

branches:
  only:
    - master

cache:
  directories:
    - node_modules
 
before_install:
  - export TZ='America/New_York'

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

script:
  - hexo clean
  - hexo generate
  - cp README.md ./public/

after_script:
  - git config --local user.name "travis-ci"
  - git config --local user.email "deploy@travis-ci.org"
  - sed -i "s/github_repo_token/${GITHUB_REPO_TOKEN}/g" ./_config.yml
  - hexo deploy

当然我们还需要修改_config.yml以适配Travis-CI的自动化部署。

1
2
3
4
5
6
7
8
9
10
11
# 修改前
deploy:
  type: git
  repo: https://git@github.com/oscarcx123/oscarcx123.github.io.git
  branch: master

# 修改后（github_repo_token在构建时会被sed命令自动替换掉）
deploy:
  type: git
  repo: https://github_repo_token@github.com/oscarcx123/oscarcx123.github.io.git
  branch: master

搞定.travis.yml之后，只要push，Travis-CI就会自动生成Hexo博客页面并push到指定的repo了。在生成的过程中，还可以去Travis-CI网站观看实时的Job log。

值得一提的是，我看到不少文章都推荐GitHub的branch功能，把博客源文件（.md）和发布的网页直接放进同一个repo里。我开始也是这么做的，后来发现这样不妥，实际上GitHub private repo也是可以使用Travis-CI部署的。因此最好的做法，就是把博客源文件放在私有库，然后hexo deploy的目标指向一个开启了GitHub Page的public repo。

.travis.yml写法

上面那个脚本没有指定os和dist，因此他们的默认值分别是Linux和Xenial，也就是Ubuntu 16.04 LTS (Xenial Xerus)。所以里头使用的都是Linux命令，例如用sed去动态的正则替换token，用export指定环境变量。

完整的可配置项目清单可以看Travis CI Build Config Reference

Travis-CI主要构建顺序：

  • before_install
  • install
  • before_script
  • script
  • after_success / after_failure
  • deploy
  • after_script

完整的构建顺序可以看Job Lifecycle

当然，Hexo博客是个JavaScript项目，所以跟nodejs一些相关的配置（例如nodejs指定版本号），可以在Building a JavaScript and Node.js project看到。

总结

Travis-CI听起来很复杂，实际上还是很好配置的。现在我本地就完全不需要安装相关环境，也无需担心某些包的升级会破坏环境。每次只需要写博客，写完之后push，过个一两分钟博客就更新了。

（更棒的是，Travis-CI可以白嫖，而且我又水了一篇文章）