使用 Travis CI 自动部署 Hexo

记录一下使用 Travis 这类 CI/CD 工具进行 Hexo 的自动部署,同类的持续集成工具还有 Jenkins、circleci 以及 Github 官方推出的 Github Actions。

持续集成

持续集成服务(Continuous Integration,简称 CI)。简单的说,持续集成就像工厂的全自动流水线一样,当你项目中的代码有变动,就会触发持续集成作业,根据配置文件提供对应的运行环境,执行测试,完成构建,甚至部署到服务器。


自动部署的优点

  1. 一处提交,到处部署: 以部署 Hexo 为例,如果想同时部署到 Github pages、Coding pags 等,传统手动的方式是要拷贝多份项目,分别配置不同的远程仓库,每次新增文件,修改配置都要在多个副本中进行同步,部署的时候需要多次部署,非常非常不方便,而有了持续集成工具以后,我们就可以做到,一处提交,到处部署,极大的简化了部署流程。

  2. 更加方便:传统的方式,我们需要在本地装 Node.js 环境,还要装 Hexo等;有了持续集成,无需在本地安装编译环境,只需要负责项目的代码或者负责文章的内容,剩下的工作交给 Travis 即可,要多省心就有多省心。

  3. 还是方便:比如你现在临时想要修改某篇文章、修改某行代码,甚至不用将项目拉到本地,直接用浏览器编辑文件然后保存,即可触发自动化作业;对于写博客来说,只要你愿意,用浏览器写文章也不是不可以。

  4. 想到再补充…


配置步骤

1. 登录Travis CI的网站:https://travis-ci.com/

初次接触,你会发现有 https://travis-ci.com/https://travis-ci.org/ 两个网站,按照网上的说法就是,org 结尾的网站面向开源项目(这里定义为 Github 上公开仓库都算做开源项目)免费使用;而 com 结尾的网站面向企业等(Github 上面的私有仓库)提供收费服务。

但是,我又发现了下面这个官方说明,里面的大致内容是说,从2018年5月起,公开仓库和私有仓库都可以使用 https://travis-ci.com/ 进行部署,换言之,org 逐渐迁移到 com,以后统一使用 https://travis-ci.com/

打开 https://travis-ci.com/ , 点击右上角 Sign in with GitHub 使用 Github 账号进行登录,登录后,页面是这个样子的。 登录后

点击右上角的头像,点 Setting ,进来后就是下面这个鸟样。
点击 Activate

这里选择我们要绑定的项目仓库,也可以直接绑定所有仓库,后面还可以在 Github 设置里面随时修改,然后点击 Approve & Install ,到这里,就完成了绑定操作

2. .travis.yml 配置文件

之所以 Travis 能够自动触发任务,就是因为这个配置文件的存在,在项目根目录新建 .travis.yml 配置文件,Travis 就会读取里面的内容,进行监听,进而实现自动化。

关于配置文件的详细介绍,可以去 Travis 官方文档阅读学习一下,下面贴出本次部署用的配置文件。

贴出之前,简单交代一下背景,博客源文件和部署都在同一个项目上,其中,源代码在分支 hexo 上面,而 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# 配置编译语言以及需要的版本
language: node_js
node_js: stable

# 配置监听的分支,这里配置 hexo 分支,也就是监听源文件的改动
branches:
only:
- hexo

# 配置缓存,加快部署时间
#cache
cache:
apt: true
directories:
- "node_modules"


before_install:
- export TZ='Asia/Shanghai' # 更改时区,不然默认提交时间是 UTC 标准时间
- npm install -g hexo-cli # 部署环境安装 hexo

install:
- npm install # 安装依赖

script:
- hexo clean
- hexo generate

## 部署方式一,这里是 hexo 官方文档给出的部署方式
# deploy:
# provider: pages
# skip_cleanup: true
# github_token: $ACCESS_TOKEN #访问 token,该变量在 Travis 中设置,下面会介绍
# keep_history: true
# on:
# branch: hexo
# email: youremail #设置 commit 的邮箱
# name: yourname #设置 commit 的用户名
# target_branch: master # 设置部署的目标分支
# local-dir: public #将 public 中的内容部署到 master 分支,如果没有此项配置,会把所有的源文件部署到 master 分支,而不是 hexo g 后生成的静态文件。(hexo g 后的静态页面文件存放在 public 目录下)

## 部署方式二,网上大多数人采用的是这种方式部署
after_script:
- git clone ${GH_REF_SSH} .deploy_git #先拉取项目,取得历史提交记录
- cd .deploy_git
- git checkout master
- cd ../
- mv .deploy_git/.git/ ./public/ ## 拷贝历史 commit 记录,不然每次构建都是全新的环境,造成历史 commit 记录被清空
- cd ./public
- git config user.name "yourname"
- git config user.email "youremail"
- git add .
- git commit -m "Site updated `date +"%Y-%m-%d %H:%M"`. Auto Deploy By TravisCI :)"
# Github Pages
- git push --force --quiet "https://${ACCESS_TOKEN}@${GH_REF}" master:master


## 变量
env:
global:
- GH_REF: github.com/Eccon/Eccon.github.io
- GH_REF_SSH: git@github.com:Eccon/Eccon.github.io.git

上面的配置文件介绍了两种部署方式,可以根据需要进行选择,为了让 Travis 有提交代码的权限,上面的配置文件介绍了两种方式,一种是根据 SSH 进行推送,需要配置私钥;另一种是配置 Token 的方式进行部署

  • 配置私钥:

    打开 Travis 项目的 Setting,往下拉,找到 SSH Key ,将有访问 Github 仓库权限的私钥放到上面,保存即可

  • 配置 Token:

    上面的配置文件,用到了一个变量 ${ACCESS_TOKEN} ,这个也是在 Travis 里面设置的。首先要去 Github 生成一个 Token,打开 https://github.com/settings/tokens 生成的 Token 只会显示一次,复制后,打开 Travis 的 Setting, 找到 Environment VariablesNAME 填写 ACCESS_TOKEN ,VALUE 填写刚才复制的 Token,不要勾选 DISPLAY VALUE IN BUILD LOG,不然 Token 会暴露在日志中,造成泄露,保存即可

3. 触发构建

我们将配置文件保存,然后 git add . && git commit -m "" && git push 一系列操作,将项目的改动推到 Github 远程操作,这时候打开 Travis,就可以看到构建日志了

等待构建完成即可,还可以查看构建历史记录

然后我们打开 Github 仓库主页,看一下提交记录

整个过程下来,体验极其愉快,以后只需要把文章更新上去,剩下的全自动部署发布,超级方便,这里以部署 Hexo 为例简单介绍了 CI 的实际应用场景之一,对于 CI 工具而言,实际功能远不止于此。


已知问题

  1. 使用第一种部署方式,commit 的信息无法自定义,晚上也没有找到自定义的方式,暂无解决方案

  2. 使用第二种部署方式,根据网上那些配置,会造成历史 commit 记录丢失的问题,也就是你在 Github 仓库上看到的永远只有最后一次提交记录点,解决方法见上面配置文件的第二种配置方式

  3. 待补充


参考链接

  1. https://hexo.io/zh-cn/docs/github-pages#Private-repository
  2. https://docs.travis-ci.com/user/deployment/pages/
  3. https://devops.stackexchange.com/questions/1201/whats-the-difference-between-travis-ci-org-and-travis-ci-com
  4. https://www.liaoxuefeng.com/article/1083103562955136
  5. https://github.com/steveklabnik/automatically_update_github_pages_with_travis_example

END

Auto Deploy By TravisCI :)