Halo

A magic place for coding

0%

为Hexo博客添加自动化部署Travis

Posted on Edited on Valine:

Intro

  我打理自己的博客也有快两年了，期间做过不少的优化，最近希望对整个博客做一个比较大的提升——添加自动化部署。这里用到的工具是travis-ci，它是一种持续集成的工具，它提供了一个持续集成功能平台，能够为我的博客项目配置好需要执行的操作，如编译、测试、打包、部署等操作。在这篇博客我就来和大家分享一下我的升级之路。

什么是CI

  CI(Continuous Integration)，持续集成，是一种软件实践的过程。通俗来讲就是我们多次地把代码提交，然后对产品不断打包和发布。常用的构建工具有：

  Jenkins在工业界用的比较多，但是它仅支持在内网进行CI，所以对于我们的开源博客来说，比较合适的还是Travis。

为什么要CI

  到这里，可能你还是一脸懵逼，不知道为什么要搞这么麻烦。接下来我结合hexo的特性来分析一下我们添加Travis-ci的必要性。

  首先基于hexo的个人博客发布博文无非就是三板斧：

  • hexo new
  • hexo generate
  • hexo deploy

  相信各位hexo的老手们对这三条命令是非常的熟悉，但是，我们知道，github仓库上仅仅只会保留部署后生成的html和一些主题配置文件用于渲染GitHub Page，而我们写的md文件是没有保存的。为了解决这个问题，我是用的分支的解决办法，通过新建一个hexo分支，将我们手写的文件备份（具体可以看这里传送门）。

  这样子做法解决了我们文件备份的问题，但是麻烦的一点是，每一次我们部署和备份文件是分开的，即我们部署的时候是更新master分支，而备份则需要更新hexo分支，这种开发效率对我来说当然是不能忍受的。

  除了基于开发效率的考虑外，还有一个痛点就是项目迁移问题。如果我们在其他机器上想更新我们的博客，我们需要重新配置所有的环境，包括nodejs和hexo等，这个是非常麻烦的。

  这个时候CI就能够很好地帮助我们解决这两个问题。CI的任务可以理解为：每当我们提交一次源文件（md文件），它就将自动地帮我们把整个项目重新构建一次，这样我们的工作就简化为只需要提交我们写的博文了。

  CI的工作原理可以简单想象为：我们定义了一系列的操作，而我们的git push操作将会激发CI去把我们定义的操作都执行一边，这就是自动化部署。

配置过程

注册Travis账号

首先到Travis的官网注册账号，注意：要使用Github账号登陆，否则可能关联不到GitHub的项目。

注册Travis账号

进入之后就能看到GitHub的所有仓库，我们选择博客的仓库，点击Setting。

进入setting

配置CI信息

这一步的作用主要是开启该项目的CI，这样只要我们提交到GitHub中，CI就会自动启动。同时我们还可以设置环境变量。虽然环境变量也可以在后续的yml文件中设置，但是因为yml文件是公开的，所以一些有关权限的token和个人信息可以在这里设置，避免信息泄露。

开启CI

然后是配置环境变量。可以看到这里我有两个TOKEN，这两个TOKEN的作用是验证对仓库的权限，第一个CO_TOKEN是coding.net仓库的token（这是我用于镜像的仓库，可以忽略）。第二个REPO_TOKEN是GitHub仓库的token，我们需要在github中获取。

CI环境变量

获取GitHub的token，首先进入个人设置（注意是个人头像下的setting，而不是某个仓库的setting），进入Developer settings->Personal access tokens。然后点击右上方的Generate new token，权限选择repo即可（给予过多的权限可能会造成安全问题）。创建成功后我们就能看到token内容，注意保存，它只会出现一次，忘记了只能重新创建了（这个token最好不要以明文的形式保存，因为拥有这个token就能够对你的仓库进行很多操作）。最后我们把这个token填回到Travis那里就可以了。

获取Github仓库token

配置构建脚本

这一步我们将编写一个yml格式的文件，用于给CI自动部署。我们要在博客的根目录下创建一个文件.travis.yml，里面编写的语法需要符合travis的规范，这里我直接给出。

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
# 使用语言为 Node.js
language: node_js
# Node.js 版本，Node 11.0.0 版本 yarn install 会报错不支持 
# node_js: stable
node_js: 10.10.0
# 设置只监听哪个分支 
branches:
  only:
  - hexo
# 缓存，可以节省集成的时间，这里用了 yarn, 如果不用可以删除 
cache:
  apt: true
  yarn: true
  directories:
    - node_modules
    - CNAME
# env
env:
 global:
   - GITHUB_URL: github.com/leungyukshing/leungyukshing.github.io.git
   # - CODING_URL: git.coding.net/leungyukshing/leungyukshing.coding.me.git 旧版的URL已经报废
   - CODING_URL: e.coding.net/leungyukshing/leungyukshing.git # 注意使用新版的URL
# tarvis 生命周期执行顺序详见官网文档 
before_install:
# 更改时区 
- export TZ='Asia/Shanghai'
- git config --global user.name ${USER_NAME}
- git config --global user.email ${USER_EMAIL}
# 由于使用了 yarn, 所以需要下载，不用 yarn 这两行可以删除 
#- curl -o- -L https://yarnpkg.com/install.sh | bash
#- export PATH=$HOME/.yarn/bin:$PATH
# hexo 基础工具 
- npm install -g hexo-cli
# 初始化所需模块，在 package.json 中配置的有，这样 node_modules 就不用提交到 GitHub 了 
# 下次如果换电脑，安装完 Node.js, 全局 (-g 参数) 安装完 hexo-cli, 直接在项目根目录初始化即可 (在 package.json 配置的都会自动下载)
- npm install
# 本地搜索需要工具 
- npm install hexo-generator-searchdb --save
# 字数统计，时长统计需要工具，Node 版本 7.6.0 之前，请安装 2.x 版本，npm install hexo-wordcount@2 --save
# - npm install hexo-wordcount --save
# 站点地图，seo 优化使用 
- npm install hexo-generator-sitemap --save
- npm install hexo-generator-baidu-sitemap --save
# 中英文之间自动增加空格插件 
# - npm install hexo-filter-auto-spacing --save (这个人用的少，不用了)
- npm install hexo-pangu-spacing --save
# rss 订阅插件 
- npm install hexo-generator-feed --save
# 三维卡通人物 
# - npm install --save hexo-helper-live2d
# 三维卡通人物 - 小猫咪模型下载 (保险起见，把模型文件放到自己的文件夹里，不用每次下载)
# - npm install --save live2d-widget-model-hijiki
# 压缩文件 
- npm install hexo-neat --save
install:
# 不用 yarn 的话这里改成 npm i 即可 
- npm install
script:
- hexo clean
- hexo generate
# 成功之后才会提交，如果失败就会跳过并发送失败邮件通知 
after_success:
# 获取 master 分支内容 
- git clone https://${GITHUB_URL} .deploy_git
- cd .deploy_git
- git checkout master
- cp -rf ../public/* ./
# 必要配置文件 
- cp -rf ../README.md ../.gitignore ../CNAME ../index.php ./
# 更改 .gitignore 内容，与 source 分支的不一样，直接置空，目前没有需要过滤的 
- echo "" > ./.gitignore
- git add .
# 提交记录包含时间，跟上面更改时区配合 
- git commit -m "Travis CI Auto Builder at `date +"% Y-% m-% d % H:% M"`"
# 推送到主分支 
- git push --force --quiet "https://${REPO_TOKEN}@${GITHUB_URL}" master:master
# Mirror Repo
# - git push --force --quiet "https://leungyukshing:${CO_TOKEN}@{CODING_URL}" master:master # 旧版的用户名是username
- git push --force "https://18565043306:${CO_TOKEN}@${CODING_URL}" master:master # 新版的用户名是电话号码
# 邮件通知机制，我在这里设置了成功 / 失败都会通知，这里不能使用环境变量 
# configure notifications (email, IRC, campfire etc)
# please update this section to your needs!
# https://docs.travis-ci.com/user/notifications/
notifications:
  email:
    - jacky14.liang@gmail.com
  on_success: always
  on_failure: always

大致分析一下结构：

  • language：本项目的主要语言，hexo博客的话就是基于nodejs。
  • node_js：nodejs版本号。
  • branches：CI监听的分支，这里我的md文件是保存在hexo分支，所以监听的也就是hexo。
  • cache：缓存部分，可以节省集成时间。
  • env：这里也是前面在配置CI信息提到过的环境变量，一些不太敏感的信息可以写在这里。如用户名、仓库路径等。
  • before_install：构建前的环境搭建。这里需要安装所有依赖，包括博客用到的所有插件，这一部分大家需要按需修改，一般格式就是npm install [对应依赖]
  • install：npm包安装。
  • script：在安装完后会执行的脚本文件，这里我们就写部署的代码。每次部署都需要先清除再部署，虽然看上去好像有点浪费时间，但这是软件工程开发的规范。
  • after_success：这里定义的是构建成功后的行为。构建成功后我们把代码提交到master分支，给Github Page渲染。
  • notification：通知提醒。我们每次构建完后都可以设置邮件提醒，这里我设置的是成功与失败都发送提醒。

重要更新：

coding.net改版后，仓库的URL和用户名都有改动。仓库域名改为e.coding.net，用户名改为手机号码。

至此，CI的整个配置就完成了。接下来我们每次写博客的步骤简化为：

  • hexo new [post name]
  • git add .
  • git commit -m "commit message"
  • git push origin hexo

这四条命令能够部署和备份我们的文件，非常方便。我们每次push后，可以到travis的网站看到我们的项目构建。

项目构建

总结

  希望通过这篇博客能够与大家分享为开源项目添加CI的过程，开发的效率确实提高了不少，当然我自己也在探索当中，比如说能不能把CI的链接在每次push后打印到命令行中。希望这篇博客能够帮助到你，谢谢！

Welcome to my other publishing channels