Coley's Blog

君之所向，一往无前。

Travis CI + GitHub Pages自动部署Hexo博客

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

什么是持续集成？

持续集成（Continuous Integration，简称 CI）指的是只要代码有变更，就自动运行构建和测试，反馈运行结果。确保符合预期以后，再将新代码“集成”到主干。

持续集成的好处在于，每次代码的小幅变更，就能看到运行结果，从而不断累积小的变更，而不是在开发周期结束时，一下子合并一大块代码。

Travis CI 提供的是持续集成服务。它绑定 Github 上面的项目，只要有新的代码，就会自动抓取。然后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。

本文记录了利用 Travis CI 搭建自动部署的 Hexo 博客系统的整个过程。

Travis CI 的使用

创建 token

  1. 进入配置页面，先在 Github 的设置页面中找到 Developer settings，点进入后选择第三条 Personal access tokens，或者直接点击这个链接跳转配置页面。

  2. 生成密钥，点击右上 Generate new token 按钮，可能会需要输入密码验证一下用户身份，然后填写 token 名称用于标识该 token 的用途，然后在下方为 token 设置权限，这里只需要添加 repo 即可。

    这里需要注意的是，密钥只会在第一次生成时可见，页面刷新后就无法查看密钥的值，因此创建后需要立即保存，否则只能重新生成。

  3. 添加密钥，进入 Travis CI 官网 travis-ci.com，首次进入需要通过 Github 来进行仓库的授权访问，完成之后会进入到自己的控制面板，这里可以看到自己 GitHub 上的所有仓库，然后进入需要部署的仓库的 setting 页面，在这里添加环境变量，变量名设置为 GH_TOKEN ，变量值为上一步骤中保存的哈希值。

    切记不要点开 DISPLAY VALUE IN BUILD LOG 选项，否则 token 值会输出到构建日志中，就会暴露给别人。

添加travis.yml

Travis CI 的的部署极其简单，只用在项目根目录中添加一个travis.yml配置文件，该文件指定了所有 Travis CI 的构建和部署行为。

下面以我的 Hexo 博客项目为例：

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
os: linux # 选择构建的操作系统
language: node_js # 项目语言
node_js:
  - 10  # 使用 nodejs LTS v10
branches:
  only:
    - main # 只监控存放源代码的 main 分支
cache:
  directories:
    - node_modules # 缓存 node_modules 加快构建速度
before_script: # 构建环境搭建，根据所用的主题，这里会有所不同
  - npm install -g hexo-cli # 在 CI 环境内安装 Hexo
  - mkdir themes # 由于 main 分支中没有将 themes/ 文件夹，所以需要重新创建
  - git clone https://github.com/theme-next/hexo-theme-next themes/next #从 Github 上拉取 next 主题
  - npm install # 最后在根目录安装站点需要的依赖 
script: 
  - hexo generate # 生成静态文件
deploy: # 根据个人情况，这里会有所不同
  provider: pages
  skip_cleanup: true # 构建完成后不清除
  strategy: git # 默认使用 git
  token: $GH_TOKEN # 在 Travis CI 中设置的环境变量 token
  keep_history: true # 保存历史
  fqdn: blog.coley48.cn # 自定义域名，使用 username.github.io 可删除
  on:
    branch: main # hexo 站点源文件所在的 branch
  local_dir: public
  target_branch: gh-pages # 存放生成站点文件的 branch，使用 username.github.io 必须是 master

提交项目

git push命令执行完成之后，稍等片刻 Travis CI 就会开始运行。
在 Travis CI 控制面板中，进入到自己的仓库页面中可以看到项目正在构建，显示黄色：

在下方Job log中还可以查看构建过程中的输出信息：

当输出Done. Your build exited with 0.时，表示构建成功，显示为绿色：

此后，Travis CI 会自动监听 GitHub 仓库提交，每次有新的代码提交，Travis CI 会自动按照travis.yml配置文件中的命令执行，然后将生成的代码推送到指定的分支中。

参考资料