Featured image of post 从零到一，用 Hugo 打造你的个人网站
Build Code

从零到一，用 Hugo 打造你的个人网站

一起来用世界上最快的网站构建框架搭建个人博客站点吧！

本文将介绍在本地搭建 Hugo 并通过 Github Pages 和 Vercel 部署 Hugo 的方法。以下所叙之方法就是我在部署本站点时所使用的，具有借鉴意义。如果在部署过程中遇到报错或其他困难，可以上网搜索或在评论区留言——我看到后会提供力所能及的建议。

在部署 Hugo 之前，需要进行的准备：

  1. 安装 Git. Git 用于版本控制和代码管理。Linux 和 MacOS 系统中内置 Git ，而 Windows 用户需要手动安装。下载地址: https://git-scm.com/ 。安装过程中不需要选择任何多余选项，一直点下一步即可。
  2. 拥有一个 Github 账号，用于托管代码文件。注册地址: https://github.com/login
  3. 拥有一个称手的文本编辑器：推荐使用 Visual Studio Code、Sublime Text 或者你喜欢的编辑器。
  4. 网络环境良好。为了避免下载文件或上传文件至 Github 过程中出现错误，建议科学上网。

如果你做好了如下准备，那么恭喜你，你可以进行下一步啦！

下载并安装 Hugo

在 Hugo 的 Release 页面找到最新版本的 Hugo ，选择相应版本下载。 下载 此外，还可以通过 Hugo 官网上的指示下载。

创建站点

将下载后的内容放在一个空文件夹中。在当前文件夹上方地址栏输入 cmd ，唤起命令行。在命令行中输入 hugo new site 你的站点名称 ，创建站点。 创建站点 创建站点

输入 cd 你的站点名称 切换目录，并将 hugo.exe 复制到这个文件夹中，以避免配置环境变量。 #

用命令行在当前目录下输入 hugo server 启动本地站点(通过 Ctrl + C 关闭这一服务)。地址通常是 localhost:1313 。如果页面显示“Page not found”，说明此前的所有配置都是正常无误的。

配置主题

Hugo 默认是没有主题的，需要到 官网 去下载主题。我使用的主题是 Jimmy Cai 创作的 Stack 主题。接下来的部分内容会以此主题为例。

将主题下载完成后并解压至 themes 文件夹中，将 exampleSite 文件夹中的 content 和hugo.yaml 复制到主文件夹中，并删掉原来的 hugo.toml 和 Content/post/rich-content ，避免出现不兼容的错误。（图片上的的“春树暮云”是本博客名） 配置主题1 配置主题2

修改 hugo.yaml 中的 theme 选项，将其修改为与主题文件夹同名。 修改hugo.yaml

再次在命令行输入 hugo server启动服务，若此时能看见类似下图的样式，说明此前操作无误。 # #

在 config.yaml 中输入相关配置。文件各项配置解释如下，用作参考：

  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
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251

baseurl: https://example.com  # 网站的基本 URL 。替换为你自己的网站域名。
languageCode: en-us  # 网站的默认语言代码，zh-cn 指中文简体。
theme: hugo-theme-stack  # 使用的 Hugo 主题，这里是 Stack 主题。
paginate: 3  # 每页显示的内容数量，通常用于分页设置。
title: Example Site  # 网站的标题，会显示在浏览器标签上。
copyright: Example Person  # 网站的版权信息，通常显示在页面底部。

# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: en  # 设置网站的默认内容语言。可选值见上注释。

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: false  # 如果默认语言是中文、日文或韩文，设置为 true 以确保摘要和字数统计正确。

languages:
    en:
        languageName: English  # 英语语言配置
        title: Example Site  # 英文站点标题
        weight: 1  # 语言权重，数值越小排序越靠前
        params:
            description: Example description  # 英文站点描述
    zh-cn:
        languageName: 中文  # 中文语言配置
        title: 演示站点  # 中文站点标题
        weight: 2  # 中文站点语言权重
        params:
            description: 演示说明  # 中文站点描述
    ar:
        languageName: عربي  # 阿拉伯语配置
        languagedirection: rtl  # 文字方向，从右到左
        title: موقع تجريبي  # 阿拉伯语站点标题
        weight: 3  # 阿拉伯语站点语言权重
        params:
            description: وصف تجريبي  # 阿拉伯语站点描述

services:
    # Change it to your Disqus shortname before using
    disqus:
        shortname: "hugo-theme-stack"  # Disqus 评论系统的短名称，需替换为你自己的 Disqus 短名称。
    # GA Tracking ID
    googleAnalytics:
        id:  # Google Analytics 追踪 ID，用于网站流量统计。

permalinks:
    post: /p/:slug/  # 博客文章的永久链接格式，使用文章的 slug 作为路径。
    page: /:slug/  # 页面内容的永久链接格式。

params:
    mainSections:
        - post  # 主内容区域，显示文章内容。
    featuredImageField: image  # 特色图片字段的名称。
    rssFullContent: true  # RSS 提要是否包含全文内容。
    favicon: # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)
        # 网站的favicon路径，例如`/favicon.ico`。

    footer:
        since: 2020  # 网站创建年份，通常显示在页脚。
        customText:  # 自定义页脚文本。

    dateFormat:
        published: Jan 02, 2006  # 发布日期格式。
        lastUpdated: Jan 02, 2006 15:04 MST  # 最后更新日期格式。

    sidebar:
        emoji: 🍥  # 侧边栏标题旁显示的 emoji。
        subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.  # 侧边栏的副标题。
        avatar:
            enabled: true  # 是否启用头像显示。
            local: true  # 是否使用本地头像。
            src: img/avatar.png  # 头像图片路径。

    article:
        math: false  # 是否支持数学公式渲染。
        toc: true  # 是否显示文章目录。
        readingTime: true  # 是否显示预计阅读时间。
        license:
            enabled: true  # 是否启用文章版权信息。
            default: Licensed under CC BY-NC-SA 4.0  # 默认版权协议。

    comments:
        enabled: true  # 是否启用评论功能。
        provider: disqus  # 选择的评论提供商，默认为 Disqus。

        disqusjs:
            shortname:  # DisqusJS 的短名称。
            apiUrl:  # DisqusJS 的 API URL。
            apiKey:  # DisqusJS 的 API Key。
            admin:  # DisqusJS 的管理员用户名。
            adminLabel:  # DisqusJS 管理员标签。

        utterances:
            repo:  # Utterances 评论系统的 GitHub 仓库地址。
            issueTerm: pathname  # Utterances 评论系统的议题关联方式，使用页面路径。
            label:  # Utterances 评论系统的标签。

        beaudar:
            repo:  # Beaudar 评论系统的 GitHub 仓库地址。
            issueTerm: pathname  # Beaudar 评论系统的议题关联方式。
            label:  # Beaudar 评论系统的标签。
            theme:  # Beaudar 评论系统的主题。

        remark42:
            host:  # Remark42 的主机地址。
            site:  # Remark42 的站点标识符。
            locale:  # Remark42 的语言设置。

        vssue:
            platform:  # Vssue 使用的平台（例如 GitHub）。
            owner:  # Vssue 评论仓库的所有者。
            repo:  # Vssue 评论的 GitHub 仓库地址。
            clientId:  # Vssue 的 OAuth 应用 Client ID。
            clientSecret:  # Vssue 的 OAuth 应用 Client Secret。
            autoCreateIssue: false  # 是否自动创建评论议题。

        waline:
            serverURL:  # Waline 评论系统的服务器 URL。
            lang:  # Waline 的语言设置。
            pageview:  # 是否启用页面浏览统计。
            emoji:  # Waline 的 Emoji 表情包地址。
                - https://unpkg.com/@waline/emojis@1.0.1/weibo
            requiredMeta:
                - name  # 评论时需要填写的字段，用户名。
                - email  # 评论时需要填写的字段，电子邮件地址。
                - url  # 评论时需要填写的字段，网址。
            locale:
                admin: Admin  # Waline 评论系统的管理员名称。
                placeholder:  # Waline 评论框的占位符文本。

        twikoo:
            envId:  # Twikoo 评论系统的环境 ID。
            region:  # Twikoo 评论系统的部署区域。
            path:  # Twikoo 评论系统的路径。
            lang:  # Twikoo 评论系统的语言设置。

        cactus:
            defaultHomeserverUrl: "https://matrix.cactus.chat:8448"  # Cactus.Chat 的默认主服务器 URL。
            serverName: "cactus.chat"  # Cactus.Chat 的服务器名称。
            siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)
            # Cactus.Chat 的站点名称，需与注册的标识符匹配。

        giscus:
            repo:  # Giscus 评论系统的 GitHub 仓库地址。
            repoID:  # Giscus 仓库的唯一标识符。
            category:  # Giscus 的分类名称。
            categoryID:  # Giscus 分类的唯一标识符。
            mapping:  # Giscus 的议题关联方式。
            lightTheme:  # Giscus 的浅色主题设置。
            darkTheme:  # Giscus 的深色主题设置。
            reactionsEnabled: 1  # 是否启用 Giscus 的反应功能。
            emitMetadata: 0  # 是否启用 Giscus 的元数据发射功能。

        gitalk:
            owner:  # Gitalk 评论系统的仓库所有者。
            admin:  # Gitalk 评论系统的管理员用户名。
            repo:  # Gitalk 评论的 GitHub 仓库地址。
            clientID:  # Gitalk 的 OAuth 应用 Client ID。
            clientSecret:  # Gitalk 的 OAuth 应用 Client Secret。

        cusdis:
            host:  # Cusdis 评论系统的主机地址。
            id:  # Cusdis 的站点标识符。
    widgets:
        homepage:
            - type: search  # 首页的小部件，搜索功能。
            - type: archives  # 首页的小部件，文章归档。
              params:
                  limit: 5  # 显示的归档文章数量。
            - type: categories  # 首页的小部件，文章分类。
              params:
                  limit: 10  # 显示的分类数量。
            - type: tag-cloud  # 首页的小部件，标签云。
              params:
                  limit: 10  # 显示的标签数量。
        page:
            - type: toc  # 页面的小部件，显示文章目录。

    opengraph:
        twitter:
            # Your Twitter username
            site:  # 你的 Twitter 用户名，将在 OpenGraph 元数据中使用。
            # Available values: summary, summary_large_image
            card: summary_large_image  # Twitter 卡片类型。可以选择 `summary` 或 `summary_large_image`，后者显示大图。

    defaultImage:
        opengraph:
            enabled: false  # 是否为没有特色图片的页面启用默认 OpenGraph 图片。
            local: false  # 是否使用本地图片作为 OpenGraph 图片。
            src:  # 默认 OpenGraph 图片的路径。

    colorScheme:
        # Display toggle
        toggle: true  # 是否在页面上显示颜色模式切换按钮。

        # Available values: auto, light, dark
        default: auto  # 默认的颜色模式。可以选择自动切换（auto），或固定为亮色（light）或暗色（dark）。

    imageProcessing:
        cover:
            enabled: true  # 是否为封面图片启用自动处理功能，例如裁剪、缩放等。
        content:
            enabled: true  # 是否为内容图片启用自动处理功能。

### Custom menu
### See https://stack.jimmycai.com/config/menu
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
    main: []  # 自定义主菜单的配置，可以在这里添加导航链接。

    social:
        - identifier: github  # 社交链接的标识符，通常用于指定图标。
          name: GitHub  # 链接的显示名称。
          url: https://github.com/CaiJimmy/hugo-theme-stack  # GitHub 个人主页的链接。
          params:
              icon: brand-github  # 使用的社交图标，这里是 GitHub 图标。

        - identifier: twitter  # 另一个社交链接配置，这里是 Twitter。
          name: Twitter  # Twitter 链接的显示名称。
          url: https://twitter.com  # Twitter 的链接。
          params:
              icon: brand-twitter  # 使用的社交图标，这里是 Twitter 图标。

related:
    includeNewer: true  # 是否在相关文章中包含较新的文章。
    threshold: 60  # 相关文章匹配的相似度阈值，范围是0到100。
    toLower: false  # 是否将标签和分类转换为小写。
    indices:
        - name: tags  # 使用标签作为相关文章的匹配依据。
          weight: 100  # 标签匹配的权重值。
        - name: categories  # 使用分类作为相关文章的匹配依据。
          weight: 200  # 分类匹配的权重值。

markup:
    goldmark:
        renderer:
            ## Set to true if you have HTML content inside Markdown
            unsafe: true  # 如果 Markdown 中包含 HTML 内容，设置为 true 以允许渲染这些 HTML。

    tableOfContents:
        endLevel: 4  # 目录生成时的最大标题级别。
        ordered: true  # 目录项是否使用有序列表。
        startLevel: 2  # 目录生成时的起始标题级别。

    highlight:
        noClasses: false  # 语法高亮时是否禁用 CSS 类名。
        codeFences: true  # 是否启用代码块语法高亮。
        guessSyntax: true  # 是否自动猜测代码块的语言进行语法高亮。
        lineNoStart: 1  # 代码行号的起始值。
        lineNos: true  # 是否在代码块中显示行号。
        lineNumbersInTable: true  # 是否在表格样式中显示行号。
        tabWidth: 4  # 代码块中 Tab 的宽度（空格数）。

更多相关配置参见官网，例如网站字体配置、自定义页眉或页脚等。

撰写文章

在 你的站点名称/content/post 文件夹下新建文件夹，在新建文件夹中创建 index.md 文件，就代表创建一篇新文章了。

可以在 你的站点名称 页面打开并通过命令行创建新文章，命令如下： hugo new content post/新文章标题/index.md #

之后通过 VS Code 或其他编辑器，用 markdown 语言写文章。

在使用 hugo 命令生成的文章的最上面，都有一块被 +++ 或 --- 包裹出来的区域，它的官方名称是 “Front matter”， 用以指定文章的各项属性。下面是我在 stack 主题的一篇示例文章中摘取的 Front Matter 片段，并写出了注释：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

+++
author = "Hugo Authors"  # 作者名称，用于标识文章的创作者。
title = "Markdown Syntax Guide"  # 文章标题，将显示在页面和导航中。
date = "2019-03-11"  # 文章的发布日期，用于排序和展示。
description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."  # 文章的简短描述，通常用于摘要或 SEO。
tags = [
    "markdown",  # 文章的标签，用于分类和搜索。标签是灵活的，可以添加多个。
    "css",
    "html",
    "themes",
]
categories = [
    "themes",  # 文章的类别，用于组织和过滤内容。每篇文章可以属于一个或多个类别。
    "syntax",
]
series = ["Themes Guide"]  # 文章系列，通常用于将相关文章组织在一起，例如教程或主题指南系列。
aliases = ["migrate-from-jekyl"]  # 别名，用于创建文章的旧路径重定向到新路径。例如，当迁移文章时使用。
image = "pawel-czerwinski-8uZPynIu-rQ-unsplash.jpg"  # 文章的封面图片路径，用于展示文章时的视觉效果。
+++

Hugo 自带一个自动生成的 Front Matter 模板，但实际上，Hugo 支持的 Front Matter 字段远比默认模板提供的要丰富。以下是一些常用字段及其作用，你可以根据需要模仿原模板进行编写，或者编辑 archetypes 文件夹下的 default.md 文件，以自定义新的 Front Matter 模板。使用 hugo new 命令创建新文章时，Hugo 会根据 archetypes 目录下的模板自动生成 Front Matter。

常用 Front Matter 字段说明

  • title ：文章标题。自动生成的标题与文件名保持一致。
  • date：文章创建日期。默认生成的日期为文件创建时的日期。
  • lastmod：文章最后更新日期。
  • description：文章简要描述，用于摘要或 SEO 优化。
  • categories：文章分类。
  • tags：文章标签。
  • image：封面图片。
  • draft：是否为草稿。如果设置为 true，Hugo 将不会编译该文件，文章也不会在页面中显示。
  • hidden：是否隐藏文章。与 draft 的区别在于，设置为 true 的文章仍然存在，只是不会在页面中显示，但可以通过正确的网址访问。

当然，并不是所有 Front Matter 属性在文章中都要出现。只要保证文章具有默认的属性，文章通常是不会出现 bugs 的。

撰写页面、编辑 categories 和 tags 的方法与之基本相似，这里就不赘述了。

部署博客

在博客内容撰写完毕以后，进入部署环节。

同样的，Hugo 官方也提供了 部署 的相关教程。对于体积极小的静态页面来说，我不太认同单独将它配置在云服务器上。我推荐部署在 Vercel, Cloudflare Pages, Github Pages, Gitlab Pages, Netlify 等平台上。由于篇幅所限，我只写出部署至 Github Pages 并部署到 Vercel 的方法。

我在部署之前，曾经在互联网上查找过部署在各大平台上的 Hugo 博客，并通过测速网站进行速度测试。对各个主题之间的差异忽略不计，结果如下：

部署平台 中国最快/最慢时间 海外最快/最慢时间 中国/海外平均时间
Github Pages 内蒙古联通 0.304s / 湖北武汉电信 10.136s 德国法兰克福 0.018s / 南非 2.978s 1.829s / 0.541s
Vercel 中国台湾 0.355s (大陆地区是浙江杭州移动 0.140s) / 黑龙江哈尔滨电信 3.088s 美国阿什本 0.050s / 美国洛杉矶② 1.602s 0.865s / 0.526s
Cloudflare Pages 中国台湾 0.147s (大陆地区是上海移动 0.436s)/贵州贵阳移动 11.199s 美国阿什本 0.109s / 新加坡 2.133s 1.400s / 0.429s
我的网站(Vercel + Github Pages) 中国香港 0.054s (大陆地区是江苏苏州移动 0.196s)/ 福建厦门电信 7.119s 德国法兰克福 0.038s / 加拿大多伦多 0.732s 0.789s / 0.436s

因此，我推荐通过部署在 Github Pages 上，再通过 Vercel 的将 源文件部署，并绑定域名的方式。

至于为什么是 Github Pages 而不是随便建一个 Github 仓库，因为包括官网在内的网上的大多数方法都基于 Github Pages 的。

注意，如果要部署到 Vercel 上，一定要有一个自有域名。否则你必须每次都开全局代理访问你的博客

但是 Github Pages 禁止百度抓取网页，对 SEO 不友好。所以建议再将 Github 仓库部署至 Vercel.

部署至 Github Pages

新建一个 Github 仓库，仓库名为 你的名字.github.io，权限设置为 public.

前往 Setting/Pages/Branch 选择 main 分支，并保存。

在本地的博客文件夹中执行 hugo 命令，会生成 Public 文件夹。这是将要上传至 Github 仓库的文件夹，包含这个博客的全部静态资源。 #

接着输入以下命令，用于推送仓库至 Github Pages 上（若第一次上传，建议先提前输入账号密码，避免之后被绕得焦头烂额，方法见下下）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

cd  public/ # 进入 public 文件夹

git init # 初始化当前文件夹（此处就是 public 文件夹）为一个本地 git 仓库

git remote add origin git@github.com:username/username.github.io
# 关联远程仓库。
# 远程仓库地址（git@github.com:username/username.github.io）
# 也可以进入 Github 仓库-> Code -> SSH 复制远程仓库地址

git add . # 将当前文件夹的所有文件加入到暂存区

git commit -m "My first commit" # 把相关文件提交到本地仓库

git push origin main # 把相关文件推送到远程仓库的 main 分支

第一次 push 代码之前需要进行如下配置，之后 Git 会主动请求关联 Github 账户。

1
2

git config --global user.name "你的 Github 用户名"
git config --global user.email "你注册 Github 的邮箱"

我建议在推送仓库的时候打开全局代理，不然 Github 时不时掉一下线，非常烦人！

还有一种替代 SSH 的方法，即下载 Github Desktop，在客户端中进行代码的上传。

Push 文件时经常会遇到报错，我建议仔细报错信息，看看是因为什么原因导致报错的，如果不清楚，可以问问 ChatGPT. 我曾经经历过的报错，大多都是找 GPT 帮忙，它会耐心地指出我的错误，并详细地告诉我解决方法。

上传成功并等待部署完成后，可以访问 https://{username}.github.io/ 检查无误后即可进行下一步操作。

部署至 Vercel 并绑定域名

你需要拥有一个自己的域名才能部署至 Vercel. Vercel 分配的子域名在大陆无法访问。

进入 Vercel 官网并登录，建议通过 Github 登录，以更方便地关联 Github 仓库。

点击 “Add New” 再点击 “Project” 。在 “Import Git Repository” 中找到你上传到 Github 上的仓库。点击 “Import”. “Configure Project” 中的所有选项保持默认，点击 “Deploy”.等待大约十秒钟之后部署完成，会出现一个满屏彩带的页面。

Just like this: 欢迎页面

之后直奔主题，点击右侧的 “Add Domain”.进入 “Domain” 页面。 # 在搜索框内输入域名，选择合适的选项，并点击 “Add” ，按照要求添加 DNS 记录，等待 Vercel 验证通过并自动配置完 SSL 证书后即可访问。

这里有个通常容易忽略的点，即在 Vercel 上部署的项目是强制 https 的，如果在 Cloudflare 或其他平台再次设置了强制 https，访问时会导致重定向次数过多，报出"ERR_TOO_MANY_REDIRECTS" 错误。我的解决方法是关闭 Cloudflare 上的相关配置，如果子域名需要强制 https，可以通过 .htaccess 文件实现。

(可选) Github Action 自动部署

如果没有进行自动部署，博客也能正常访问，但是我们每次更新博客时，都需要在已经搭建好环境的电脑上进行、都要手动进行 Hugo 编译，再推送 Public 文件夹到 Github 仓库。如果想让整个写作+发布流程更加快捷，不妨试试自动部署。

在 Github 上创建一个新的仓库,权限建议设置为“Private”.它将被用来用于存放 Hugo 的源文件，即目录为 “你的博客名称” 下的所有文件夹和文件。如下图。我自定义的仓库名为“Hugo” 创建仓库

前往本仓库的 Settings/Developer Settings/Personal access tokens , 点击 “Generate new token (classic)” 创建一个 token. 创建Token

“Expiration” 为 token 过期时间，可自定义。记得选择下方的 “repo” 和 “workflow” 选项。

前往本仓库的 Settings/Secrets and variables/Actions 将生成的 Token 保存在仓库的环境变量中。 环境变量

返回本地的 “你的博客名” 文件夹，在其中新建 “.Github” 文件夹，在该文件夹中创建 “workflows” 文件夹，在该文件夹中新建 “deploy.yaml” 文件。复制以下代码到该文件中：

 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

name: deploy

# 代码提交到main分支时触发github action
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
        - name: Checkout
          uses: actions/checkout@v4
          with:
              fetch-depth: 0

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

        - name: Build Web
          run: hugo -D

        - name: Deploy Web
          uses: peaceiris/actions-gh-pages@v4
          with:
              PERSONAL_TOKEN: ${{ secrets.你的 Token 变量名 }}
              EXTERNAL_REPOSITORY: 用户名/仓库名
              PUBLISH_BRANCH: main
              PUBLISH_DIR: ./public
              commit_message: auto deploy

在 “你的博客名” 文件夹中新建 “.gitignore” 文件，用来忽略提交不必要的文件或文件夹。在其中输入：

1
2
3
4

public
resources
.hugo_build.lock
hugo.exe

将 Hugo 源文件上传至仓库

1
2
3
4
5
6

git init
git add .
git commit -m "注释"
git branch -M main
git remote add origin git@github.com:用户名/仓库名.git
git -u push origin main

提交完成之后前往 “Actions” 页面查看部署情况。下图是我发稿前的状况。 部署情况

End

一切正常的话，就可以愉快地享用你的个人博客啦！当然，部署完成后还可以进行主题美化、评论区的配置等一系列繁杂的操作。不过，瞎折腾也不是没有意义的；或许，搭建博客本身就是意义。

Hugo
Licensed under CC BY-NC-SA 4.0