hugo

学习Hugo博客的搭建

本教程将介绍如何使用 Hugo 和 GitHub Pages 搭建一个静态博客。Hugo 是一款功能强大的静态站点生成器，可以帮助您轻松创建美观、响应式的博客页面。GitHub Pages 则是 GitHub 提供的免费托管服务，可用于托管您的 Hugo 博客。

---

第一部分：入门与环境搭建

环境准备

首先下载所需的工具：

[Hugo](The world's fastest framework for building websites)

[Git](Git - 安装 - Git 版本控制系统)

[Go](Download and install - The Go Programming Language)

将Hugo和Git的指令添加环境变量

第二部分：创建博客

1. 创建Hugo新站点

使用 Hugo 创建新站点非常简单，在想要创建的目录下，命令行中输入以下命令：

hugo new site blog

其中blog 是博客名称，可以根据需要修改。

执行该命令后，会自动生成 Hugo 博客的标准目录结构，生成的目录如下：

blog/
├── archetypes/       # 内容模板（新建文章时的默认格式）
├── assets/           # 未编译的静态资源（如 SCSS、JS）
├── hugo.toml         # 核心配置文件（Toml 格式，也可改用 Yaml/Json）
├── content/          # 博客文章内容（核心目录，放 Markdown 文章）
├── data/             # 自定义数据文件（如 JSON/Yaml，可在模板中调用）
├── layouts/          # 自定义模板（覆盖主题模板）
├── public/           # 编译后生成的静态网站文件（部署用）
├── static/           # 静态资源（如图片、CSS、JS，会直接复制到 public）
└── themes/           # 主题文件夹（存放下载的 Hugo 主题）    

这将创建必要的配置文件和文件夹，并提示接下来如何创建一个博客。

进入新创建的站点目录，并运行以下命令进行初始化：

cd blog

2.选择主题

2.1浏览和选择主题

Hugo 提供了丰富的主题模板，您可以根据自己的喜好选择合适的主题。

官方主题仓库
第三方主题仓库

2. 2下载及应用主题(官方推荐，Hugo module)

用这种方法，目录下不会有文件。要修改主题，你需要把想修改的文件复制到目录下的同一个目录。themes``layouts

不是很推荐，想要自己配置的可以使用，如果想要快速使用的话，查看3.Git配置

这里演示stack主题，通过[官方文档下载](Getting Started | Stack)

最低要求的 Hugo 版本可以在主题的 theme.toml 文件中看到

git init

首先，把你的网站变成Hugo模块（如果你还没做过）：

hugo mod init github.com/me/my-new-blog

github.com/你的用户名/你的博客名，随便填也可以

执行成功后，项目根目录会生成一个 go.mod 文件，这是 Hugo Module 的核心配置文件，不用手动修改。

在项目根目录的 hugo.toml 文件中，添加

[[module.imports]]
path = "github.com/CaiJimmy/hugo-theme-stack/v3"

这使得 Hugo 使用了主题的最新稳定版本（发布页面可获得，可能不会与分支中最新的提交时间重合）

要将主题更新到最新版本，请执行以下命令：

hugo mod get -u github.com/CaiJimmy/hugo-theme-stack/v3
hugo mod tidy

由于版本问题，在项目根目录执行命令，指定降级到稳定兼容版（v3.28.0 经测试适配 Hugo 0.15x 系列）：

hugo mod get github.com/CaiJimmy/hugo-theme-stack/v3@v3.28.0
hugo mod tidy

2.3 预览主题

hugo server -D

成功是上面那样，这将在您的浏览器中打开一个本地服务器，您可以访问 http://localhost:1313 来查看您的博客页面。

效果如下：

这样的话一切内容就需要自己配置，非常麻烦。

3.Git配置

1. 下载合适的安装包

git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
cd themes/hugo-theme-stack
git checkout tags/v3.28.0

这种方法，就是将主题放到了themes中

2. 应用主题

进入到\themes\hugo-theme-stack\exampleSite中，这里面是官方给的stack案例

将其中的content文件和hugo.yaml文件一起复制到博客的根目录

由于hugo.toml和hugo.yaml性质一样，删除原先的hugo.toml

就可以快速配置好一个默认的页面

3.设置配置文件

Hugo 的配置文件hugo.yaml用于配置站点信息、主题、菜单等。

修改里面的内容，就可以将这个页面换为自己的内容

具体怎么配置可以查看bilibili博主Letere-莱特雷stack主题配置_哔哩哔哩_bilibili