跳转到正文
文章目录

简介

Hugo 是目前世界上最快的静态网站生成器之一,使用 Go 语言编写。理解 Hugo 项目的文件结构,是掌握 Hugo 开发的第一步。本文将详细介绍一个标准 Hugo 项目中每个目录和文件的用途。


典型项目结构总览

运行 hugo new site mysite 后,会生成如下目录结构:

</> PLAINTEXT
mysite/
├── archetypes/
│   └── default.md
├── assets/
├── content/
├── data/
├── i18n/
├── layouts/
├── static/
├── themes/
└── hugo.toml

Hugo v0.110.0 起,默认配置文件由 config.toml 更名为 hugo.toml。


核心配置文件

hugo.toml / hugo.yaml / hugo.json

这是 Hugo 项目的主配置文件,支持 TOML、YAML、JSON 三种格式。常见配置项包括:

</> TOML
baseURL = "https://example.com/"
languageCode = "zh-CN"
title = "我的 Hugo 网站"
theme = "ananke"

[params]
  description = "这是我的个人博客"
  author = "张三"

[menu]
  [[menu.main]]
    name = "首页"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "文章"
    url = "/posts/"
    weight = 2

配置目录模式(推荐用于大型项目):

对于复杂项目,可以将配置拆分为目录结构:

</> PLAINTEXT
config/
├── _default/
│   ├── hugo.toml      # 基础配置
│   ├── menus.toml     # 菜单配置
│   └── params.toml    # 自定义参数
├── production/
│   └── hugo.toml      # 生产环境覆盖配置
└── development/
    └── hugo.toml      # 开发环境覆盖配置

content/ — 内容目录

这是存放所有网站内容的核心目录,Hugo 会将此目录中的 Markdown 文件渲染为 HTML 页面。

目录结构示例

</> PLAINTEXT
content/
├── _index.md          # 网站首页内容
├── posts/
│   ├── _index.md      # posts 列表页内容
│   ├── first-post.md
│   └── second-post.md
├── about.md
└── projects/
    ├── _index.md
    └── my-app.md

_index.md vs 普通 .md 文件

文件类型 作用
_index.md 代表该目录的列表页(List Page),如博客归档页
post.md 代表一篇单独文章(Single Page)

Front Matter(文章元数据)

每篇内容文件顶部的元数据块称为 Front Matter,支持 TOML、YAML、JSON 格式:

</> YAML
---
title: "我的第一篇文章"
date: 2026-03-25T08:00:00+08:00
draft: false
tags: ["Go", "Hugo"]
categories: ["教程"]
slug: "my-first-post"
weight: 1
cover:
  image: "images/cover.jpg"
  alt: "封面图片"
---

正文内容从这里开始...

常用 Front Matter 字段说明:

字段 说明
title 文章标题
date 发布时间,影响排序
draft 是否为草稿,true 时默认不构建
tags 标签列表
categories 分类列表
slug 自定义 URL 路径
weight 排序权重,数字越小越靠前
aliases URL 别名,用于重定向
description 摘要描述

layouts/ — 模板目录

layouts/ 是 Hugo 模板引擎的核心,用于控制页面的 HTML 结构。使用 Go 模板语法。

目录结构

</> PLAINTEXT
layouts/
├── _default/
│   ├── baseof.html    # 基础模板(所有页面的骨架)
│   ├── single.html    # 单页面模板(文章详情页)
│   ├── list.html      # 列表页模板(分类、标签、归档)
│   └── summary.html   # 摘要模板
├── partials/
│   ├── header.html    # 页头片段
│   ├── footer.html    # 页脚片段
│   ├── nav.html       # 导航片段
│   └── seo.html       # SEO 元标签片段
├── shortcodes/
│   ├── figure.html    # 图片短代码
│   └── notice.html    # 提示框短代码
├── index.html         # 网站首页模板
└── 404.html           # 404 页面模板

模板查找顺序

Hugo 按照以下优先级查找模板(越靠前优先级越高):

  1. layouts/<type>/<layout>.html
  2. layouts/_default/<layout>.html
  3. themes/<theme>/layouts/...

基础模板示例 baseof.html

</> HTML
<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
<head>
  <meta charset="UTF-8">
  <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
  {{ partial "seo.html" . }}
</head>
<body>
  {{ partial "header.html" . }}
  <main>
    {{ block "main" . }}{{ end }}
  </main>
  {{ partial "footer.html" . }}
</body>
</html>

Shortcodes(短代码)

短代码是在 Markdown 中嵌入复杂 HTML 的方式:

</> MARKDOWN
<!-- 使用内置短代码 -->
{{</* figure src="image.jpg" title="图片标题" */>}}

<!-- 使用自定义短代码 notice.html -->
{{</* notice warning */>}}
这是一条警告信息!
{{</* /notice */>}}

static/ — 静态资源目录

存放不需要处理的静态文件,Hugo 构建时会将这些文件原样复制到输出目录的根路径。

</> PLAINTEXT
static/
├── images/
│   ├── logo.png
│   └── favicon.ico
├── css/
│   └── custom.css
├── js/
│   └── main.js
└── robots.txt

在模板中引用:

</> HTML
<img src="/images/logo.png" alt="Logo">
<link rel="stylesheet" href="/css/custom.css">

assets/ — 资源处理目录

与 static/ 不同,assets/ 中的文件会经过 Hugo Pipes 管道处理(压缩、编译、指纹等)。

</> PLAINTEXT
assets/
├── scss/
│   ├── main.scss
│   └── _variables.scss
├── js/
│   └── app.js
└── images/
    └── hero.jpg

在模板中使用 Hugo Pipes 处理:

</> HTML
{{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">

Hugo Pipes 常用函数:

函数 说明
toCSS 编译 SCSS/SASS 为 CSS
minify 压缩资源文件
fingerprint 添加内容哈希(用于缓存破坏)
js.Build 打包 JavaScript(支持 ESM)
images.Resize 调整图片尺寸

archetypes/ — 内容模板目录

当使用 hugo new 命令创建新内容时,Hugo 会使用此目录中的模板文件作为新文件的初始内容。

</> PLAINTEXT
archetypes/
├── default.md     # 默认模板
└── posts.md       # posts 目录专用模板

default.md 示例

</> MARKDOWN
---
title: "{{ replace .File.ContentBaseName "-" " " | title }}"
date: {{ .Date }}
draft: true
tags: []
categories: []
---

## 摘要

在此处写文章摘要...

## 正文

在此处写正文内容...

使用命令创建新文章:

</> BASH
# 使用 default.md 模板
hugo new posts/my-new-post.md

# 使用指定模板
hugo new --kind posts posts/another-post.md

data/ — 数据目录

存放结构化数据文件(TOML、YAML、JSON、CSV),可在模板中通过 .Site.Data 访问。

</> PLAINTEXT
data/
├── authors.yaml
├── team.json
└── config/
    └── social.toml

示例:authors.yaml

</> YAML
- name: 张三
  email: zhangsan@example.com
  bio: "前端工程师,热爱开源"
- name: 李四
  email: lisi@example.com
  bio: "后端开发者,Go 语言爱好者"

在模板中使用:

</> HTML
{{ range .Site.Data.authors }}
  <div class="author">
    <h3>{{ .name }}</h3>
    <p>{{ .bio }}</p>
  </div>
{{ end }}

i18n/ — 国际化目录

存放多语言翻译文件,支持网站国际化(i18n)。

</> PLAINTEXT
i18n/
├── zh-CN.yaml
└── en.yaml

zh-CN.yaml 示例

</> YAML
readMore:
  other: 阅读更多
publishedOn:
  other: 发布于
tags:
  other: 标签
home:
  other: 首页

在模板中使用:

</> HTML
<a href="{{ .Permalink }}">{{ i18n "readMore" }}</a>

themes/ — 主题目录

存放 Hugo 主题,每个主题本身就是一个完整的 Hugo 项目结构。

</> PLAINTEXT
themes/
└── ananke/
    ├── archetypes/
    ├── assets/
    ├── layouts/
    ├── static/
    └── theme.toml

安装主题的方式:

</> BASH
# 方式一:Git Submodule(推荐)
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke

# 方式二:Hugo Modules(现代方式)
hugo mod init github.com/yourname/yoursite
# 在 hugo.toml 中配置

public/ — 构建输出目录

运行 hugo 命令后,生成的静态网站文件会输出到 public/ 目录。此目录通常不纳入版本控制(添加到 .gitignore)。

</> PLAINTEXT
public/
├── index.html
├── posts/
│   ├── index.html
│   └── my-post/
│       └── index.html
├── css/
├── js/
└── sitemap.xml

常用命令速查

</> BASH
# 创建新站点
hugo new site mysite

# 本地开发服务器(包含草稿)
hugo server -D

# 构建生产版本
hugo

# 创建新内容
hugo new posts/hello-world.md

# 指定输出目录
hugo --destination ./dist

# 查看 Hugo 版本
hugo version

文件优先级总结

当主题和项目根目录存在同名文件时,项目根目录优先级更高,这使得你可以轻松覆盖主题的任意文件:

</> PLAINTEXT
优先级(高 → 低):
项目 layouts/ > 项目 assets/ > 主题 layouts/ > 主题 assets/

总结

目录/文件 核心作用
hugo.toml 网站全局配置
content/ Markdown 内容文件
layouts/ Go 模板,控制页面结构
static/ 静态资源,原样输出
assets/ 需要处理的资源(SCSS、JS 等)
archetypes/ hugo new 的内容模板
data/ 结构化数据,供模板使用
i18n/ 多语言翻译字符串
themes/ 主题文件
public/ 最终构建输出(不提交 Git)

掌握这些目录的职责分工,就能高效地组织和开发 Hugo 项目。Hugo 的设计哲学是约定优于配置,遵循目录结构规范,框架会自动完成大部分工作。


本文生成时间:2026-03-25 08:41:49 CST

评论

搜索站内内容

输入关键词开始搜索