迁移到 hugo 的理由
昨天在读博主黄湘云的文章 《ggplot2 食谱 》，顺带探索了一下整个网站，看看还有没有其他的我感兴趣的内容。他的博客主题风格简洁、清爽，我也有意将自己的网站往这类风格上修改，进一步探索便发现了 hugo 这个建站工具。 hugo 在 GitHub 上居然有 65.7k start， 看完 hugo 的介绍，是心动的感觉，于是便也打算上手折腾折腾。
参照 hugo 官网的 GETTING STARTED 操作一番，hugo 的基本使用流程搞懂了，也正是我想要的。
我觉得使用 hugo 有这些优点，让我决定弃用 wordpress：
- 基于 markdown 构建静态网站，原始文本文件可以使用 git 做版本管理，可以减少我备份和维护网站的时间。
- 主题丰富，有我想要的简洁风格的主题。
- 生成的是静态网站，加载速度快，减少服务器的负担，原来运行 wordpress 需要的 php、MySQL 等相关程序都可以卸载了。
- 借助 GitHub Action，可以做到自动化构建和部署。
- 可以支持 rss 订阅、评论，满足我的刚需。
迁移步骤
-
安装 hugo
本地是Windows系统，参照 Install Hugo on Window 下载 hugo 二进制文件，添加到环境变量PATH就安装好了，很简单。
-
选择主题
主题选择耗费了一点时间，对比考虑了下面这几款主题。
最后选择了 Hugo PaperMod 。
-
配置站点
-
自动化部署设置
-
构建
指定构建分支
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
name: Deploy Hugo site to vps
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Default to bash
defaults:
run:
shell: bash
|
增加构建配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
jobs:
build:
runs-on: ubuntu-latest
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- name: Checkout
uses: actions/checkout@v3
with:
submodules: recursive
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
- name: Build
run: hugo --minify
|
-
部署到vps
部署工具采用rsync，将编译生成的 public 直接同步到vps。
ssh 密钥、用户名、服务器ip、部署路径都通过配置GitHub 仓库的secrets来传递，示例分别对应 secrets.BLOG_DEPLOY_KEY secrets.RSYNC_USERNAME secrets.RSYNC_HOSTNAME secrets.BLOG_DEPLOY_PATH。
1
2
3
4
5
6
7
8
9
10
11
|
- name: Setup ssh keys
uses: webfactory/ssh-agent@v0.7.0
with:
ssh-private-key: |
${{ secrets.BLOG_DEPLOY_KEY }}
- name: Scan public keys
run: |
ssh-keyscan ${{secrets.RSYNC_HOSTNAME}} >> ~/.ssh/known_hosts
- name: Deploy to VPS
run: |
rsync -av --delete public/* ${{secrets.RSYNC_USERNAME}}@${{secrets.RSYNC_HOSTNAME}}:${{ secrets.BLOG_DEPLOY_PATH }} --rsync-path="sudo rsync" --owner --group --chown=www:www
|
-
坑
使用rsync部署的时候，刚开始采用配置 rsync daemon 的方式同步文件，尝试了很久，但一直身份验证失败，最终放弃。后面尝试使用ssh协议同步文件，验证ok，但也有两个问题需要解决：
普通用户登录服务器，对部署网站的目标路径没有文件写入权限，rsync 同步时增加 –rsync-path=“sudo rsync” 参数。
文件上传成功之后，所有者不是 www 用户的，解决办法是在 rsync 同步时增加参数 –owner –group –chown=www:www，指定用户和用户组为www。
完整 github action 构建和部署脚本如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
name: Deploy Hugo site to vps
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Default to bash
defaults:
run:
shell: bash
## A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
build:
runs-on: ubuntu-latest
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- name: Checkout
uses: actions/checkout@v3
with:
submodules: recursive
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
- name: Build
run: hugo --minify
- name: Setup ssh keys
uses: webfactory/ssh-agent@v0.7.0
with:
ssh-private-key: |
${{ secrets.BLOG_DEPLOY_KEY }}
- name: Scan public keys
run: |
ssh-keyscan ${{secrets.RSYNC_HOSTNAME}} >> ~/.ssh/known_hosts
- name: Deploy to VPS
run: |
rsync -av --delete public/* ${{secrets.RSYNC_USERNAME}}@${{secrets.RSYNC_HOSTNAME}}:${{ secrets.BLOG_DEPLOY_PATH }} --rsync-path="sudo rsync" --owner --group --chown=www:www
|
-
迁移wordpress 文章
安装插件 jekyll-exporter, 可以导出所有文章、页面、以及上传的图片，导出的文章都是 markdown格式，复制到 hugo 的站点目录，稍微修改一下路径和标签就可以了，不太麻烦。
-
配置 Utterances 评论系统
点击 https://github.com/apps/utterances 安装 utterances，在安装的时候选择 Only select repositories，选择存储网站源文件的仓库，也可以选择新建其他仓库。
编辑 config.yml 文件，打开评论功能
1
2
|
params:
comments: true
|
在网站根目录下创建layouts/partials/comments.html，添加以下内容：
1
2
3
4
5
6
7
8
9
10
11
|
{{- /* Comments area start */ -}}
{{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}}
<script src="https://utteranc.es/client.js"
repo="hacperme/hacperme_blog"
issue-term="pathname"
label="comment"
theme="github-light"
crossorigin="anonymous"
async>
</script>
{{- /* Comments area end */ -}}
|
参考文档