使用webhook实现博客网站自动化部署

2023-12-21 15:54:34

在使用hugo + nginx搭建好博客后，文章可以通过ftp上传到服务器，然后在服务器上再编译成网页，或者本地搭建的hugo环境，编译好网页再上传到服务器，这样做虽然也可以，但是很麻烦，如果每次都这么发布文章，肯定玩几次就不想弄了。

使用webhook就能实现自动部署，其实原理很简单。理想状态就是我把我的myblog项目托管到github，然后每次我写完文章直接push到github仓库，webhook监听到我的push，给我的服务器发送一个http请求，服务器收到请求后执行本地shell脚本，自动拉取最新的仓库代码，然后执行hugo编译成网页。这样就实现自动部署啦!

项目代码托管到github

在常用的本地机器上安装git，myblog 目录作为 git 仓库，push 到 github 进行备份。由于 public 目录下的静态网页完全可由其余文件自动生成，因此仓库可以排除 public 目录。

touch .gitignore && echo "/public" >> .gitignore
git add .
git commit -m "初次提交"
git branch -m main
git push -u origin main

服务器安装node

使用node可以很简单的启动一个web服务

选择node版本

node安装依次执行以下命令：

cd ~
wget https://nodejs.org/dist/v14.17.3/node-v14.17.3-linux-x64.tar.xz
tar -xvf node-v14.17.3-linux-x64.tar.xz
cd node-v14.17.3-linux-x64/bin
ln -s /root/node-v14.17.3-linux-x64/bin/node /usr/bin/
ln -s /root/node-v14.17.3-linux-x64/bin/npm /usr/bin/

我是centos系统，直接安装编译好的二进制文件了，之前试过自己编译，要等好久就放弃了

安装完后可以执行以下命令检查：

node -v
npm -v

正确输出版本号即可

npm安装成功后，再安装一下pm2，安装后管理进程十分好用

npm install pm2@latest -g
ln -s /root/node-v14.17.3-linux-x64/bin/pm2 /usr/bin/

执行命令查看是否安装成功

pm2 -v

配置脚本

新建一个目录webhook，脚本文件放在这里

编写shell脚本

cd ~
mkdir webhook
cd webhook
touch hugo-deploy.sh
vi hugo-deloy.sh

按i进入编辑模式，我的脚本如下（我的仓库就是myblog，然后hugo生成的静态文件就在~/myblog/public下，也是我的网站根目录。如果网站根目录不在这里，hugo也可以指定生成的目录，使用hugo -d /dir）

#!/bin/bash

cd ~/myblog
git pull origin main
hugo 
echo "deploy success!"
exit 0

按下Esc键，并输入:wq保存退出文件。

给文件添加可执行权限

chmod +x hugo-deploy.sh

Github配置SSH Key

GitHub配置SSH Key的目的是为了帮助我们在通过git拉取代码时，不需要繁琐的验证用户名密码，如果需要验证，我们的自动脚本就挂了。

首先检查是否存在sshkey

cd ~/.ssh
ls
# 或者
ll
# 看是否存在 id_rsa 和 id_rsa.pub文件，如果存在，说明已经有SSH Key

如果没有则执行如下命令，然后回车到底

ssh-keygen

最后获取sshkey填入github配置中（点击右上角头像，settings，找到ssh点进去取个名字复制下即可。）

cat ~/.ssh/id_rsa.pub

最后检查下服务器仓库的.git文件夹config文件是否是ssh提交，如果不是可以改掉

cat ~/.git/config

输出

[core]
	repositoryformatversion = 0
	filemode = true
	bare = false
	logallrefupdates = true
[remote "origin"]
	url = https://github.com/K1ngram4/myblog.git
	fetch = +refs/heads/*:refs/remotes/origin/*

这里url改为git@github.com:K1ngram4/myblog.git这个地址可以到仓库下载代码的地方选择ssh复制。

最后执行命令查看是否链接成功

ssh -T git@github.com

编写js脚本

先安装一个第三方插件github-webhook-handler

npm install github-webhook-handler --save

然后在webhook目录下创建一个github-webhook.js文件，写入以下内容，就是监听github的webhook请求

var http = require('http')
var createHandler = require('github-webhook-handler')
var exec = require('child_process').exec
var handler = createHandler({ path: '/webhook', secret: 'mysecret' })

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

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

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

handler.on('push', function (event) {
  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);
    });
})

记住这个地址http://kingram.top:7777/webhook这就是webhook要发送过来的地址，下一步需要用到。

启动脚本

node github-webhook.js

这样启动可以用来调试，如果调试没问题后，这样启动

pm2 start github-webhook.js
pm2 startup

github配置webhook

打开托管仓库github.com/K1ngram4/myblog点击右上角Settings按钮，选择Webhooks，点击右上角Add wehook

Payload URL 填服务器端创建好的http://kingram.top:7777/webhook

Content type选择application/json

Secret填入mysecret

到此，所有配置就结束了，可以在本机上push到仓库，服务器就会自动编译网站了。(#^.#)

码农公寓