Hugo 学习笔记（一）：从安装到本地预览，半小时搭起一个静态博客

这个小站本身就是用 Hugo 搭的。折腾下来最大的感受就是快—— 本地几百篇文章 hugo 构建一次只要几十毫秒，改一个字保存，浏览器几乎瞬间刷新。 这篇是我从零开始学 Hugo 的第一篇笔记，记录"装好到能在浏览器里看到自己文章"的完整流程。

为什么选静态生成器

传统博客（WordPress 之类）是每次访问都让服务器查数据库、拼页面；而 Hugo 这类 静态站点生成器（SSG） 是在本地把 Markdown 提前渲染成一堆纯 HTML，上传到服务器 后由 Nginx 直接往外发。好处很实在：

• 快：没有数据库、没有后端逻辑，Nginx 发静态文件能跑到网卡上限。
• 安全面小：服务器上没有可被注入的动态程序，漏洞少一大截。
• 内容即文件：文章就是 .md 文件，Git 管理、随便备份、换主机直接拷贝。

1. 安装 Hugo

macOS 用 Homebrew 一行搞定（Linux/Windows 见官方安装文档）：

brew install hugo

注意要装 extended 版本，它支持 WebP 图片处理、Sass 编译等功能，很多主题（包括 我用的 PaperMod）会用到。装完验证一下：

hugo version
# hugo v0.165.0 ...+extended darwin/arm64 ...

2. 新建站点

一条命令生成整套目录骨架：

hugo new site myblog

它会在当前目录建一个 myblog/，并贴心地提示接下来要做的 5 件事：装主题、改配置、 建内容、起服务。生成的目录结构是这样的：

各目录的用途先有个印象：

3. 装一个主题

没有主题的站点是"裸"的——直接构建会警告 found no layout file，因为没有任何模板。 主题去 themes.gohugo.io 挑，我这个站用的是 PaperMod。

推荐用 Git 子模块（submodule）安装，方便以后升级主题：

cd myblog
git init
git submodule add --depth=1 \
  https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

然后在 hugo.toml 里启用主题、顺手填上站点信息：

baseURL = "https://blog.example.com/"
languageCode = "zh-cn"
defaultContentLanguage = "zh-cn"
title = "我的小站"
theme = "PaperMod"

4. 写第一篇文章

用命令新建内容文件，它会按 archetypes/ 模板自动填好 front matter：

hugo new content posts/hello.md

打开 content/posts/hello.md，开头那一段用 --- 包起来的叫 front matter（元信息）， 下面是 Markdown 正文：

---
title: "你好，Hugo"
date: 2026-08-30T10:30:00+08:00
draft: true
tags: ["随笔"]
---

正文从这里开始写，**Markdown** 语法照常。

有个关键开关：draft: true 的文章默认不会发布。本地预览时要带 --buildDrafts 才能看到草稿；正式发布前记得改成 false（或删掉这行）。

5. 本地实时预览

Hugo 内置了开发服务器，带热更新：

hugo server --buildDrafts

看到 Web Server is available at http://localhost:1313/ 就成了。浏览器打开这个地址， 之后每次保存文件，页面会自动重新构建并刷新，终端里还能看到"哪篇文章被重新渲染了"。 这就是 Hugo 最爽的地方：改完即见，构建快到几乎无感。

小结

到这里，一个能本地预览的 Hugo 博客就跑起来了。回顾整条链路其实就五步：

brew install hugo          # 装
hugo new site myblog       # 建站
git submodule add <主题>    # 装主题
hugo new content posts/x.md # 写文章
hugo server --buildDrafts  # 预览

下一篇我会接着记：内容怎么组织（Page Bundle 与图片）、模板查找规则、以及怎么把本地 构建好的静态文件部署到自己的服务器上。