Hugo 是最受欢迎的静态网站生成器之一，以其速度和灵活性而闻名。在本指南中，我们将介绍开始使用 Hugo 所需了解的一切。
什么是 Hugo？#
Hugo 是一个用 Go 语言编写的快速现代静态网站生成器。它将你用 Markdown 编写的内容转换为包含 HTML、CSS 和 JavaScript 的完整网站。
Hugo 的主要优势#
- 速度: 在毫秒内构建网站
- 灵活性: 支持各种内容类型和结构
- 无依赖: 单一二进制文件，无外部依赖
- 主题: 大型美观主题生态系统
- Markdown: 使用简单的 Markdown 格式编写内容
安装#
macOS#
# 使用 Homebrew
brew install hugo
# 使用 MacPorts
sudo port install hugo
Windows#
# 使用 Chocolatey
choco install hugo
# 使用 Scoop
scoop install hugo
Linux#
# Ubuntu/Debian
sudo apt install hugo
# Arch Linux
sudo pacman -S hugo
# 或从 GitHub releases 下载二进制文件
Creating Your First Site#
1. Create a New Site#
hugo new site my-awesome-blog
cd my-awesome-blog
2. Add a Theme#
# Initialize git repository
git init
# Add a theme as submodule
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
# Add theme to config
echo "theme = 'ananke'" >> hugo.toml
3. Create Your First Post#
hugo new posts/my-first-post.md
4. Start the Development Server#
hugo server -D
Your site will be available at http://localhost:1313
Hugo Directory Structure#
my-site/
├── archetypes/ # Content templates
├── assets/ # Global assets (SCSS, JS, images)
├── content/ # Your content files
├── data/ # Data files (JSON, YAML, TOML)
├── layouts/ # Template files
├── static/ # Static files (images, CSS, JS)
├── themes/ # Themes directory
├── hugo.toml # Configuration file
└── public/ # Generated site (after hugo build)
Content Management#
Front Matter#
Every content file starts with front matter containing metadata:
---
title: "My Post Title"
date: 2025-01-01T12:00:00+08:00
draft: false
description: "Post description"
categories: ["Category"]
tags: ["tag1", "tag2"]
---
Content Organization#
content/
├── _index.md # Homepage content
├── about.md # About page
├── posts/ # Blog posts
│ ├── _index.md # Posts section page
│ ├── post-1.md
│ └── post-2.md
└── projects/ # Projects section
├── _index.md
└── project-1.md
Configuration#
Hugo uses hugo.toml (or hugo.yaml/hugo.json) for configuration:
baseURL = 'https://example.com'
languageCode = 'en-us'
title = 'My Awesome Blog'
theme = 'ananke'
[params]
author = 'Your Name'
description = 'My awesome blog description'
[menu]
[[menu.main]]
name = 'Home'
url = '/'
weight = 10
[[menu.main]]
name = 'Posts'
url = '/posts/'
weight = 20
Building and Deployment#
Build for Production#
hugo
This generates the static site in the public/ directory.
Deployment Options#
- GitHub Pages: Free hosting for static sites
- Netlify: Continuous deployment from Git
- Vercel: Fast global CDN
- AWS S3: Scalable cloud storage
- Traditional Web Hosting: Upload to any web server
Tips for Success#
- Start Simple: Begin with a basic theme and customize gradually
- Content First: Focus on creating quality content before heavy customization
- Learn Markdown: Master Markdown syntax for efficient writing
- Use Shortcodes: Leverage Hugo’s shortcodes for rich content
- Optimize Images: Use Hugo’s image processing features
- Test Locally: Always test changes with
hugo server
Conclusion#
Hugo is an excellent choice for building fast, modern websites. Its simplicity, speed, and flexibility make it perfect for blogs, documentation sites, portfolios, and more.
Start with the basics, experiment with themes, and gradually explore Hugo’s advanced features as you become more comfortable with the platform.
Happy blogging with Hugo! 🚀