用Hugo从0到1搭建个人博客一次完整的静态网站架构实践

我受够了WordPress的慢。每次登录后台，光是加载仪表盘就要等上三秒，更别提那些永远也装不完的插件更新了。去年下定决心，把个人博客从WordPress迁移到Hugo，结果发现，静态网站原来可以这么轻快。

为什么是Hugo

Hugo是用Go语言写的静态网站生成器。说白了，就是把你写的Markdown文件套上模板，生成一堆HTML文件。没有数据库，没有PHP查询，直接把文件丢到CDN上就能访问。我选Hugo的原因很简单：快、稳、省心。

快是真快。在MacBook Air M1上，生成一个包含100篇文章的站点，不到一秒。WordPress？你得等它连数据库，查表，渲染PHP，一套流程下来至少三秒。

环境搭建与初始化

安装Hugo很简单。Mac用户一行brew install hugo就够了，Windows去官网下个exe，Linux用apt。装完运行hugo version，看到版本号就说明成了。

初始化站点更简单：hugo new site myblog。这条命令会在当前目录生成一个完整的站点骨架，有content、layouts、static、themes四个文件夹。我第一次运行时，看着屏幕上密密麻麻的文件，有点懵，后来才发现每个文件夹都有它的用处。

网站架构设计

Hugo的架构，说白了就是四样东西：内容、模板、静态资源、配置。内容放在content文件夹里，按section分目录。比如我写一篇关于咖啡的文章，就放在content/posts/咖啡.md。模板放在layouts文件夹，定义了文章列表页、单篇文章页、基础模板等。静态资源放在static里，图片、CSS、JS直接丢进去，Hugo不会处理，原样复制到生成的站点。配置文件是config.toml或config.yaml，定义站点元数据、导航菜单、主题等。

我踩过的坑：content目录下的文件夹名称决定了section。一开始我没注意，把文章放在了content/article/下面，结果生成的URL是/article/，而我希望是/posts/。后来才发现，只要把文件夹改名成posts就行了。这种细节，官方文档里不会重点讲，得自己试出来。

主题选择与定制

Hugo的主题生态很丰富。我一开始眼花缭乱，后来选了Papermod，因为它简洁、可定制性强。安装主题用git clone到themes文件夹，然后在config.toml里设置theme = "papermod"。

定制主题主要通过修改主题提供的变量。比如我想把网站的主色调从蓝色改成绿色，只需要在config.toml里加一行params.color.accent = "green"。我还自己写了几个短代码（shortcodes），用来插入卡片、提示框这些元素。写短代码的时候，我踩了个语法错误的坑，Hugo的错误提示不够友好，我对着文档找了半小时才发现少了一个花括号。

内容管理与写作

写文章用hugo new posts/my-first-post.md，它会在content/posts/下生成一个带front matter的模板。front matter就是文章开头的---之间的部分，定义标题、日期、分类、标签等。我习惯把日期写成2023-10-01，但Hugo默认的日期格式是RFC3339，得在config.toml里设置，否则文章可能不显示。这也是我踩过的坑。

写作本身，Markdown就够了。Hugo对Markdown的支持很好，语法高亮、表格、引用都能用。我唯一不习惯的是，Hugo默认使用Goldmark渲染器，有些HTML标签会被过滤，得配置config.toml的[markup.goldmark.renderer]来放行unsafe HTML。

部署上线

部署我选了Netlify。把Hugo生成的public文件夹拖进去，或者关联GitHub仓库，每次push自动部署。我第一次部署成功时，看着自己搭建的站点在互联网上运行，感觉特别不真实。后来我又配置了GitHub Actions，实现自动化部署：每次push到main分支，Actions自动运行hugo build，然后部署到Netlify。

不过，部署也不是一帆风顺。第一次上线后，发现文章里的图片全部404。排查后才发现，Hugo默认不会把content里的图片复制到public，得把图片放在static文件夹里，或者用资源包（resources）功能。我把图片从content挪到static，问题就解决了。

现在我的博客已经稳定运行了半年。页面加载速度从原来的5秒变成了0.3秒，搜索引擎排名也上去了。如果你也在考虑搭建个人博客，不妨试试Hugo。有什么问题，欢迎在评论区留言，我们一起交流。

📌 发布建议

建议在部署前测试config.toml中的baseURL设置，并配置GitHub Actions实现自动化部署，减少手动操作。

🎯 标题候选

• 用Hugo从0到1搭建个人博客：一次完整的静态网站架构实践
• 从WordPress到Hugo：我为什么放弃动态网站，拥抱静态架构
• Hugo架构建设网站完全指南：从安装到部署的实战记录