基于Github Webhooks 部署 Hugo

Webhooks 概念

单来说,WebHook 是一种 HTTP 回调。某些条件下触发的 HTTP POST 请求;通过 HTTP POST 发送的简单事件通知。

方案

Github 管理 Hugo 应用仓库,本地修改提交通过 Webhooks 触发服务端拉取最新更新,部署 Hugo 应用。

基础结构

架构图如下:

Hugo + Github + Nginx + Webhooks.png

部署前准备:

  1. 需要服务端安装好 nginx,hugo,git
  2. webhook 服务端(go 应用,这里我们使用 adnanh/webhook)

adnanh/webhook 配置

举个栗子🌰

hooks.json

1
2
3
4
5
6
7
[
  {
    "id": "hugo-redeploy-webhook",
    "execute-command": "/var/scripts/redeploy.sh",
    "command-working-directory": "/data/mangobeta-com-hugo"
  }
]

redeploy.sh

1
2
3
4
5
6
7
#! /bin/bash

cd /data/mangobeta-com-hugo
# 拉取代码
git pull
# 生成静态文件
hugo -D

启动 webhooks

1
nohup ./webhook -hooks hooks.json -verbose >output 2>&1 &

Nginx 配置

mangbeta-hugo.conf

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
server {
    listen       80;
    server_name  mangobeta.com;
    root         /data/mangobeta-com-hugo/public;

    location / {

    }

    error_page 404 /404.html;
    location = /404.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

Github 配置

选择要做 webhook 的仓库,点击设置,新增 Webhooks,由于我们只需要监听push事件,选择Just the push event.即可

配置示例: 这里仅做测试,没有设置密码,大家在实际使用中,建议使用https 或者设置密码。

github-webhooks-conf.png

现在只有push commit,hugo 就会自动构建了,方便好用😁。

参考

updatedupdated2020-10-182020-10-18
Load Comments?