Hugo利用Webhook实现自动部署

既然是静态博客,部署可不就很简单嘛,本地电脑上用hugo命令生成静态文件,然后FTP上传到服务器不就行了?这是最直接的方法,但实在是有点麻烦,更重要的是,这一点也不geek。都8102年了,谁还用FTP啊,大家都在用Git好不好!这里我就简单记录一下利用GitLab提供的Webhook来实现Hugo在VPS上自动部署的方法。

前提

此方法仅适用于在VPS上的部署,对于使用GitHub Pages或用Netlify部署的同学们并不适用。用各类Pages服务的直接本地生成然后Push到Git仓库就行,或者搞个CI自动构建;Netlify就不用多说,绑定账号,选定好Git Repo和分支就不用操心了,一切都是全自动的。

关于怎么搭建并配置Hugo站点这里就不做讨论,这篇文章默认你已经在本地安装好了环境,搭好了Hugo站点,并且,你已经把源放到远程Git代码托管了了,我本人用的是GitLab,后面也是以GitLab为例,当然,跟GitHub大同小异。

另外,我服务器的系统是Debian 9,其他Linux发行版应该也是大同小异的。并且,以下操作我都是以root身份,如果你用的是非root账户,出现权限问题记得加sudo哦。

原理

我在上一篇文章《Hello Hugo》中已经说过了,就是更改Push到GitLab,GitLab发送一个POST请求到服务器,服务器上一个Node.js脚本监听请求,收到请求就运行一个shell脚本自动拉取最新代码并构建。废话不多说了,开始吧……

操作

配置环境

指VPS的环境配置。

Git

安装Git,这个不用多说了吧:

apt update
apt install git

Hugo

在Linux上安装Hugo大概有三种方法:

  1. 从系统源安装,这种方法安装更新方便,缺点是版本很低,低到生成页面时都会报错,所以不推荐。
  2. 使用snap。安装snap,然后snap install hugo,优点是安装更新方便、版本新,然而,如果你是国内的服务器,下载速度可能会慢到你怀疑人生。是否用该方法完全取决于你的服务器的下载速度和你的忍耐度。
  3. 直接去Hugo Releases上找最新的release,官方提供了各个平台的二进制文件,还提供了deb格式的封装,Debian类系统可以直接用dpkg来安装,其他Linux发行版下载二进制拷到/usr/local/bin文件夹中即可使用。

我用的就是第三种方法,以安装最新的0.41(64位)为例:

wget https://github.com/gohugoio/hugo/releases/download/v0.41/hugo_0.41_Linux-64bit.tar.gz
tar -zxvf hugo_0.41_Linux-64bit.tar.gz
cp hugo /usr/local/bin/hugo

然后运行一下hugo version,出现类似信息就表示安装成功了:

Hugo Static Site Generator v0.41 linux/amd64 BuildDate: 2018-05-25T16:57:20Z

Node.js

这个我就不多说了,直接去https://nodejs.org/en/download/ ,有多种安装方式,总有一个适合你。

配置服务器上的Git仓库

源码放在GitLab上,为了能在服务器构建,我们需要在服务器上克隆一份。git clone提供ssh和https两种方式,我这里还是推荐用ssh来连接,因为https说不定什么时候就要你重新输入账号密码了,这样一来自动部署就卡住了。用ssh要先添加ssh key,GitLab添加ssh key的详细方法请看这里:GitLab and SSH keys,这里不做过多介绍。配置好ssh key以后,以我的GitLab仓库为例:

git clone git@gitlab.com:Track3/my-hugo-blog.git
cd my-hugo-blog
hugo -d /usr/share/nginx/html/blog/

第一次连接GitLab要确认信息,以后就不用了。后面的/usr/share/nginx/html/blog/是我的Nginx文档根目录,也就是生成的静态文件输出目录。

配置脚本

新建一个文件夹,先把hugo的自动构建脚本写好。

mkdir webhook
cd webhook
nano hugo-deploy.sh

hugo-deploy.sh中写入以下内容并保存:

#!/bin/bash

cd ~/my-hugo-blog
git pull origin master
hugo -d /usr/share/nginx/html/blog/
exit 0

很简单的bash脚本,其中~/my-hugo-blog是你的Git仓库也就是网站源码的路径。别忘了添加执行权限:

chmod +x hugo-deploy.sh

然后,我们就要用到Node.js来监听GitLab那边发送过来的请求了。用了gitlab-webhook-handler这个中间件:

npm install gitlab-webhook-handler --save

然后创建一个gitlab-webhook.js,写入以下内容并保存:

var http = require('http')
var exec = require('child_process').exec
var createHandler = require('gitlab-webhook-handler')
var handler = createHandler({ path: '/webhook-123456' })

http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404
    res.end('no such location')
  })
}).listen(7777)

console.log("Gitlab Hook Server running at http://0.0.0.0:7777/webhook-123456");

handler.on('error', function (err) {
  	console.error('Error:', err.message)
})

handler.on('push', function (event) {
    let currentTime = new Date();
    console.log('\n|--------------------> ' + currentTime.toLocaleString());
    console.log('Received a push event for %s to %s', event.payload.repository.name, event.payload.ref);
    exec('sh ./hugo-deploy.sh', function (error, stdout, stderr) {
        if(error) {
            console.error('error:\n' + error);
            return;
        }
        console.log('stdout:\n' + stdout);
        console.log('stderr:\n' + stderr);
    });
})

这个脚本主要是来自gitlab-webhook-handler的README,我自己改了一下,加了日期输出。利用的是Node.js的child_process模块来执行shell脚本。上面的path: '/webhook-123456'你可以任意设置,由于没有设置secret_key验证,所以这里的webhook-123456就相当于是密码了,以让该路径不至于那么明显。端口用的是7777,你可以随意设置,总之不要过于明显。这样下来最终的监听地址就是http://0.0.0.0:7777/webhook-123456了,0.0.0.0表示该http服务监听本机的所有ip上收到的请求,说白了就是0.0.0.0可以换成服务器的ip或者指向服务器的所有域名。拿我自己的服务器作例子就是http://xxxlbox.com:7777/webhook-123456

然后,我们要运行这个脚本:

node gitlab-webhook.js

现在我们只要告诉GitLab,当有Push的时候,向http://xxxlbox.com:7777/webhook-123456发送一个POST请求。于是我们要设置一下GitLab。

配置GitLab Webhook

进入你的项目主页,在左边侧栏里选择“Settings”,然后选择“Integrations”,“URL”一栏里填入你的监听地址,“Secret Token”留空,“Trigger”选择“Push events”就行了。添加Webhook后,下边可以发送测试,可以测试脚本是否工作正常。

使用pm2管理Node.js进程

pm2是一个很好用的Node应用的进程管理器,具有守护进程,监控,日志等一整套完整的功能,用它可以非常方便地启动、重启Node应用,并且可以实现Node应用的开机启动。用npm安装pm2:

npm install pm2@latest -g

前面出于测试目的,我们直接运行了gitlab-webhook.js这个脚本,所以要先按Ctrl-C退出,然后用pm2来启动:pm2 start gitlab-webhook.js,使用pm2 startup命令来设置脚本开机启动。pm2的更多高级用法还请查看文档

这样一来,Hugo的自动部署就配置好了,不管是在本地写文章,还是使用Headless CMS,最终只要Commit提交并Push,你的网站就会自动更新,还是很(zhuāng)便()的。