配合TRAVIS CI,将HEXO博客自动部署到你的服务器上。

948 阅读6分钟
原文链接: blog.keep.moe

配合Travis CI,将Hexo博客自动部署到你的服务器上。

这篇教程将指导你如何将写好的文章通过Git提交至GitHub仓库,并使用Travis CI自动构建、部署到你的服务器上。

今年夏天的时候,为了多练习Python,于是用就它写了一个简单的静态博客生成器,有模板有标签,不过与现有的静态博客相比还是相形见绌。即不易管理,也总出现BUG。

博客是需要静下心来写的,程序总需要维护实在不是长计,于是,昨天我便把博客换成了Hexo。终于可以安静的写博客了。

Hexo是一个基于Node.js的博客框架,从模板、主题再到插件应有尽有,写好文章后可以得到一个静态整站,对于像个人博客这种更新需求不大的网站是再适合不过了。

网上给出的教程多是将博客托管于GitHub Pages上,然而GitHub Pages在国内部分地区以及部分运营商的网络下的表现有时并不完美,经常出现载入缓慢,CSS及JS无法载入的问题,因此也有部分人选择将博客放在自己的服务器上。

但是在个人服务器上搭建博客又要考虑一个非常重要的问题——备份数据。GitHub提供的版本控制功能非常强大,但是个人服务器上大都没有使用版本控制系统,需要自行备份。

为什么不把GitHub的强大版本控制功能与个人服务器的访问速度结合在一起呢?

注意

本教程并不是为初学者准备的,因为其需要的步骤较多且较复杂,需要读者有使用Git及GitHub的经验,并了解PHP及Bash。

0x00 新的开始

新建一个代码仓库,我们暂且取名为 HexoBlog 好了。
为了使仓库更简洁,我们可以在master分支的基础上新建一个分支,暂且取名为 raw 分支。

0x01 Clone到本地

git clone -b raw <仓库克隆URL> #只Clone出新建的raw分支 保留master分支用于部署

0x02 安装Node.js

Node.js的版本仍在不断更新中,请至项目下载页寻找合适系统架构的安装包。

安装包自带包管理器NPM。

Node.js与NPM的版本

安装后可以在Terminal中查询Node.js与NPM的版本。

0x03 安装Hexo

cd ./HexoBlog #进入刚Clone的仓库目录
npm install hexo-cli -g
hexo init
npm install

NPM 出现无法连接的问题,可以尝试更换淘宝开源NPM镜像服务器

接下来我们可以看到仓库中的文件结构

文件结构

0x04 使用Travis CI

首先我们先打开Travis CI,可以在右上角找到使用GitHub登陆的按钮。

Travis CI首页

授权完成后,你可以在左上角找到My Repositories一旁的加号“+”,点击它,它就会列出你所有的仓库,你只需要找到刚才的 HexoBlog 并把它左侧的开关打开就可以了。

添加仓库

选择仓库

0x05 生成GitHub Personal Access Token

登录GitHub,在右上角头像处进入设置。

进入设置

在左侧找到 Personal access tokens,并点击右上角的 Generate new token

Personal access tokens

需要为新的Token输入一个名字,这里我们就填入 Travis CI 好了。

Generate new token

确定生成后,Token将显示在页面上,此时需要将其复制并保存好,并避免泄露。遗忘Token后不能找回,只能重新生成。

生成Token

最后,我们还需要生成随机字符串,并在其中选择一行随机字符串,为下文备用。

0x06 配置Travis CI

首先在Travis CI中找到已经启用自动构建的仓库,并在右侧找到设置按钮。

设置按钮

有两处需要设置,首先需要启用 Build only if .travis.yml is present 选项,以避免 master 分支被构建和陷入构建循环的问题。

另外,在下方的环境变量设置处,我们需要设置两组变量,并注意保持 Display value in build log 禁用,以免构建日志泄露Token等信息。

#需要设置的两组变量
GitHubKEY = 上文生成的GitHub Personal Access Token
NOTIFY_TOKEN = 上文生成的随机字符串

设置页面

在每次Push后,Travis CI将检查分支下的 .travis.yml 文件,并以此作为配置进行构建。

下面是我所使用的 .travis.yml :

language: node_js
node_js:
- "0.12"
install:
- npm install hexo-cli -g
- npm install hexo --save
- npm install
script:
- chmod +x ./build.sh
- ./build.sh > /dev/null
branches:
only:
- raw

有关于Travis CI配置的详细解释可以查阅官方文档

在这里,配置文件限制了自动构建工作只会在 raw 分支下进行。

可能你已经发现配置中的 build.sh 了,我们接下来就介绍一下这个文件。

hexo generate #生成静态整站
cd ./public #生成的静态页面会存储在public目录下
git init
git config --global push.default matching
git config --global user.email "username@example.com" #填入GitHub的邮箱地址
git config --global user.name "username" #填入GitHub的用户名
git add --all .
git commit -m "Travis CI Auto Builder" #自动构建后的内容将全部以此信息提交
git push --quiet --force https://${GitHubKEY}@github.com/你的GitHub用户名/你的代码仓库名.git master #自动构建后的内容将全部以此信息提交
curl --connect-timeout 20 --max-time 30 -s http://远端服务器URL/webhook.php?_=${NOTIFY_TOKEN} #服务器Webhook 将在下文介绍

0x07 远端服务器的配置

到这里,大部分的工作都完成了,我们只需要配置远端服务器就可以了。

远端服务器所需要做的工作便是将构建好的内容同步到本地,在这之前,我们每次提交到 raw 分支的新文章会被Travis CI取得并生成整站,再由Travis CI将整站Push回 master 分支。

因此我们只需要通知远端服务器Clone一下 master 分支就可以了。

首先我们在服务器上新建一个Bash文件,我使用的是VPS,因此以保存在 /home/sync_blog.sh 为例。

文件内容如下:

cd /var/www/blog/ #进入网站的根目录 假设blog文件夹是blog子域名的根目录
rm -rf ./* > /dev/null #清理上次的文件
rm -rf ./.* > /dev/null #清理上次的文件
git clone --depth=50 --branch=master https://github.com/SumiMakito/SumiMakito.github.io.git ./ #从master分支Clone

下一步,创建一个用PHP实现的类似于Webhook的接口,为什么选择PHP?因为它是最好的语言啊!很简单,代码如下:

<?php
if($_GET['_']=="上文的随机字符串"){
shell_exec("/home/sync_blog.sh > /dev/null");
print("Done!");
}else{
die("Invalid token!");
}
?>

假设这个PHP页面可以从 www.example.com/webhook.php 访问到,那么上文中 build.sh 中的最后一行就可以改成:

curl --connect-timeout 20 --max-time 30 -s http://www.example.com/webhook.php?_=${NOTIFY_TOKEN} #服务器Webhook 将在下文介绍

0x08 测试

99%完成,只欠测试。

还记得之前的 HexoBlog 文件夹吗?

cd ./HexoBlog
hexo new hello-ci #本地没有Hexo的话可以直接跳过这一步
vim ./source/_posts/hello-ci.md
git add --all .
git commit -m "Hello, CI!"
git push

结语

这篇教程稍麻烦一些,但是也能帮助你了解Travis CI是如何简单配置并工作的。

在本地也可以生成整站,但这种方案对于本地无法安装Node.js及Hexo的用户来说很是方便。