Hugo 常用操作指南：从新手到熟练

星期五, 8月 22, 2025 | 2分钟阅读 | 更新于星期五, 8月 22, 2025

@ Author Name

你是否曾经被各种复杂的网站构建工具搞得头晕目眩？是否厌倦了那些需要大量配置的博客系统？那么 Hugo 可能就是你一直在寻找的答案。作为一个快速、灵活且强大的静态网站生成器，Hugo 让创建网站变得简单而有趣。

在这篇文章中，我们将一起探索 Hugo 的常用操作，让你能够轻松上手并快速构建自己的网站。

Hugo 是什么？

Hugo 是一个用 Go 语言编写的静态网站生成器。它以速度著称，能够在几秒钟内生成包含数千个页面的网站。与需要数据库和服务器端处理的动态网站不同，Hugo 生成的是纯静态文件，这使得网站加载速度极快，同时部署也变得异常简单。

安装 Hugo

在开始之前，我们需要先安装 Hugo。根据你的操作系统，可以选择以下方式：

macOS: 使用 Homebrew 安装：brew install hugo
Windows: 使用 Chocolatey 安装：choco install hugo
Linux: 使用包管理器或从官网下载二进制文件

安装完成后，可以通过 hugo version 命令验证安装是否成功。

创建新站点

安装好 Hugo 后，我们就可以创建自己的网站了。在终端中运行以下命令：

hugo new site my-blog

这会创建一个名为 my-blog 的新目录，其中包含了 Hugo 站点的基本结构。

选择和安装主题

Hugo 的魅力之一在于它丰富的主题生态系统。你可以从 Hugo 官方主题网站找到各种风格的主题。

安装主题通常有两种方式：

作为 git submodule 安装：

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

直接下载主题文件到 themes 目录。

安装完成后，在 config.toml 文件中添加主题配置：

theme = "ananke"

内容目录结构

Hugo 使用清晰的内容目录结构来组织网站内容。默认情况下，Hugo 会创建以下目录结构：

content/
├── posts/        # 存放博客文章
├── about/        # 存放关于页面
└── _index.md     # 网站首页内容

创建不同类型的页面

你可以在 content 目录下创建不同的子目录来组织不同类型的内容：

文章目录：通常使用 posts 目录存放博客文章
页面目录：可以创建 about、contact 等目录存放独立页面
分类目录：根据需要创建不同的分类目录

要创建一个新页面，可以使用以下命令：

# 创建博客文章
hugo new posts/my-first-post.md

# 创建关于页面
hugo new about/index.md

# 创建特定分类下的文章
hugo new tutorials/how-to-use-hugo.md

注意，Hugo 会根据你指定的路径自动选择合适的模板。如果你不指定目录，Hugo 会默认在 content 根目录下创建文件。

创建内容

Hugo 使用 Markdown 格式来编写内容，这使得写作变得简单而直观。

创建文章

要创建一篇新文章，可以使用以下命令：

hugo new posts/my-first-post.md

这会在 content/posts/ 目录下创建一个新的 Markdown 文件。文件的开头是 Front Matter（前置元数据），包含了文章的标题、日期、草稿状态等信息。

Front Matter 详解

Front Matter 是 Hugo 中非常重要的概念，它位于文件的顶部，用于定义页面的元数据。常见的配置包括：

---
title: "文章标题"
date: 2025-08-22T14:44:45+08:00
draft: false
tags: ["标签1", "标签2"]
categories: ["分类1"]
---

使用草稿

Hugo 支持草稿功能，可以在 Front Matter 中设置 draft: true。在开发过程中，你可以使用 hugo server -D 命令来预览包括草稿在内的所有内容。

配置菜单

一个网站怎么能没有导航菜单呢？Hugo 提供了灵活的菜单配置方式。

在 config.toml 中配置菜单

你可以在 config.toml 文件中直接定义菜单项：

[[menu.main]]
name = "首页"
url = "/"
weight = 1

[[menu.main]]
name = "关于"
url = "/about/"
weight = 2

[[menu.main]]
name = "文章"
url = "/posts/"
weight = 3

其中 weight 参数用于控制菜单项的显示顺序，数值越小越靠前。

在 Front Matter 中配置菜单

你也可以在单个页面的 Front Matter 中添加菜单配置：

---
title: "关于我"
menu: "main"
---

将文章归类到指定菜单

要将特定文章或页面归类到指定菜单下，有两种方法：

在 Front Matter 中指定菜单：

---
title: "我的文章"
menu:
  main:
    weight: 10
---

使用 pageRef 关联菜单项：在 config.toml 中配置菜单时，使用 pageRef 参数指向具体的页面路径：
```
[[menu.main]]
name = "我的文章"
pageRef = "/posts/my-article"
weight = 10
```

创建多级菜单

Hugo 还支持创建多级嵌套菜单：

[[menu.main]]
name = "文档"
weight = 10

[[menu.main]]
name = "入门指南"
parent = "文档"
pageRef = "/docs/getting-started"
weight = 1

[[menu.main]]
name = "配置说明"
parent = "文档"
pageRef = "/docs/configuration"
weight = 2

启动本地服务器

在开发过程中，Hugo 内置的服务器可以实时预览你的网站：

hugo server

这个命令会启动一个本地服务器，默认地址是 http://localhost:1313。Hugo 会自动监视文件变化，并在你修改内容时实时刷新浏览器。

如果你想要预览草稿文章，可以使用：

hugo server -D

生成静态文件

当你完成网站的开发后，就可以生成静态文件进行部署了：

hugo

这个命令会在 public 目录下生成所有静态文件，你可以将这些文件部署到任何支持静态文件托管的服务上，如 GitHub Pages、Vercel、Netlify 等。

常用命令总结

为了方便查阅，这里总结一些常用的 Hugo 命令：

命令	说明
`hugo new site sitename`	创建新站点
`hugo new content/posts/postname.md`	创建新文章
`hugo new content/about/index.md`	创建新页面
`hugo server`	启动本地服务器
`hugo server -D`	启动本地服务器并预览草稿
`hugo`	生成静态文件
`hugo -D`	生成静态文件并包含草稿

结语

Hugo 以其简单易用和强大功能，成为了许多博主和技术写作者的首选工具。通过本文的介绍，相信你已经掌握了 Hugo 的基本操作。当然，Hugo 的功能远不止这些，它还支持多语言、自定义模板、短代码等高级功能，等待你去探索。

现在，就让我们一起用 Hugo 创造属于自己的网站吧！