搭建 Hugo 博客是一个非常棒的选择。Hugo 是目前世界上最快的静态网站生成器之一，使用 Go 语言编写，生成的网页非常安全、快速，而且易于部署（例如部署在 GitHub Pages 上）。

以下是搭建 Hugo 博客的极简保姆级教程，分为安装、建站、配置主题、写作和预览五个步骤。

第一步：安装 Hugo
你需要先在电脑上安装 Hugo 环境。

  1. macOS 用户 (推荐使用 Homebrew) 打开终端 (Terminal)，输入：
1
brew install hugo
  1. Windows 用户 (推荐使用 Chocolatey 或 Scoop) 如果你有 Chocolatey：
1
choco install hugo -confirm

或者直接去 Hugo GitHub Release 页面下载 hugo_extended_xxxx_windows-amd64.zip，解压后将 hugo.exe 的路径添加到系统的环境变量 PATH 中。
3. 验证安装 在终端/命令行输入以下命令，如果出现版本号说明安装成功：

1
hugo version

第二步：创建新站点
选一个你想存放博客代码的文件夹，在终端中运行：

1
hugo new site myblog

(注：myblog 是你的文件夹名字，你可以随意修改)

进入该文件夹：

1
cd myblog

此时你的目录结构应该是这样的：

  • hugo.toml (或者是 config.toml，这是核心配置文件)

  • content/ (存放文章)

  • themes/ (存放主题)

  • layouts/, static/ 等其他文件夹

第三步：安装主题 (Theme)
Hugo 必须要有主题才能显示内容。最推荐的方式是使用 Git 将主题作为子模块添加（方便以后更新）。

这里以官方推荐的 Ananke 主题为例（你以后可以换成更漂亮的，如 PaperMod 或 Stack）：

  1. 初始化 Git 仓库（如果还没做）：
1
git init
  1. 下载主题：
1
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
  1. 在配置文件中启用主题： 打开 hugo.toml 文件，在末尾添加一行：
1
theme = "ananke"

第四步：创建第一篇文章
不要手动去 content 文件夹里新建文件，使用 Hugo 命令可以自动生成带有标准“前置元数据 (Front Matter)”的文件：

1
hugo new content posts/my-first-post.md

现在打开 content/posts/my-first-post.md 文件，你会看到类似这样的内容：

1
2
3
4
5
6
7
8
---
title: "My First Post"
date: 2023-10-27T10:00:00+08:00
draft: true
---

这里写你的正文内容...
你好，世界！这是我的第一篇 Hugo 博客。

⚠️ 重要提示： 注意那个 draft: true。这表示文章是草稿。在正式发布或不带参数预览时，它不会显示。想发布时，将其改为 false。

第五步：本地预览
在终端输入以下命令启动本地服务器：

1
hugo server -D

(注：-D 参数的意思是 buildDrafts，即即使是草稿也显示出来，方便你一边写一边看)

如果一切顺利，你会看到终端提示： Web Server is available at http://localhost:1313/

打开浏览器访问 http://localhost:1313/ ，你应该就能看到你的博客了！

进阶：如何部署到互联网？
最简单且免费的方式是使用 GitHub Pages 或 Vercel/Netlify。

推荐方案：使用 Vercel (最简单，自动化)

  1. 将你的 myblog 文件夹上传到你的 GitHub 仓库。

  2. 去 Vercel 注册一个账号，选择 “Add New Project”。

  3. 导入你刚才的 GitHub 仓库。

  4. Framework Preset 选择 Hugo。

  5. 点击 Deploy。

  6. Vercel 会自动给你分配一个域名（例如 myblog.vercel.app），以后你只要向 GitHub 推送代码，博客就会自动更新。

常见问题与提示

  • 图片放哪里？ 静态图片（如 logo、文章插图）请放在 static 文件夹下。例如放了 static/images/a.jpg，在文章里引用时直接写 图。

  • 我想换主题怎么办？ 去 Hugo Themes 挑选喜欢的主题，按照该主题的 README 说明，将其 clone 到 themes/ 文件夹，并修改 hugo.toml 中的 theme 字段即可。