# 持续集成 Continuous Integration @SpencerWoo Finish

TIP

利用 Travis CI 将 Hexo 持续集成部署到 GitHub Pages. 👷

使用 CI 也可以直接在 GitHub 上面在线编辑文章!

(如果觉得没必要,可略过。)

# 什么是持续集成?

持续集成(英语:Continuous integration,缩写 CI)是一种软件工程流程,是将所有软件工程师对于软件的工作副本持续集成到共享主线(mainline)的一种举措。

简单来说,我们通过持续集成,能够简化 Hexo 发布博客的步骤,即:将清除缓存 hexo clean ,生成静态文件 hexo generate 和部署到 GitHub Pages hexo deploy 这些步骤通过持续集成工具来帮助我们自动执行。

这样我们在本地对博客文件进行修改、新增博文内容或者新增博客文章,只需要通过 git 推送到 GitHub 仓库之后,持续集成工具就可以帮助我们在线构建博客静态文件并直接部署到 GitHub Pages。这之后,我们发布博客内容就不需要本地三步走了。

同时,使用 CI 也可以让我们直接在 GitHub 上面随时随地在线编辑文章!

👷 本章我们所利用的持续集成平台是 Travis CI.

# 注册 Travis CI 账号,绑定 GitHub 账户

首先,我们到 Travis CI (opens new window) 官网,用自己的 GitHub 账户直接关联登录,并允许 Travis CI 查看自己的公有仓库。

然后我们到 Travis CI 账户页面 (opens new window) 开启我们的博客仓库。如图。

# 配置文件

# 配置本地和远程仓库

警告

由于 GitHub Pages 的限制,每个人的默认博客仓库 xxx.github.io 只允许将静态文件托管在仓库的 master 分支。

为了方便下面步骤的进行,我们进行这样的配置:

  • 备份博客源文件
  • 在本地仓库创建 hexo 分支
# 克隆项目到本地
git clone https://github.com/xxx/xxx.github.io.git
# 创建并切换到 hexo 分支
git checkout -b hexo
  • hexo 分支保存博客项目的源代码
    • hexo 分支下的文件除 .git 目录外全部删除
    • 将博客源码文件拷贝到该目录下,并提交 Commit 到 hexo 分支.
  • 将本地 hexo 分支内容提交到 GitHub 远程仓库
# 提交本地 hexo 分支到远程仓库的 hexo 分支
git push origin hexo:hexo

经过这样的配置,我们博客仓库项目文件应该是这样的:

  • hexo 分支保存博客项目的源代码
  • master 分支保持项目的静态文件(即 public 文件夹下的内容)

# 配置持续集成文件

.travis.yml 是 Travis CI 的部署配置文件,Travis CI 部署时会自动读取我们每次 Commit 中是否包含 .travis.yml ,有此文件才会开始部署。

# 创建 .travis.yml 配置文件

在博客项目源代码分支下( hexo 分支)创建文件 .travis.yml ,并添加如下内容:

language: node_js # 编译语言、环境

sudo: required # 需要管理员权限

dist: xenial # 指定 CI 系统版本为 Ubuntu16.04 LTS

node_js: stable #Node.js 版本

branches:
  only:
    - hexo # 只有 hexo 分支检出更改才触发 CI

before_install: 
  - export TZ='Asia/Shanghai' #配置时区为东八区 UTC+8
  - npm install hexo-cli # 安装 hexo
#  - sudo apt-get install libpng16-dev # 安装 libpng16-dev CI 编译出现相关报错时请取消注释

install:
  - npm install # 安装依赖

script: # 执行脚本,清除缓存,生成静态文件
  - hexo clean
  - hexo generate

deploy:
  provider: pages
  skip_cleanup: true # 跳过清理
  local_dir: public # 需要推送到 GitHub 的静态文件目录 
  name: $GIT_NAME # 用户名变量
  email: $GIT_EMAIL # 用户邮箱变量
  github_token: $GITHUB_TOKEN # GitHub Token 变量
  keep-history: true # 保持推送记录,以增量提交的方式
  target-branch: master # 推送的目标分支 local_dir->>master 分支
  on:
    branch: hexo # 工作分支

警告

  • 其他文档可能提到了利用 hexo-deployer-git 进行部署,但是由于 Travis CI 本身支持直接部署到 GitHub Pages 的工具,因此无需另行安装 hexo-deployer-git 了;
  • 其他文档也可能提到在 .travis.yml 中加入如下内容,来缓存 node_modules 下的内容,从而加快编译速度。但是经过我的尝试, node_modules 经常会由于没有及时更新,在添加其他组件之后出现「博客生成静态文件步骤」失败的情况,因此建议不进行缓存处理。
cache:
  directories:
    - node_modules

# 在 Travis CI 中配置变量

在配置文件中我们使用了三个变量:

  • $GIT_NAMEgit 用户名
  • $GIT_EMAILgit 用户邮箱
  • $GITHUB_TOKEN :GitHub 通行证 (token) 字符串

其中前两项可以通过在本地终端中这样查看:

git config --global user.name
git config --global user.email

如下图所示:

最后一项 GitHub 通行证 (token) 我们在 GitHub 中进行申请:

  • 将生成的 Token 复制,保存(生成 Token 的页面只有一次机会看见,请保存妥当。)

在 Travis CI 仓库配置中,将三个变量填入设置(位于 Settings > Environment Variables 处并保存:

# 自动部署

经过以上步骤的配置,发布博客的命令就变更为:

# 切换到 hexo 分支
git checkout hexo

# 提交新博文
git add .
git commit -m "Publish new post."

# 推送到远程仓库
git push

这样,在每次我们将博客的源文件通过 git 推送到 GitHub 的 hexo 分支上后,Travis CI 就会自动检测并主动开始构建我们的博客静态文件,并自动部署到 GitHub Pages 中。

除了方便部署,我们同时还在 GitHub 上面成功开启了我们博客源代码的备份,一箭双雕。👷

关于评论

评论前请填好“昵称”、“邮箱”这两栏内容,否则不会收到回复,谢谢!