Hugo 简介
Hugo 是一个基于 Go 语言的开源静态网站生成器，“极速”是它的代名词，哪怕数千页面也只是弹指一挥间即可生成。
来看看 Hugo 与其它类似的主流生成器的简单对比。
前置环境安装
- Git
- Go
- Dart Sass
安装 Hugo
Hugo 有三个版本: 标准版、扩展版和扩展/部署版。区别如下:
| 功能 | 标准版 | 扩展版 | 扩展/部署版 |
|---|---|---|---|
| 基本功能: Markdown 渲染、模板处理、静态页面生成等等。 | ✔️ | ✔️ | ✔️ |
| 扩展版处理图片时（缩放、裁剪、旋转、过滤等）统一编码为 WebP 格式；所有版本都可以解码读取 WebP 图像。 | - | ✔️ | ✔️ |
| 扩展版可使用内置的 LibSass 转译器将 Sass 转换为 CSS；任何版本都可安装使用 Dart Sass 转译器。 | - | ✔️ | ✔️ |
| 扩展/部署版可将站点直接部署到谷歌云存储桶、AWS S3 桶或 Azure 存储容器。 | ❌ | ❌ | ✔️ |
安装 Hugo 有三类方式: 预构建的二进制版本、包管理器和从源代码手动构建。
注意事项:
- 在包管理器的安装方法中，官方文档没有提到可行的 npm 方式，不知是何原因。
- Sass 团队在 2020 年便遗弃了 LibSass 转向了 Dart Sass。
详细步骤参考Hugo 文档-安装。
基本使用
检查安装
在安装完 Hugo 后，检查是否安装成功:
hugo version
或者检查 hugo 环境变量:
hugo env
创建 Hugo 项目
hugo new site <site-name>
初始化 Hugo 项目为 Git 仓库:
cd <site-name>
git init
添加主题
添加 FixIt 主题:
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
配置主题:
echo "theme = 'FixIt'" >> hugo.toml
echo "defaultContentLanguage = 'zh-cn'" >> hugo.toml
升级主题：
git submodule update --remote --merge themes/FixIt
更多关于 FixIt 主题的配置请参考 FixIt 官网。
构建网站
hugo [--destination]
默认将构建完成的文件发布到 public 目录。可在 --destination 选项后指定发布目录。
每次构建前，Hugo 不会删除 public 目录，而只是覆盖其中的同名文件，以避免删除你手动添加到其中的资源文件。
启动本地预览服务器
hugo server
此服务器会监听 asset、config、content、数据、布局、翻译和静态文件的变更。一旦这些变化之一产生，就会使用 LiveReload.js 重新构建站点并实时刷新浏览器。LiveReload.js 通过 Web Socket 在服务器和浏览器之间建立连接。
如果你想要浏览器自动重定向到你最后做出修改的页面，可以在 hugo server 命令后添加 --navigateToChanged 。
按 Ctrl + C 停止此服务器。
Hugo 默认不会发布那些 Front Matter 中 [draft 为 true] 、 [date 和 publishDate 未到期]以及 [expiryDate 已到期]的文章。（已发布的不受影响，需手动删除）
但是，可以在 hugo 或 hugo server 命令后追加以下命令以发布它们:
hugo --buildDrafts # or -D hugo --buildExpired # or -E hugo --buildFuture # or -F
目录结构
刚创建的 Hexo 项目目录结构如下所示:
my-site/
├── archetypes/
│ └── default.md
├── assets/
├── content/
├── data/
├── i18n/
├── layouts/
├── static/
├── themes/
└── hugo.toml <-- site configuration
每一个子目录都有它的作用，逐个来看:
- archetypes: 提供模板，便于创建格式统一的文章。
- assets: 通常放置一些需要经过 asset pipeline 处理的全局资源文件，如 JS、TS、CSS、Sass、图片。
- content: 通常包含 markdown 这样的标记类型文件以及与它绑定的资源文件。
- data: 包含数据文件，用于增强内容、配置、本地化和导航。
- i18n: 包含不同语言的翻译表。
- layouts: 包含网站的整体模板，用于将内容、数据和资源整合成一个完整网站。
- static: 与 assets 目录的资源不同，static 目录下的文件会被直接复制到 public 目录。一般用于放置网站图标 favicon.ico、搜索引擎协议文件 robots.txt 以及站点拥有者验证文件。
- themes: 主题的安装位置。
运行 hugo 或 hugo server 命令构建完网站后会生成一个前面提到过的 public 目录，通常还伴有一个 resources 目录。
- public: 包含网站的完整静态文件。
- resouces: 包含 asset pipeline 的缓存输出，通常是 CSS 和 图片。
Front Matter
一篇文章由头部信息 Front Matter 和正文组成。
Front Matter 是这篇文章的元数据，包含标题、日期、分类、标签等信息，可以是 YAML、TOML 或 JSON 格式。
最常用的 Front Matter 字段有:
- title: 文章标题。
- date: 文章创建日期。
- categories: 分类。
- tags: 标签。
- collections: 合集。
- publishDate: 发布日期。别名 pubDate、published。
- expiryDate: 过时日期。别名 unpublishDate。
- lastmod: 上次修改日期。别名 modified。
- description: 页面描述，长度会影响页面收录/索引。
- summary: 网站主页显示的文章的摘要。与页面描述不同。摘要会自动生成，但手动添加的优先级更高。如果 description 为空，则会赋值为 summary。
- keywords: 关键词。
- slug: 覆盖 URL 路径的最后一个参数。
- isCJKLanguage: 是否属于中日韩语系，这会影响字数统计、阅读时间计算和文章摘要获取。
- weight: 页面权重，用于排序页面。
- aliases: 页面别名，用于实现重定向功能。当你的页面地址改变时，可以使用它设置旧地址，于是访问它就会自动跳转到新地址。可以设置多个旧地址。
- params: 自定义参数。
可以将这些常用字段中的一些合成一个模板使用，例如为 posts 编辑一个模板 archetypes/posts.md:
title: {{ replace .TranslationBaseName "-" " " | title }}
date: {{ .Date }}
categories:
tags:
collections:
summary:
keywords:
slug: {{ substr .File.UniqueID 0 8 }}
isCJKLanguage: true
weight: 0
接下来就可以新建文章看看效果：
hugo new content "posts/2025/my first post.md"