环境配置

博主本人目前使用的系统为Window11，如希望使用Hugo，需要先下载对应的编译器

编译器地址：Release v0.111.1 · gohugoio/hugo (github.com)

下载完后需要配置环境路径，可以参考这里：教你四步配置Hugo环境_hugo配置环境

完成上述配置后，可以在CMD中输入以下命令验证是否配置成功

hugo version

创建网站

创建一个新的站点，这里我命名为Blog,Hugo默认配置文件后缀为toml,这里PaperMod设置了参数，使用yml方案。

hugo new site Blog -f yml

主题配置

Hugo社区主题较为丰富，这里我选择了PaperMod主题，也是本博客所使用的主题。

参考他们主题安装方案地址：Installation · adityatelange/hugo-PaperMod Wiki (github.com)

这里选择第二种安装方案，使用submodule来安装，便于后续主题更新。

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)

之后在config.yml中修改字段theme:PaperMod即可。

Hugo主题一般会提供范例配置文件，PaperMod的范例文件参考：hugo-PaperMod/config.yml at exampleSite · adityatelange/hugo-PaperMod (github.com)

直接将它复制到你的config.yml即可。

绑定域名

如需绑定自己的域名，将config.yml中的baseURL修改为自己的域名，例如https://blog.jk2077.com/,路径最后的/注意不要忽略。

之后Github Page中添加自定义域名，域名商添加CNAME解析即可。

生成文章

输入命令如下

hugo new posts/first-post.md

第一篇文章便生成了，文章位于目录posts之下。

本地调试

如果希望本地预览，可以输入命令

hugo server

Hugo的优势在于实时渲染，这点比Hexo要好得多。

运行服务之后，你可以输入http:localhost:1313 访问。

自动发布

你可以在站点目录下直接输入hugo命令来编译，其静态网页文件会生成于public/目录之下，你可以将它上传到Github仓库，这样就算挂载成功。

Action方案

不过Hugo给出了更佳的方案，通过Github Action来自动编译生成我们的站点，以下是实现方案大致思路：

  1. 创建两个仓库，一个存放源文件，一个存放编译后文件，当然如果你不介意公开源文件，也可以把他们存放在不同分支。
  2. 源代码上传到私人仓库，通过Action自动编译，渲染出静态文件推送到博客仓库

想要实现上述方案，需要在仓库目录.github/workflows下添加配置文件gh-page.yml，注意，这里如果文件都不存在则需注意创建。

在gh-page.yml内填入

name: deploy

on:
    push:
    workflow_dispatch:


jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v2
              with:
                  submodules: true
                  fetch-depth: 0

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "latest"

            - name: Build Web
              run: hugo

            - name: Deploy Web
              uses: peaceiris/actions-gh-pages@v3
              with:
                  PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
                  EXTERNAL_REPOSITORY: your_githubname.github.io 
                  PUBLISH_BRANCH: master
                  PUBLISH_DIR: ./public
                  commit_message: ${{ github.event.head_commit.message }}

上述Action配置，需要修改EXTERNAL_REPOSITORY字段，并设置对应的PERSONAL_TOKEN.

这里需要参考 Hugo + GitHub Action，搭建你的博客自动发布系统 · Pseudoyu

之后每次push,Github都会自动为我们编译后的网站。

Vercel，Cf-Page，Netlify方案

Vercel、Cloudflare、Netlify提供了更为简洁的部署方案，只要你绑定原项目仓库，它们会帮你自动判定这是一个Hugo站点。

具体可以参考这里：Hugo框架中文文档 在Netlify上托管和部署Hugo站点 - Andbible

由于Vercel、Netlify默认Hugo配置版本较低，建议环境变量中添加类似字段：HUGO_VERSION = “0.110.0”

总结一下

本篇博文简单介绍了如何部署一个Hugo站点，并给出了自动化部署方案。

但在如何管理、创建本地博文方面上，还存在更优方案，我将在之后的博文中介绍。