跳过正文
  1. 博客文章/

Hugo 入门:初学者指南

·384 字·2 分钟·
Web 开发 教程 Hugo 静态网站生成器 初学者
Zayn
作者
Zayn
专注 Kubernetes、CI/CD、可观测性等云原生技术栈,记录生产环境中的实战经验与踩坑复盘。
目录

Hugo 是用 Go 编写的静态网站生成器。它把 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

写作和发布时记住几件事
#

先用简单主题把内容跑通,再按需要修改模板。文章放在 content/,用 front matter 管理标题、日期和标签;改完后先运行 hugo server,确认页面和资源路径正常,再执行生产构建。图片、shortcode 和主题升级需要分别验证。

相关文章

SlimToolkit 与 GitLab CI/CD 集成实践
·204 字·1 分钟
SRE CI/CD Docker Slimtoolkit
PVE AutoSnap 自动快照工具使用指南
·370 字·2 分钟
虚拟化 备份 PVE Proxmox AutoSnap
Raid 阵列卡 Megacli 管理工具的使用记录
·111 字·1 分钟
Linux Raid 硬件运维 Storage