严肃发现我是为数不多用 Hugo 搭建博客的人。
首先来一览 Hugo 和 Hexo 的差别
Hexo 的主要优势
- 上手简单
- 功能丰富
Hugo 的主要优势
- 构建速度快
- 无需依赖 Node.js 等工具
至于我为什么选择用 Hugo 而不是 Hexo 呢……
我都搭建完了才知道 Hexo 这个东西
本文仅仅介绍如何使用 Hugo 搭建博客,至于怎么部署,怎么上传,其它文章已经写得很详细了
下载 Hugo
直接帮你们选的包含扩展功能的那一个,虽然好像用不到。
下载完后解压到一个文件夹内,然后将路径添加到环境变量里。
添加环境变量
- 在 开始菜单 搜索 “编辑系统环境变量”
- 双击打开 “环境变量” 按钮
- 双击打开下半部分 “系统变量” 的 “Path” 部分
- 点击右侧的 “新建” 按钮,将 “hugo.exe” 所在的文件路径复制进去
- 连续点击三个窗口的确定,保存修改。
- 打开 “cmd” 或 “Powershell”,输入 “hugo –version” 以测试是否成功。
环境就配置好了,这是真的很简单吧。
选定主题
然后你需要去找一个主题模版(自己写也行。。。)
这是官方的主题库:link
这是我使用的主题:link
选好后下载就行了,至于怎么在 GitHub 下载。。。
仓库界面里有一个大大的绿色的 “Code” 按钮,打开后选择 “Download ZIP” 即可。
开始搭建
找一个文件夹(不一定为空,Hugo 会自动新建一个文件夹存放)
打开该路径下的 “cmd” 或 “Powershell”,最简单的方式就是在路径栏里直接输入。
指令:hugo new site [替换为你的文件夹名称]
然后就会新建一个博客根目录,点击进去,找到 “themes” 文件夹,把你下载的主题复制进去解压缩。
如果你要修改配置文件,那么请将解压缩后的主题文件夹中的 config、data、i18n 等配置文件夹复制到博客根目录后,在博客根目录修改,不建议直接修改博客主题的文件。
文件夹的优先级是:外层根目录大于主题文件。也就是说,如果有冲突,Hugo 会使用外层配置而非主题配置;对于不冲突的文件,Hugo 会将其合并到一起使用。
博客主题内一般都带有一个 “README.md”,是主题的使用教程,至少我用的 reimu 主题的教程还是非常详细的。
根目录里有一个 “hugo.toml”,我们需要修改它,具体怎么修改,请在 此处 查询。
我的配置
baseURL = "https://crystalcoreqwq.github.io/"
languageCode = "zh-CN"
title = "CrystalCore的博客"
theme = "reimu"
hasCJKLanguage = true
defaultContentLanguage = "zh-CN"
relativeURLs = true
canonifyURLs = false
enableRobotsTXT = false
enableEmoji = true
[outputs]
home = ["Algolia", "HTML", "RSS"]
[outputFormats.Algolia]
baseName = "algolia"
isPlainText = true
mediaType = "application/json"
notAlternative = true
[markup]
[markup.highlight]
guessSyntax = true
lineNos = false
noClasses = false
style = "monokai"
[markup.tableOfContents]
startLevel = 1
endLevel = 6
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
[markup.goldmark.extensions.passthrough]
enable = true
[markup.goldmark.extensions.passthrough.delimiters]
block = [["\\[", "\\]"], ["$$", "$$"]]
inline = [["\\(", "\\)"], ["$", "$"]]
[author]
name = "CrystalCore"
github = "CrystalCoreQwQ"
email = "niurousaman@outlook.com"
[params]
[params.math]
enable = true
engine = "katex"
[languages]
[languages.zh-CN]
languageName = "简体中文"
weight = 1
title = "CrystalCore 的博客"
[languages.zh-CN.params]
subtitle = "一只蒟蒻啊喵~"
然后就需要按照主题的教程走了,这个就请大家自行学习。
搭建完成后,在根目录打开 “cmd” 或 “Powershell”,输入指令 hugo server,找到最下方的 链接,直接打开浏览器输入并打开即可看到预览。
生成的博客文件会存放在 “public” 文件夹内,这里面就是你要上传到 GitHub Pages(或其他托管服务)的静态网页文件。
编写文章
Front Matter
在根目录打开 “cmd” 或 “Powershell”,输入指令 hugo new [文章的路径],这里路径建议使用相对路径。
然后就会新建一个新的文件,我相信你会使用 “.md” 的,那么打开后就出有这样一个模版:
+++
date = '2026-07-24T09:00:03+08:00'
draft = true
title = '文件名称'
+++
嗯对,这是文章的 “Front Matter”,是 toml 风格的,用来存储、控制文章的数据、功能,你当然可以修改为 yaml 风格的,至于 “Front Matter” 怎么编辑,请看 这里。
这是我 Front Matter
---
title: "Bitset的使用方法"
date: 2026-02-06 # 其实并不标准的时间表示方式
draft: false # 肯定不能标记为草稿
math: true # 打开 LaTex
tags: ["语法"] # 标签
categories: ["算法"] # 分类
cover: /images/covers/cover2.jpg # 文章头图/壁纸
comment: true # 支持评论功能
---
至于怎么修改 “Front Matter” 的模版:
博客根目录/
└── archetypes/
└── default.md # 在在这里自定义默认模版
这是我的模版
---
title: "{{ replace .File.ContentBaseName "-" " " | title }}" # 自动将文件名称转化为文章标题
date: "{{ .Date }}" #
draft: false
math: true
tags: [""]
categories: [""]
cover: /images/covers/cover?.jpg
comment: true
---
Markdown 大家都会用,我就不教了,不要忘记 Markdown 可以直接嵌套 html 的代码。
短代码
Hugo 还在支持 Markdown 中使用短代码,这些是学习链接:
注:
- figure:用于在文章中插入带标题、说明文字的图片。
- highlight:用于展示带行号、高亮特定行等高级功能的代码块。
引用文件
文章需要引用到的本地文件,需要放到博客根目录的 “static” 文件夹里
引用时,需要给出相对于 “static” 文件夹的路径,路径以 ‘/’ 开头,指向 “static” 文件夹根目录,如上我的 “/images/covers/cover2.jpg”,它的存储目录就是:
博客根目录/
└── static/
└── images/
└── covers/
└── cover2.jpg
结尾
最后给一份命令速查:
hugo new site 博客名 # 新建站点
hugo new posts/文章名.md # 新建文章
hugo server # 本地预览(不包含草稿)
hugo server -D # 本地预览(包含草稿)
hugo # 生成静态文件
hugo --cleanDestinationDir # 清理后重新生成

说些什么吧!