采用 Hugo(Extended) + Github Pages + Github Action 部署方案。

优雅的在 Windows 中安装 HUGO 环境:

现在可以使用 WinGet 包管理器来安装 HUGO 所需的基础环境,只需要在终端(PowerShell)中分别运行以下命令,等待片刻即可:

# 安装 Hugo Extended
winget install Hugo.Hugo.Extended

# 安装 Git
winget install -e --id Git.Git
  • 安装 Github Desktop 方便文件更改前后的对比,当然 VSCode 也可以做到这些。
# 安装 Github Desktop
winget install -e --id GitHub.GitHubDesktop

如果遇到问题,请确认您使用的 Windows 版本安装了 WinGet 包管理器。

如果没有安装 WinGet 包管理器,请立刻使用传统方法安装 HUGO 环境,不值得过多纠结。

为 HUGO 创建 Github Pages 仓库:

在 Github 中创建一个名为 <username>.github.io 的存储库。

如果遇到问题,请参考:创建 GitHub Pages 站点

初始化 HUGO 和运行 HUGO :

将 Github 新创建的存储库克隆到本地,并将项目文件夹打开中右键打开 终端(PowerShell) 运行初始化命令,等待初始化完成:

# HUGO 初始化命令
hugo new site ./ -f

# 安装主题 (以 PaperMod 为例)
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

使用 VSCode 打开站点配置文件 hugo.toml ,在配置文件中添加配置,并保存编辑:

theme = "PaperMod" #以 PaperMod 为例

启动 HUGO 开发服务预览站点,Ctrl+C 可以停止 HUGO 开发服务。

hugo server

如果遇到问题,请参考:HUGO 官方文档

配置 Github Action 持续化部署

在存储库根目录中,创建 .github/workflows/ 目录来存储工作流文件,并在 .github/workflows/ 目录中,创建一个 gh-page.yml 的文件并添加以下代码。

name: GitHub Pages Deploy

on:
  push:
    branches:
      - main  # Set a branch to deploy
  pull_request:

permissions: 
  contents: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: github.ref == 'refs/heads/main'
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

如果遇到问题,请参考:Create Your Workflow了解 GitHub Actions 文章

推送站点到 Github 存储库

完成以上工作后可以直接将本地存储库推送至 Github 存储库主分支 main 并等待 Github Action 自动部署,该过程会自动创建新的名为 gh-pages 的分支并将生成的静态文件存储在内。

最后通过 <username>.github.io 访问部署在 Github Page 的 HUGO 站点吧!