Hugo 静态网站构建实战手册

快速开始

通过实践步骤快速搭建第一个 Hugo 网站

概述

Hugo 的快速开始流程旨在让你在短时间内建立一个功能完备的 Hugo 网站。这个过程强调了 Hugo 的核心优势——速度和灵活性。

准备工作

在开始之前,你需要完成以下准备工作:

安装必要工具

1. 安装 Hugo

推荐安装 extended 或 extended/deploy 版本,通过运行以下命令验证安装:

hugo version

2. 安装 Git

Hugo 项目通常需要 Git 进行版本控制和主题管理。

3. 熟悉命令行操作

Windows 用户推荐使用 PowerShell 或 Linux 终端(如 WSL 或 Git Bash),避免使用命令提示符。

创建站点

生成项目骨架

使用 Hugo 命令创建新站点:

hugo new site my-blog
cd my-blog

这将创建标准的项目目录结构:

archetypes/   - 内容模板
assets/       - 资源文件
content/      - 内容源文件
data/         - 数据文件
layouts/      - 布局模板
static/       - 静态文件
themes/       - 主题

初始化 Git 仓库

git init

添加主题

为了快速启动,我们将主题作为 Git 子模块导入。以 Ananke 主题为例:

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

在站点配置文件中指定主题:

echo 'theme = "ananke"' >> hugo.toml

添加内容

创建新页面

使用 Hugo 命令创建新的内容文件:

hugo new posts/my-first-post.md

编辑内容

新创建的内容文件位于 content/posts/my-first-post.md,默认包含 Front Matter:

---
title: "My First Post"
date: 2025-04-17T10:00:00+08:00
draft: true
---

添加你的 Markdown 内容:

## 欢迎来到我的博客

这是我的第一篇 Hugo 博客文章!

### 特性

- 快速构建
- 简单易用
- 功能强大

配置站点

编辑 hugo.toml 进行基本配置:

baseURL = 'https://example.org/'
languageCode = 'zh-CN'
title = 'My New Hugo Site'
theme = 'ananke'

[params]
  author = 'Your Name'
  description = 'My awesome blog'

开发与测试

启动开发服务器

hugo server -D

参数说明:

  • -D--buildDrafts:包含草稿内容
  • 访问 http://localhost:1313 预览网站
  • 保存文件时自动刷新

重要选项

# 绑定到所有网络接口
hugo server -D --bind 0.0.0.0

# 指定端口
hugo server -D --port 8080

# 详细输出
hugo server -D --verbose

发布站点

准备发布

生成静态文件:

hugo

或使用压缩选项:

hugo --minify

静态文件将生成在 public/ 目录中,可以部署到任何静态托管服务。

性能考量

  • 使用 --minify 压缩 HTML、CSS 和 JavaScript
  • 启用资源哈希用于缓存清除
  • 优化图片大小和格式

故障排除

常见问题

1. 主题未找到

确保主题已正确安装:

git submodule update --init --recursive

2. 内容未显示

检查 Front Matter 中的 draft: true,将其改为 draft: false 或启动服务器时使用 -D 参数。

3. 样式未生效

清除缓存并重新构建:

hugo --gc

下一步

Comments

0%