什么是 Hugo？#
Hugo 是一个用 Go 语言编写的静态网站生成器（Static Site Generator），以其惊人的速度和灵活性著称。它能够从 Markdown 文件快速生成完整的网站，无需依赖数据库，非常适合搭建博客、文档站点、企业官网等。
Hugo 的核心优势#
1. 极致速度#
Hugo 以其"毫秒级"构建速度著称。即使是包含数千页面的复杂网站，也能在几秒内完成构建。
2. 丰富的主题生态#
Hugo 拥有庞大的主题社区，涵盖博客、文档、作品集、企业网站等各类场景。
3. 灵活的模板系统#
Hugo 使用 Go 模板语言，提供强大而灵活的模板系统，满足各种定制需求。
4. 零依赖部署#
生成的纯静态文件可以部署到任何静态托管服务，如 GitHub Pages、Netlify、Vercel 等。
快速开始#
安装 Hugo#
macOS (使用 Homebrew):
Windows (使用 Chocolatey):
1
| choco install hugo -confirm
|
Linux:
创建新站点#
1
2
| hugo new site my-blog
cd my-blog
|
添加主题#
1
2
3
| git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
|
创建文章#
1
| hugo new posts/my-first-post.md
|
启动开发服务器#
访问 http://localhost:1313 即可预览网站。
目录结构#
1
2
3
4
5
6
7
8
9
10
11
12
| my-blog/
├── archetypes/ # 内容模板
│ └── default.md
├── assets/ # 资源文件（需要主题支持）
├── content/ # 内容目录
│ └── posts/
├── data/ # 数据文件（JSON、YAML、TOML）
├── layouts/ # 自定义模板
├── static/ # 静态文件（CSS、JS、图片等）
├── public/ # 构建输出目录
├── hugo.toml # 站点配置文件
└── theme/ # 主题目录
|
Front Matter 详解#
Hugo 使用 Front Matter 定义文章的元数据：
1
2
3
4
5
6
7
8
9
10
| ---
title: "文章标题"
date: 2026-05-23
description: "文章描述"
tags: ["tag1", "tag2"]
categories: ["category1"]
draft: false
weight: 1
slug: "custom-url-slug"
---
|
常用字段说明#
| 字段 | 说明 |
|---|
title | 文章标题 |
date | 发布日期 |
draft | 是否为草稿 |
tags | 标签列表 |
categories | 分类列表 |
slug | URL 别名 |
模板系统#
单页模板#
创建 layouts/_default/single.html：
1
2
3
4
5
6
7
| {{ define "main" }}
<article>
<h1>{{ .Title }}</h1>
<time>{{ .Date.Format "2006-01-02" }}</time>
{{ .Content }}
</article>
{{ end }}
|
列表模板#
创建 layouts/_default/list.html：
1
2
3
4
5
6
7
8
9
10
11
12
| {{ define "main" }}
<section>
<h1>{{ .Title }}</h1>
{{ range .Paginator.Pages }}
<article>
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
<p>{{ .Summary }}</p>
</article>
{{ end }}
{{ template "_internal/pagination.html" . }}
</section>
{{ end }}
|
短代码 (Shortcodes)#
在 layouts/shortcodes/ 目录下创建自定义短代码。
layouts/shortcodes/video.html：
1
2
3
| <video src="{{ .Get "src" }}" controls>
您的浏览器不支持视频播放。
</video>
|
使用方式：
分类与标签#
Hugo 自动为每篇文章生成分类和标签页面。
显示标签#
1
2
3
| {{ range .Params.tags }}
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/">{{ . }}</a>
{{ end }}
|
显示分类#
1
2
3
4
5
| <ul>
{{ range .Params.categories }}
<li>{{ . }}</li>
{{ end }}
</ul>
|
国际化 (i18n)#
在 i18n/ 目录下创建语言文件。
i18n/zh-cn.yaml：
1
2
3
4
| - id: readMore
translation: 阅读更多
- id: postedOn
translation: 发布于
|
在模板中使用：
1
| <p>{{ i18n "readMore" }}</p>
|
数据文件#
Hugo 支持 JSON、YAML、TOML 格式的数据文件。
data/friends.yaml：
1
2
3
4
| - name: 张三
url: https://example.com
- name: 李四
url: https://example.org
|
在模板中调用：
1
2
3
| {{ range .Site.Data.friends }}
<a href="{{ .url }}">{{ .name }}</a>
{{ end }}
|
资源管道 (Resource Pipeline)#
Hugo 内置资源处理功能，支持 SCSS、LESS、PostCSS 等。
启用 PostCSS#
在项目根目录创建 assets/css/main.css：
在模板中引用并处理：
1
2
| {{ $style := resources.Get "css/main.css" | resources.PostCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
|
SEO 优化建议#
1. 生成 sitemap#
在 hugo.toml 中启用：
1
2
3
4
| enableRobotsTXT = true
[sitemap]
changefreq = "weekly"
priority = 0.5
|
确保主题支持或自定义模板添加社交元标签。
3. 结构化数据#
为文章添加 JSON-LD 结构化数据，提升搜索引擎展示效果。
部署到 GitHub Pages#
1. 创建 GitHub Actions 工作流#
.github/workflows/gh-pages.yml：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| name: Deploy to GitHub Pages
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Hugo
uses: peaceiris/actions-hugo@v3
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
|
Hugo 命令速查#
| 命令 | 说明 |
|---|
hugo new site | 创建新站点 |
hugo new [path] | 创建新内容 |
hugo server | 启动开发服务器 |
hugo | 构建生产版本 |
hugo list | 列出内容 |
hugo mod | 管理模块 |
Hugo 是一个强大而灵活的静态网站生成器，适合各种规模的网站项目。其出色的构建速度、丰富的功能和活跃的社区使其成为静态网站领域的首选工具之一。
无论你是个人博主、技术文档作者还是企业网站开发者，Hugo 都能满足你的需求。开始使用 Hugo，探索其无限可能吧！