写在前面

自从在github page上搭建博客以来,都是使用的hexo,每次都是通过hexo命令build生成静态文件,再pushgithub上,后来找到一个deploy插件,只需要填写好githubrepos地址就好。但是源码的保存是个问题,更换电脑想要写博客很不方便,甚至蠢到将源码保存到 u 盘里面,这样每次提交后又要备份一次,很容易忘记。说到这里那为什么不将源码保存到github上呢。

其实也是因为懒,给博客换了几次主题后,使得博客源码很乱,甚至自己也忘了改了主题的哪些代码,加上主题也是个repos,直接提交博客源码是提不上的,涉及到子模块问题,麻烦。想到自己还喜欢改动别人的主题,索性将主题文件夹.git文件删掉,让他成为一个普通的文件夹,这样就能提交到github了。废话不多说,估计是很久没写博客了,没有重点,下面简单说说使用Travis CI自动部署Hexo博客到github上。

什么是 Travis CI?

Travis CI 是目前新兴的开源持续集成构建项目,它与jenkinsGO的很明显的特别在于采用yaml格式,简洁清新独树一帜。目前大多数的 github 项目都已经移入到Travis CI的构建队列中,据说Travis CI每天运行超过4000次完整构建。

构建

首先进入Travis CI官网,使用github账号登录,如下图
travis
登录成功后进入如下界面,以为我再此之前已经构建过,所以会用红色框内的内容,如果没有使用过是没有的。
list
然后点击My Repositories右边的+,添加需要自动构建的repos,进入如下页面。
new
可以看到这个界面会显示当前github账号的所以项目,如果没有显示,点击右上角的Sync account按钮,就可以同步过来了,点击需要构建的repos前面的按钮为ON,再点击其后的原形设置图标,进入如下界面
config
如图中设置,将Build only if .travis.yml is present及另外两个设置为ON,功能如字面意思不多说。
到目前为止,已经将需要构建的repos开启,那么,我们如何在将源码提交到github的时候,它就自动构建并将build后的静态文件push到我的静态文件branch或者repos呢(我是将build后的静态文件放到一个单独的repos了,也可以放在源码repos的另一个branch,例如起名叫hexo),接下来说如何让Travis CI访问github.

Access Token

我们需要在Travis上配置Access Token,就可以在构建完毕后自动pushgithub上保存静态文件的repos了。

生成 Access Token

登录github,进入个人主页,点击setting,进入界面后找到下图所指位置。
token
点击Personal access tokens,进入页面后,在点击右上角Generate new token,会再次让输入github密码,然后在Token description下起一个名字,再勾选一些权限,我是全给勾选上了,在点击下面Generate token这里就不多截图了。复制生成的token码。

配置 Travis CI

回到Travissetting页面,如上面图,在Environment Variables这一栏,点击Add,起一个名字到Name,将复制的token码粘贴到Value框中,到这步为止,已经完成了Travis的设置。到博客源码根目录,创建一个.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
language: node_js #设置语言

node_js: stable #设置相应的版本

install:
- npm install #安装hexo及插件

script:
- hexo clean #清除
- hexo g #生成

after_script:
- cd ./public
- git init
- git config user.name "swust-xiaoj" #修改name
- git config user.email "swustxiaojie@163.com" #修改email
- git add .
- git commit -m "update site"
- git push --force "https://${travis}@${GH_REF}" master:master #travis是在Travis中配置token的名称

branches:
only:
- master #只监测master,可根据自己情况设置,若是存放同一个仓库,这儿可以选择存放源码的branch,如hexo
env:
global:
- GH_REF: github.com/swust-xiaoj/tb.git #设置GH_REF,注意更改yourname

因为我是新起了一个repos来存放静态文件了,所以上面的GH_REF是对应那个repos地址,若是放同一个repos中,那这儿一般都是yourname.github.io那个仓库。到此,配置已经完成了。

创建文章

我们可以创建一篇文章hexo new post use-travis-build-your-hexo-site,添加内容后,并pushgithub,正常情况下,进入Travis网站就可以看到已经在构建了,如图
success
完成后,访问链接就可以看到这篇文章了。

写在后面

很久没有花时间写点东西了,不管有没有价值,总是一种对知识的积累和总结,输出也意味着输入,所以以后还是将学到的东西和积累总结下,自己可以将知识梳理的同时能帮助到别人是更好的了。

更新

master commit 树被清空

仔细查看上面的配置文件,我们发现每次都是将 public 目录下的文件重新生成了一个 git 项目,然后强制覆盖提交到了 master 分支下,这就是问题的所在。
为了解决这个问题,我将配置文件改为了如下的内容:

1
2
3
4
5
6
7
8
9
10
11
12
after_script:
- git clone https://${GH_REF} .deploy_git
- cd .deploy_git
- git checkout master
- cd ../
- mv .deploy_git/.git/ ./public/
- cd ./public
- git config user.name "swust-xiaoj" #修改name
- git config user.email "swustxiaojie@163.com" #修改email
- git add .
- git commit -m "Travis CI Auto Builder"
- git push --force --quiet "https://${travis}@${GH_REF}" master:master #travis是在Travis中配置token的名称

在 after_script 部分,我先将博客项目 clone 到本地的 .deploy_git 目录下(目录名可自定义),然后切换到 master 分支,将 master 分支下的 .git 目录拷贝到了 public 目录下,接着继续后面的 commit 操作。

添加 commit 时间戳

按照前面的方法配置 travis.yml 的内容,在 master 分支下的提交记录是这样的:

1
2
3
4
Travis CI Auto Builder
Travis CI Auto Builder
Travis CI Auto Builder
...

看到每次的提交记录中没有提交的时间戳,所以考虑着要把 commit 的时间戳给加上。
script 命令下是可以执行 shell 命令的,所以对 travis.yml 文件进行了修改。
shell 中获取当前的时间戳,可以这样:

1
2
3
#/bin/bash
> date +"%Y-%m-%d %H:%M"
2018-05-05 12:13

Travis CI 中使用的linux系统在编译生成时使用的是UTC时间,这样我们在github中的提交列表中看到的提交时间就会晚 8 小时。我们需要在执行时将时区改为东八区。

1
2
before_install:
- export TZ='Asia/Shanghai'

然后将after_script中的命令移到单独的shell文件中。最终的两个文件内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
> build.sh
#!/bin/bash
set -ev

git clone https://${GH_REF} .deploy_git
cd .deploy_git
git checkout master

cd ../
mv .deploy_git/.git/ ./public/

cd ./public

git config user.name "swust-xiaoj" #修改name
git config user.email "swustxiaojie@163.com" #修改email
git add .
git commit -m "Travis CI Auto Builder at `date +"%Y-%m-%d %H:%M"`"

git push --force --quiet "https://${travis}@${GH_REF}" master:master #travis是在Travis中配置token的名称
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
> .travis.yml
language: node_js

node_js: stable

cache:
apt: true
directories:
- node_modules
before_install:
- export TZ='Asia/Shanghai' # 更改时区
- npm install hexo-cli -g
- chmod +x ./build.sh # 为shell文件添加可执行权限

install:
- npm install

script:
- hexo clean
- hexo g

after_script:
- ./build.sh

branches:
only:
- master
env:
global:
- GH_REF: github.com/swust-xiaoj/swust-xiaoj.github.io.git

参考