Hugo 静态博客从零部署:5 分钟搭建自己的个人网站

想拥有一个属于自己的个人博客,但又嫌 WordPress 臃肿、Typecho 功能太少?Hugo 是你的最佳选择:用 Markdown 写文章,一键生成纯静态 HTML,部署到 GitHub Pages 完全免费。本文从环境准备到上线运营,手把手教你搭建一个高性能、可定制的个人博客。

为什么选择 Hugo

市面上流行的静态博客生成器对比:

Hugo 的最大优势是快——文章多了之后,Hexo 构建可能要几分钟,Hugo 几秒搞定。

第一步:安装 Hugo

macOS

Windows

Linux

验证安装

第二步:创建博客

初始化站点

选择主题

Hugo 官方主题站 themes.gohugo.io 有 300+ 主题可选。推荐几个:

• PaperMod:简洁优雅,适合技术博客
• Stack:卡片式布局,视觉冲击强
• LoveIt:功能丰富,中文友好
• Even:极简风格

安装主题(以 PaperMod 为例)

配置主题

编辑 config.toml:

第三步:写第一篇文章

自动生成的模板:

把 draft: true 改成 draft: false 就会在生成时被包含。

启动本地预览

常用参数:

• -D, --buildDrafts:包含草稿
• --bind 0.0.0.0:允许局域网访问
• --port 8080:修改端口
• --navigateToChanged:文件变更自动刷新(默认开启)

第四步:自定义页面

About 页面

友情链接

content/links.md:

主题文件夹下创建 layouts/links.html 自定义模板。

评论系统

推荐使用 Giscus(基于 GitHub Discussions):

1. 打开 giscus.app 配置
2. 在 config.toml 中添加:

第五步:部署

方案 1:GitHub Pages(免费,推荐)

准备工作

1. GitHub 创建仓库 .github.io
2. 本地配置:

GitHub Actions 自动部署

创建 .github/workflows/deploy.yml:

之后只要 git push 就能自动部署。

方案 2:Vercel(国内访问更友好)

1. 注册 vercel.com
2. 导入 GitHub 仓库
3. 框架预设选 Hugo
4. 一键部署,自动 HTTPS

方案 3:自己的服务器

同步:

第六步:SEO 优化

1. sitemap.xml

Hugo 自动生成,无需配置。提交到 Google Search Console 和百度站长平台。

2. robots.txt

3. RSS 订阅

Hugo 自动生成 index.xml(RSS),在主题里启用即可。

4. 文章结构化数据(SEO 友好)

使用 JSON-LD:

第七步:性能优化

1. 启用图片懒加载

主题里配置:

2. 压缩资源

自动压缩 HTML/CSS/JS。

3. CDN 加速

把静态资源(jsDelivr / Cloudflare / 腾讯云 CDN)加上:

4. 配置 Service Worker(PWA)

PaperMod 主题内置支持,在 config.toml 里:

第八步:数据迁移与备份

备份

从 Hexo 迁移

可以用 hexo-hugo-migrate 工具,把 Hexo 的 source/_posts/*.md 转成 Hugo 格式。

常见问题

文章不显示?

检查:

1. draft: false?(草稿不显示)
2. 日期是未来时间?(默认会过滤掉)
3. hugo.toml 里 buildFuture 和 buildExpired 设置

主题切换后样式乱了?

清缓存重建:

中文 URL 404?

或者干脆用拼音/英文 slug。

推荐插件与扩展

• Hugo Shortcodes:内置很多,可以用 {{< youtube ID >}} 嵌入视频
• Lighthouse:检查 SEO 和性能分数
• Algolia DocSearch:站内搜索
• Twikoo:替代 Giscus 的评论系统

总结

Hugo 的工作流非常简洁:

一旦配好,你就可以专注于内容创作,而不是折腾环境。这就是静态博客的魅力。