这是我第三次建网站，但我倾向说这是我的第一个网站，虽然还是很简单。
1 网站搭建 #
1.1 搭建指南 #
HUGO 号称 “The world’s fastest framework for building websites.” 目前在 Github 上有 86k+ Star，据说中文文档较少，对我这种英语菜鸡不够友好。
Blowfish “A powerful, lightweight theme for Hugo.” 界面很漂亮，内容很详实，我很喜欢。维护者众多，有包括中文在内的多个版本语言。比较重要的文档有 简码 | 局部模板 | 页面布局 | 进阶自定义 | 文件头 - robots 等。
N9O Blowfish 创始人的个人博客，其中一篇文章介绍了如何使用 Blowfish 和 Hugo 构建主页。
1.2 环境设置 #
为了使用 Hugo 框架和 Blowfish 主题，先后安装了 Git | Go | Node.js 和 Sass | Hugo | Github CLI 等工具。不确定用不用得上，反正都装了。除了保证 Hugo 是扩展版，没有太注意版本信息，基本是当前安装最新的版本；使用 Windows 操作系统。
需要为 Go 语言新建两个系统变量 GOROOT 和 GOPATH。
一开始搞不懂 Windows 的 Chocolatey 包管理器 安装选项，什么都不懂，所以先安装 Node.js 再通过 npm 下载。需要添加环境变量 C:\Program Files\nodejs\ 和 C:\Users\username\AppData\Roaming\npm。
安装 Hugo 有两种方式，预编译二进制文件（Prebuilt binaries）和包管理器（Package managers）。
git version
go version
node -v
sass --version
hugo version
gh versiongit version 2.52.0.windows.1
go version go1.25.6 windows/amd64
v24.13.0
1.97.3 compiled with dart2js 3.10.7
hugo v0.154.5-xxx+extended windows/amd64 BuildDate=xxx VendorInfo=gohugoio
gh version 2.86.0 (2026-01-21)
1.3 常用命令 #
- Windows
Type cmd to start&Press Ctrl+C to stop - 查看命令
hugo -h- 启动服务
hugo server -Dhugo server --disableFastRender- 新建文章
hugo new content projects/demo.md2 内容管理 #
2.1 目录结构 #
| 文件夹 | 文件 |
|---|---|
public |
用于发布的网站，自动生成，会保留历史图片等，可以定时清理 |
resource |
缓存，自动生成，可以清理 |
theme |
主题，如 Blowfish |
assets |
图片、CSS、Sass、JavaScript 等资源，根据需要添加 |
cnotent |
文章及配套资源，按目录存放 |
config |
自定义站点配置 |
i18n |
.yaml 文件包含常用网点信息的翻译，支持自定义 |
static |
网站图标等静态文件 |
data |
附加数据 |
layouts |
页面模板 |
archetypes |
文件模板 |
一个 Hugo 项目可以有多个主题，一个主题又相当于一个 Hugo 项目，根目录下的 assets i18n 等文件夹，主题目录下也有，而且有时候优先使用主题目录下的文件。hugo server -D 会显示 Hugo 关注哪些文件夹。
修改之后如果没变化，退出命令提示符并清一下浏览器缓存试试。
2.2 短代码 #
2.3 装饰素材 #
艺字网 一个艺术字体在线生成网站，免费、够用、不用登录。对色彩、字体排版不满意的话用 PS P 一下就好。顺便说一下为电脑安装的字体是 .ttf 格式的，安装后 WPS、Word 里面都会显示；CAD 字体是 .shx 格式的，放在 Fonts 目录下即可。
哲风壁纸 拥有大量精美的桌面壁纸素材，可惜 .mp4 格式的动态壁纸不能作为网页背景。不用登录。
阿里巴巴矢量图标库 阿里倾力打造的矢量图标管理、交流平台，CSDN logo 就是这里找的。登录密码 18762+h1。assets/icons 是 SVG 图片的存储位置，自定义图标建议跟随主题 fill="currentColor"。
Google 翻译 台湾和大陆的语言习惯不一样，许多东西的叫法不一样，不能简单地按字翻译。描述越完整，越能展示语境，翻译越准确。
VScode 切换字符集编码