Hugo 静态网站搭建过程(Windows系统)

相关资料：

Hugo 官网

Hugo 中文文档

Hugo 主题

参考文章：

Hugo 入门 安装（Windows）

Building Blog Using Hugo | Honghao Chen

1. Hugo 安装
(1) 下载 Hugo

在 Github 下载 Hugo 最新”拓展”版本

Hugo 下载页面：https://github.com/gohugoio/hugo

截至 2025.04.05，对应 Windows系统 应下载

hugo_extended_0.145.0_windows-amd64.zip

(2) 解压并提取 hugo.exe 到你所选定的位置

D: …\Hugo\bin 目录下 放置 hugo.exe

(3) 配置环境变量

新建系统变量

添加环境变量

1
2
%Hugo% # 指向系统变量名"Hugo"的变量值(系统路径)
%Hugo%\bin # 指向上述系统路径下的bin目录
(4) 检查安装结果

打开cmd（Win+R -> 输入cmd -> Ctrl+Shift+Enter）

1
2
# 查看 Hugo 版本信息
hugo version

若弹出版本信息就说明配置没问题。

2. Git 部分

部分参考：Windows安装Git(免安装版)_git免安装版-CSDN博客

Git下载页面：Git - Downloads

(1) 下载PortbaleGit(Git便携版)
(2) PortbaleGit 自解压到你所选定的位置
(3) 配置环境变量

(“设置”->”系统”->”高级系统设置”->”环境变量”->”系统变量”)

新建系统变量，指向PortableGit安装文件夹位置

添加环境变量

(“系统变量”->”Path”->”编辑”->”新建”->添加三行路径)

1
2
3
%PortableGit%	# 指向PortableGit的根目录
%PortableGit%\bin	# 指向PortableGit的bin目录
%PortableGit%\usr\bin	# 指向PortableGit的usr\bin目录

(4) 检查安装结果

打开cmd（Win+R -> 输入cmd -> Ctrl+Shift+Enter）

1
2
3
# 查看 Git 的版本信息
git --version
git -v #简化输入

若弹出版本信息就说明配置没问题。

(5) 在文件夹背景右键菜单中添加 Git Bash 快捷方式

打开注册表编辑器（Win+R -> 输入regedit -> Ctrl+Shift+Enter）

导航栏中输入：计算机\HKEY_CLASSES_ROOT\Directory\Background\shell

创建新建：在”shell”下右键点击，选择”新建”->”项”，命名为”GitBash”

创建”command”子键：在”GitBash”下右键点击，选择”新建”->”项”，命名为”command”

设置命令：双击”command”下的默认值，其值设置为：”自定义的Git安装文件夹路径\bin\bash.exe”

添加图像：”GitBash”下新建字符串值，命名为”Icon”，其数值数据设置为：”自定义的图像路径”

验证：

3. 初始化 Hugo 网站
(1) 初始化新的 Hugo 博客项目

打开cmd（Win+R -> 输入cmd -> Ctrl+Shift+Enter）

1
2
# 自定义指定位置，初始化新的 Hugo 博客项目
hugo new site /path/to/site

该操作完成后，指定文件夹根目录下 文件分布 如下图所示：

(2) 创建文章
1
2
# 跳转到 (你先前所指定的)Hugo博客项目根目录
cd /d /path/to/site
1
2
# 在post目录下创建新文章
hugo new post/xxx.md

(3) 安装 Hugo主题

前往 Hugo 主题 页面，挑选自己喜欢的主题下载：

  • 如果你尚且不会使用 Git：

    直接下载对应主题压缩包，解压后将文件夹放到 博客项目根目录/themes 文件夹下；

  • 使用 Git：

    参照 对应Hugo主题 作者给出的安装命令下载；

主题放置位置如图：

打开 博客项目根目录 下的 .toml 文件(目前Hugo版本为hugo.toml)：

在 hugo.toml 最后添加一行

1
theme = "对应主题文件夹名称"

(4) 运行本地服务器并浏览
1
2
3
4
# 启用本地服务器浏览博客，默认访问端口1313
# -D：在构建时同时包含草稿内容
# 浏览器输入 http://localhost:1313 以访问
hugo server -D

使用本地服务器浏览的博客如图所示

结束浏览后，按 Ctrl+C 关闭本地服务器。

Hugo 网站分析

目前对于Hugo的了解

基于Jamstack技术栈，使用golang开发，markdown渲染使用goldmark，主题使用tailwind

另附：使用 Tailwind CSS 创建 Hugo 主题

参考文章：如何使用 Tailwind CSS 创建 Hugo 主题

1
hugo new site hugo-tailwind
1
2
# 创建一个(-y 默认的)新的 npm 项目
$ npm init -y

1
2
# 使用 npm 安装 tailwindcss，利用 postcss-cli命令行工具运行 PostCSS(并添加 Autoprefixer  插件)，并将所有安装的包添加到项目的开发依赖
$ npm install -D tailwindcss postcss postcss-cli autoprefixer

1
2
# 使用 PostCSS 配置，使用 CLI 初始化配置文件
$ npx @tailwindcss/cli init -p

1
2
# hugo 工作空间内
hugo new site Tailwind
1
2
# themes 文件夹内
npm init -y

Tailwind CLI - Tailwind CSS

1
2
#
npm install tailwindcss @tailwindcss/cli
1
npx @tailwindcss/cli init
1
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch