投入 Hugo 的怀抱！

我的环境参数：

Windows 11 22H2

Google Chrome 114

Markdown 编辑器：VS Code

博客配置编辑器：VS Code

命令行工具：Windows Terminal

Git 工具：GitHub Desktop

Hugo 版本：0.114.0_extended（笑死，一开始写的时候版本还是 0.112.3）

Hugo 主题：Stack

Hugo环境搭建

安装VScode

从官网获取 VScode 的安装包（VScode 官网: https://code.visualstudio.com/）
Select Additional Tasks 中把下面列出的全部选项打勾

Add “Open with Code” action to Windows Explorer file context menu
Add “Open with Code” action to Windows Explorer directory context menu
Register Code as an editor for supported file types
Add to PATH (requires shell restart)

install 开始安装，等待安装完成后选择 Finish

至此，VSCode 就安装完成了，接下来安装 Git

安装 Git

小白直接上手 git 感觉门槛有点高，还是建议装 git 的 GUI 版本
我选的是 GitHub Desktop

官网下载安装包
下载地址：https://desktop.github.com/
使用 GithubDesktopZhTool 汉化
个人觉得没任何难度，实在不懂可以看作者的 README 文档

当然大佬们可以直接用 Git，也不需要我多解释

安装 Hugo

从 Hugo 官方 github 仓库下载 hugo extended 版本
下载地址: https://github.com/gohugoio/hugo/releases/latest
解压下载下来的压缩包，得到 hugo.exe 并放到自己心仪的位置
我这里放在 E:\Hugo\bin
设置 Hugo 环境变量，依次打开设置-系统-系统信息-高级系统设置-环境变量添加 Hugo 主程序所在文件夹
检查 hugo 是否安装成功，Win + R 输入 cmd 回车打开 cmd，运行 hugo version，如果输出版本信息则配置成功如我这里输出（0.114.0）：

1

hugo v0.114.0-9df2ec7988e5a217a14901cc76c0b7e76b2e9f02+extended windows/amd64 BuildDate=2023-06-19T17:01:43Z VendorInfo=gohugoio

恭喜！到这里，基本就都配置完毕了，现在可以开始博客的搭建了

Hugo博客搭建

初始化博客

在任意位置右键，选择在终端打开，输入以下命令：

1

hugo new site <这里填上你想要的位置>

Stack 主题安装

获取主题文件
找到 Stack 主题 GitHub 仓库（链接：https://github.com/CaiJimmy/hugo-theme-stack）
Code Download → Download ZIP 下载源码解压
改名为 hugo-theme-stack 后放入博客文件夹根目录 /theme 中
将获取到的主题中的 exampleSite 文件夹中所有文件复制到博客文件夹根目录中
编辑 config.yaml，根据自己需要进行配置，作者在配置文件里面写了基本注释（虽然都是英文的）
官方配置文档: https://stack.jimmycai.com/config/

配置博客各个页面

如果添加的是自己博客的一个页面，可以在这个页面的 md 文件的 Front Matter 中添加以下内容：

1
2
3
4
5
6


menu: 
    main:
        name:                # 名称
        weight: -90
        params:
            icon:            # 图标名称

如果不是你的博客的一个页面，那么在 config.yaml 中的 menu 部分下添加以下代码：

1
2
3
4
5
6
7
8
9


menu:
    main:
        - identifier: 
          name: 
          url: 
          weight: 
          params:
            icon: 
            newTab: 

identifier: 项目名
name: 显示名称
url: 链接
weight: 优先级，数值越低优先级越大
params:
icon: 自定义图标
newTab: 是否在新标签页打开

官方文档：https://stack.jimmycai.com/config/menu

开始创作

博客文章都存放在 /content 中，如果想要创建一篇文章，可以在博客文件夹根目录下打开终端输入以下命令：

1

hugo new posts/my-first-post.md

再打开 /content/posts 就可以找到一个 Hugo 为你创建好的一个名为 my-first-post.md 的文件

当然你也可以使用官方推荐的一篇文章一个文件夹的方式（官方文档: https://stack.jimmycai.com/writing/markdown）

预览博客

创作完成的你一定想要本地预览你的博客吧，博客根目录右键“在终端打开”，输入以下命令：

1

hugo server --navigateToChanged

后面加的 --navigateToChanged 可以省略，加它的作用是可以在你更改某个页面后自动跳转查看该页面的修改

根本不想每次输代码启动预览服务器的懒癌患者们，可以像我一样在博客根目录新建一个 vbs 文件：

1
2
3
4


Dim ws
Set ws = Wscript.CreateObject("Wscript.Shell")
ws.run "hugo server --navigateToChanged"
Wscript.quit

以后要预览博客可以直接双击运行这个脚本会直接弹出终端界面并启动预览服务器，要停止服务器按 Ctrl + C，终端界面会自己消失

另：我遇到过以下的报错：

1

This is most likely due to infinite recursion. If this is just a slow template, you can try to increase the 'timeout' config setting.

不知道你会不会遇到，但如果遇到了，那恭喜你节省很多找解决办法的时间，解决办法：在 config.yml 根级加入以下代码：

1

timeout: 10m

推荐阅读：Hugo Stack 主题配置与使用 | Bore’s Notes
为你的博客添加以下功能：

在 GitHub 上编辑此页

自动更新文章最后修改时间

加入字数统计、站点总字数统计

添加友情链接段代码

添加音乐短代码

Hugo环境搭建#

安装VScode#

安装 Git#

安装 Hugo#

Hugo博客搭建#

初始化博客#

Stack 主题安装#

配置博客各个页面#

开始创作#

预览博客#