hugo 博客搭建指南

整体架构

在 github 托管两个仓库，仓库1 blog-content 保存博客内容源文件，仓库2 plyer.github.io 保存 Hugo 生成的网站文件，博客内容仓库通过 git submodule 的方式在网站仓库管理。

使用 Obsidian git 拉取 blog-content 仓库，在 ob 写完博客后进行 git push，推送后触发 blog-content 仓库的 github action，这个 action 又会触发 plyer.github.io 仓库的 github action，第二个 action 使用 hugo 构建网站并部署到 github pages。

创建 github 仓库

创建博客内容仓库 blog-content 和网站仓库 plyer.github.io。

网站仓库名称使用 {github_username}.github.io 的格式，这样可以直接通过 https://{github_username}.github.io 的 URL 访问博客网站，而不需要加上仓库名称作为 URL Path。

使用 hugo 创建网站

首先在本地 PC 中安装 hugo extend，使用 hugo new site blog 创建出网站内容。

进入 blog 目录初始化 plyer.github.io 仓库，运行以下命令：

1
2
3
4
git init
git remote add origin git@github.com:Plyer/plyer.github.io.git
git fetch
git checkout -b master origin/master

添加 meme 主题：

1
2
3
git submodule add --depth 1 git@github.com:reuixiy/hugo-theme-meme.git themes/meme
# 修改配置
rm config.toml && cp themes/meme/config-examples/zh-cn/config.toml config.toml

添加 blog-content：

1
2
3
4
5
6
7
git rm -f content
rm -rf content
git submodule add origin git@github.com:Plyer/blog-content.git content
# 初始化子模块
git submodule update --init --recursive
# 更新子模块仓库
git submodule update --remote

编写博客内容并预览：

1
2
3
4
hugo new post/test.md
vim post/test.md
# 启动本地服务预览
hugo server

使用 hugo 命令可以输出网站的静态文件到 public 目录，这个目录的内容就是部署静态网站的必要文件。

推送到 plyer.github.io 仓库：

1
2
3
git add .
git commit -m "init"
git push

配置 github workflow

一、配置 blog-content 仓库的 workflow

创建一个 github ak，包含 plyer.github.io 仓库的 workflow 权限。使用 gh workflow run build.yml -R plyer/plyer.github.io 触发 plyer.github.io 仓库的 build.yml workflw。

二、配置 plyer.github.io 仓库的 workflow

Checkout 本仓库和子模块
更新子模块内容
安装 hugo 并构建发布到 github pages

发布博客

Obsidian 中增加名为 blog 的文件夹，在其中拉取 blog-content 仓库，写一篇文章并推送到 github 仓库中，触发 github action 自动构建发布。

主题推荐

参考 https://jametry.github.io/page/2/