Hugo博客搭建教程（二）：创建站点与主题安装

上一篇把环境搭好了，这篇开始创建Hugo站点和安装主题。

创建Hugo站点

打开命令行

进入工作目录：
- 按 Win + R，输入 cmd，回车
- 输入命令切换到工作目录：
```
cd /d D:\myblog
```
💡 目录切换：执行命令后，命令提示符的路径会变为"D:\myblog>"，表示已成功切换到工作目录。

创建新站点

执行创建命令：
```
hugo new site myblog
```
查看创建结果：
```
dir
```
应该看到创建了 myblog 文件夹
💡 创建成功：Hugo会显示"Congratulations! Your new Hugo site is created"的成功信息，并列出创建的目录结构。dir命令会显示新创建的myblog文件夹。

查看站点结构

进入站点目录：
```
cd myblog
```
查看目录结构：
```
dir
```

标准Hugo站点结构：

myblog\
├── archetypes\     # 文章模板
├── assets\         # 资源文件
├── content\        # 内容目录
├── data\           # 数据文件
├── layouts\        # 布局模板
├── static\         # 静态文件
├── themes\         # 主题目录
└── hugo.toml       # 配置文件

💡 目录结构：在文件资源管理器中可以看到Hugo创建的标准目录结构，每个文件夹都有特定的用途。其中themes文件夹现在是空的，我们接下来会在其中安装主题。

🎨 第二步：下载PaperMod主题

为什么选择PaperMod？

PaperMod是一个优秀的Hugo主题，特点：

🌙 支持深色/浅色模式
📱 完全响应式设计
⚡ 加载速度快
🔍 内置搜索功能
📊 丰富的功能配置

手动下载主题

访问主题仓库：https://github.com/adityatelange/hugo-PaperMod
下载主题文件：
- 点击绿色的 “Code” 按钮
- 选择 “Download ZIP”
- 下载 hugo-PaperMod-master.zip
💡 下载说明：在GitHub仓库页面右上角有一个绿色的"Code"按钮，点击后会显示下拉菜单，选择"Download ZIP"即可下载整个主题的压缩包。

安装主题

解压主题文件：
- 解压下载的zip文件
- 得到 hugo-PaperMod-master 文件夹
复制到主题目录：
- 将 hugo-PaperMod-master 文件夹复制到 D:\myblog\myblog\themes\
- 重命名为 PaperMod
最终目录结构：
```
D:\myblog\myblog\themes\PaperMod\
├── assets\
├── layouts\
├── static\
├── LICENSE
├── README.md
└── theme.toml
```
💡 主题结构：PaperMod主题包含多个文件夹和文件，其中assets、layouts、static是主要的功能目录，theme.toml是主题的配置文件。

⚙️ 第三步：基础配置

编辑配置文件

打开配置文件：
- 使用文本编辑器打开 D:\myblog\myblog\hugo.toml
- 推荐使用VS Code或记事本

替换配置内容：

baseURL = '/'
languageCode = 'zh-cn'
title = 'Yimi小站'
theme = 'PaperMod'

# 启用表情符号
enableEmoji = true

# 启用robots.txt
enableRobotsTXT = true

# 主要内容部分
mainSections = ["posts"]

# 分页设置
[pagination]
  pagerSize = 5

# 网站基本信息
[params]
  author = "Yimi"
  description = "分享技术、生活与思考的个人博客"
  keywords = ["博客", "技术", "生活", "思考"]

  # PaperMod 主题配置
  ShowReadingTime = true
  ShowPostNavLinks = true
  ShowBreadCrumbs = true
  ShowCodeCopyButtons = true
  ShowWordCount = true
  ShowToc = true
  ShowSearchPage = true

# 菜单配置
[[menu.main]]
  identifier = "home"
  name = "首页"
  url = "/"
  weight = 10

[[menu.main]]
  identifier = "posts"
  name = "文章"
  url = "/posts/"
  weight = 20

[[menu.main]]
  identifier = "about"
  name = "关于"
  url = "/about/"
  weight = 30

# 输出格式
[outputs]
  home = ["HTML", "RSS", "JSON"]

💡 配置文件：使用文本编辑器（如VS Code、记事本）打开hugo.toml文件，将原有内容全部替换为上述配置。注意保存时使用UTF-8编码。

保存配置

保存文件：按 Ctrl + S 保存配置文件
确认编码：确保文件以UTF-8编码保存

🚀 第四步：启动本地预览

启动开发服务器

在命令行中执行：
```
hugo server
```

查看启动信息：

Start building sites …
hugo v0.120.4+extended windows/amd64 BuildDate=2023-11-08T10:05:21Z VendorInfo=gohugoio

                   | EN
-------------------+-----
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Built in 45 ms
Watching for changes in D:\myblog\myblog\{archetypes,assets,content,data,layouts,static,themes}
Watching for file changes.
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

💡 服务器启动：Hugo会显示构建信息，包括页面数量、构建时间等。最重要的是看到"Web Server is available at http://localhost:1313/"，表示本地服务器已成功启动。

预览网站

打开浏览器：访问 http://localhost:1313/
查看效果：
- 应该看到PaperMod主题的默认页面
- 顶部有导航菜单：首页、文章、关于
- 页面显示 “Yimi小站” 标题
💡 首页预览：浏览器会显示一个简洁的白色页面，顶部有黑色的导航栏，中间显示"Yimi小站"标题。这表示Hugo和PaperMod主题已成功配置。

📝 第五步：创建第一篇文章

创建文章

新开一个命令行窗口：
- 保持之前的 hugo server 继续运行
- 新开cmd，进入站点目录：
```
cd /d D:\myblog\myblog
```
创建文章：
```
hugo new posts/hello-world.md
```
查看创建结果：
```
dir content\posts
```
💡 文章创建：Hugo会在content\posts目录中创建hello-world.md文件，dir命令会显示这个新创建的文件。

编辑文章

打开文章文件：
- 编辑 content\posts\hello-world.md

文章内容：

+++
title = "Hello World - 我的第一篇博客"
date = 2025-01-05T12:00:00+08:00
draft = false
tags = ["开始", "博客"]
categories = ["随笔"]
+++

## 🎉 欢迎来到我的博客！

这是我的第一篇博客文章，使用Hugo和PaperMod主题创建。

### 功能测试

- ✅ 支持Markdown语法
- ✅ 支持表情符号 😊
- ✅ 支持代码高亮

```bash
echo "Hello, Hugo!"

保存文件：保存后刷新浏览器查看效果
💡 文章预览：保存文件后，Hugo会自动重新构建网站。刷新浏览器首页，应该能看到新创建的"Hello World"文章出现在文章列表中。点击可以查看文章详情页面。

✅ 完成检查

确认以下项目都已完成：

Hugo站点创建成功
PaperMod主题安装完成
基础配置文件设置正确
本地服务器可以正常启动
浏览器可以访问 http://localhost:1313/
成功创建并显示第一篇文章

小结

到这里，Hugo站点创建好了，PaperMod主题也装上了，基本的配置也完成了。用 hugo server 启动后应该能看到一个简单的博客页面。

下一篇会继续完善内容结构，添加关于页面、归档页面这些，还有首页的个人介绍等。

遇到问题的话，常见的几个：

hugo server启动失败？ 检查主题是否正确安装，配置文件中theme名称是否正确。

页面显示空白？ 确认主题目录名称是 PaperMod，配置文件中 theme = 'PaperMod'。

文章不显示？ 检查文章的 draft = false，确保不是草稿状态。

上一篇：Hugo博客搭建教程（一）：环境准备与Hugo安装 下一篇：Hugo博客搭建教程（三）：内容完善与页面配置

创建Hugo站点#

打开命令行#

创建新站点#

查看站点结构#

🎨 第二步：下载PaperMod主题#

为什么选择PaperMod？#

手动下载主题#

安装主题#

⚙️ 第三步：基础配置#

编辑配置文件#

保存配置#

🚀 第四步：启动本地预览#

启动开发服务器#

预览网站#

📝 第五步：创建第一篇文章#

创建文章#

编辑文章#

✅ 完成检查#

小结#