我的环境参数:
- Windows 11 23H2
- Google Chrome 130
- Markdown 编辑器:VS Code
- 博客配置编辑器:VS Code
- 命令行工具:Windows Terminal
- Git 工具:GitHub Desktop
- Hugo 版本:0.134.3_extended
- Hugo 主题:Stack
Hugo 环境搭建
安装 VS Code
从官网获取 VS Code 安装包
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
至此,VS Code 就安装完成了,接下来安装 Git
安装 Git
不想用命令行,所以装了 GitHub Desktop。
官网下载安装包
(可选)使用 GithubDesktopZhTool 汉化
安装 Hugo
在官方 Github 仓库 Releases 下载 extended 版本
解压下载下来的压缩包,得到
hugo.exe
并放到自己心仪的位置设置环境变量,依次打开设置-系统-系统信息-高级系统设置-环境变量,在 PATH 添加 Hugo 主程序所在文件夹
检查 Hugo 是否安装成功,终端运行
hugo version
,如果输出版本信息则配置成功 如我这里输出:
hugo v0.134.3-5fb333b9f5ff4ec018f9d78910177d0bec1befb0+extended windows/amd64 BuildDate=2024-09-19T14:28:20Z VendorInfo=gohugoio
恭喜!到这里,基本就都配置完毕了,现在可以开始博客的搭建了
Hugo博客搭建
初始化博客
在任意位置右键,选择在终端打开,输入以下命令:
hugo new site <这里填上你想要的位置>
Stack 主题安装
获取主题文件
在 Stack 主题 GitHub 仓库 Releases 下载一个心仪的版本后解压文件夹改名为
hugo-theme-stack
后放入博客文件夹根目录\theme
中将获取到的主题中的
exampleSite
文件夹中所有文件复制到博客文件夹根目录中编辑
config.yaml
,根据自己需要进行配置,作者在配置文件里面写了基本注释(虽然都是英文的)
官方配置文档: https://stack.jimmycai.com/config/
配置博客各个页面
如果添加的是自己博客的一个页面,可以在这个页面的 md 文件的 Front Matter 中添加以下内容:
menu:
main:
name: # 名称
weight: -90
params:
icon: # 图标名称
如果不是博客的一个页面,那么在 config.yaml 中的 menu 部分下添加以下代码:
menu:
main:
- identifier:
name:
url:
weight:
params:
icon:
newTab:
identifier
: 项目名name
: 显示名称url
: 链接weight
: 优先级,数值越低优先级越大
params:icon
: 自定义图标newTab
: 是否在新标签页打开
官方文档:https://stack.jimmycai.com/config/menu
开始创作
博客文章都存放在 \content
中,如果想要创建一篇文章,可以在博客文件夹根目录下打开终端输入以下命令:
hugo new posts/my-first-post.md
再打开 \content\posts
就可以找到一个 Hugo 为你创建好的一个名为 my-first-post.md
的文件
当然你也可以使用官方推荐的一篇文章一个文件夹的方式(官方文档:https://stack.jimmycai.com/writing/markdown)
预览博客
创作完成的你一定想要本地预览你的博客吧,博客根目录右键“在终端打开”,输入以下命令:
hugo server --navigateToChanged --disableFastRender --renderToMemory
--navigateToChanged
:在更改某个页面后自动跳转查看该页面--disableFastRender
:在更改时重新构建整个网站--renderToMemory
:不开启的话会直接在 \public
输出网站静态文件
根本不想每次输代码启动预览服务器的懒癌患者们,可以像我一样在博客根目录新建一个 vbs
脚本:
Dim ws
Set ws = Wscript.CreateObject("Wscript.Shell")
ws.run "hugo server --navigateToChanged --disableFastRender --renderToMemory"
Wscript.quit
以后要预览博客可以直接双击运行这个脚本会直接弹出终端界面并启动预览服务器,要停止服务器按 Ctrl + C,终端界面会自己消失
另:我遇到过以下的报错:
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 根级加入以下代码:
timeout: 10m