Hugo 部署的几种方式

2022-03-08

8 minute read

hugo , nginx , github

最近尝试了在服务器上安装 Hugo，并且几经努力终于成功地用 Nginx 完成了最终部署，也把之前买的域名利用起来了。之后考虑把另外一个博客也搬到服务器上，利用 webhook 完成自动部署。如果成功地话又可以水一篇，现在来看看 Hugo 常用的几种部署方式。

使用托管服务

所谓托管服务就是类似 Github Page、Cloudflare Page、Netlify 等，这里主要说一下 Github 的部署方式。

使用 Github 部署也有两种方式，一种是上传已经构建好的静态文件，另一种需要配合 Github Action 使用。

上传静态文件方式

直接上传静态文件到 Github 仓库的方式会比较简单。

使用 hugo -D 命令，在本地构建好静态文件。
将 public 文件夹下全部文件上传至仓库。
为该仓库设置 Github Page 即可。

此后每次更新只要构建静态文件，上传至仓库就完成了，这一步可以写一个脚本完成。

以上方式可参考上一篇Hugo 安装与部署

使用 Github Action 方式 ① ¹

用这个方法在最初设置的时候会有些麻烦，但是可以让整个站点得到较好的版本管理，同时也可以实现在线写博客。

使用这个方法需要建立两个仓库，一个仓库存放站点原始文件，另一个仓库存放构建好的静态文件。为了表述方便，下面将存放站点的仓库称为 Site，存放静态文件的仓库称为 Page。

上传新建好的站点至 Site 仓库，这里不需要上传 public 文件夹，将其删除即可。
在 Site 仓库找到 Action 选项卡，新建一个 workflow ²，名字随意。内容如下：

 1name: GitHub Pages
 2
 3on:
 4  push:
 5    branches:
 6      - main  # 根据 Site 仓库实际 Branch 名称而定
 7
 8jobs:
 9  deploy:
10    runs-on: ubuntu-20.04
11
12    steps:
13      - uses: actions/checkout@v2
14        with:
15          submodules: true  # 如果 Hugo theme 是用子模块形式安装的话，选择 true，不是的话请删除这两行
16          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
17
18      - name: Setup Hugo
19        uses: peaceiris/actions-hugo@v2
20        with:
21          hugo-version: '0.91.2' # 可选 Hugo 最新版本，改为 latest 即可。如果主题样式格式为 .scss，下一行去掉注释
22          # extended: true
23
24      - name: Build
25        run: hugo --minify
26
27      - name: Deploy
28        uses: peaceiris/actions-gh-pages@v3
29        with:
30          external_repository: username/<仓库名称>  	# Page 仓库名称
31          personal_token: ${{ secrets.ACTION_ACCESS_TOKEN }}
32          publish_dir: ./public   # 可以删除
33          publish_branch: main  	# 根据 Page 仓库实际 Branch 名称而定

获取 personal access token，将 personal access token 添加到 Site 仓库的 Actions Secrets 中，名称为 ACTION_ACCESS_TOKEN

使用 Github Action 方式 ② ³

同样的需要建立两个仓库。

在 Site 仓库新建一个 workflow

 1name: build
 2
 3on:
 4  push:
 5    branches:
 6    - main  # 根据 Site 仓库实际 Branch 名称而定
 7
 8jobs:
 9  build:
10    runs-on: ubuntu-latest
11
12    steps:
13    - name: 'Building...'
14      uses: reuixiy/hugo-deploy@v1
15      env:
16        DEPLOY_REPO: username/<仓库名称>	# 填写 Page 仓库名称
17        DEPLOY_BRANCH: main	 # 根据 Page 仓库实际 Branch 名称而定
18        DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
19        # https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
20        TZ: Asia/Shanghai

生成一对 ssh key
将公钥存放于 Page 仓库的 deploy key 中，并开启写入权限，将私钥存放于 Site 仓库的 Actions Secrets 中，命名为 DEPLOY_KEY

使用 Nginx 代理

我这次在服务器上安装 Hugo 后，不想再整个站点上传到 Github 。一是网络状态并不好，经常掉线。二是 Github Action 部署也要等一段时间（这不是主要原因）。用 Nginx 代理是因为我想玩个新东西。

准备工作

你要有一台服务器
准备一个域名，并解析到本服务器
在服务器上安装 Hugo

安装 Nginx

我的服务器是 Debian 10 ，简单粗暴的方法

1apt-get install nginx -y

配置 Nginx

1cd ~
2cd /etc/nginx/conf.d # 打开配置文件所在目录
3nano site.conf # 新建配置文件

在配置文件中写入以下内容

 1server {
 2  listen 80;
 3  listen [::]:80;
 4
 5  server_name mysite.com www.mysite.com;
 6
 7  root /home/username/mysite/public/; # 静态文件存放的绝对路径
 8  index index.html; 
 9
10  location / {
11    try_files $uri $uri/ =404;
12  }
13}

这里有两点提示：

静态文件所在路径可以用 pwd 命令查看
这个配置是只用了 http 协议，并没有添加 ssl 证书

添加 SSL 证书

如果是用 Cloudflare 解析域名的话，直接在上面申请证书，复制证书及私钥到服务器即可。然后在 Nginx 配置文件中添加如下内容：

 1server {
 2  listen 443 ssl http2;
 3  listen [::]:443 ssl http2;
 4  server_name mysite.com www.mysite.com; # 绑定证书的域名
 5
 6  ssl_certificate /etc/ssl/mysite.crt; # 证书存放路径
 7  ssl_certificate_key /etc/ssl/mysite.key; # 私钥存放路径
 8  ssl_session_timeout 5s;
 9  ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
10  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
11  ssl_prefer_server_ciphers on;
12
13  location / {
14    root /home/username/mysite/public/; # 静态文件存放的绝对路径
15    index index.html; 
16  }
17}

修改 Nginx 主配置文件

打开主配置文件

1cd ~
2nano /etc/nginx/nginx.conf

将 user www www 修改为 user root

运行 Nginx

通过以下命令开启运行 Nginx

1systemctl start nginx
2systemctl enable nginx

总结

这篇笔记我写了3天，头都炸了。

上面提到两种自动部署的 Github Action，其中方式①可以将 Site 仓库设为私密仓库，方式②则不可以。

用 Nginx 代理的方式也可以实现线上写作，自动部署。简单来说就是只上传 content 文件夹，同时在服务器部署 webhook ，每次push到仓库后触发服务器自动拉取，并重新构建静态文件。如果我能部署成功，到时候再做个记录。