Hugo stack 主题配合 Github 搭建个人博客

Hugo 安装

Hugo Windows 版本安装，需要先安装依赖的东西：

Golang
Git

Golang 安装

1）进入：Golang 官网下载地址

2）选择 Windows 版本的安装包

3）安装 Golang，需要记住安装的路径（安装路径比如：D:\Program Files\Go ）

配置 Golang 环境变量

1）右键【我的电脑】-【属性】-【高级系统设置】-【环境变量】

2）在【系统变量】中，新建：

- GOROOT（配置 GO 的安装目录，必填，`D:\Program Files\Go` ）
- GOPROXY（配置 GO 的代理加速，这个是固定的：https://goproxy.io）
- GOPATH（配置 GO 的项目目录，非必填，可忽略）

如图：

3）同时在【系统变量】-【Path】中，加入：

GOROOT 的路径：D:\Program Files\Go
GO 的 bin 目录：%GOROOT%\bin

如图：E:\goproject 和 %GOPATH%\bin 是我的 Go 项目目录（这两个可忽略）

4）使用 cmd 窗口，执行 go version 出现版本号，即配置完成

1
2


C:\Users\Administrator>go version
go version go1.23.0 windows/amd64

Git 安装

1）进入官网：Git - Downloads (git-scm.com)

2）选择与自己电脑匹配的 Windows 版本包，安装过程中有勾选的地方，默认就行。

[!NOTE]

安装 Git 是为了推送到 Github 上。

Hugo 安装

Windows | Hugo官方文档 (opendocs.io)

在 Windows 上，使用开源的包管理器进行安装，我使用的是 Chocolatey 包管理器进行下载。

1）桌面【Shift + 右键】打开 Windows PowerShell ，注意不是打开 cmd 。

2）执行

1

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

3）安装 Chocolatey 完成后，再执行

1

choco install hugo-extended

4）查看 Hugo 版本

1
2


C:\Users\Administrator>hugo version
hugo v0.134.3-5fb333b9f5ff4ec018f9d78910177d0bec1befb0+extended windows/amd64 BuildDate=2024-09-19T14:28:20Z VendorInfo=gohugoio

然后，这个安装路径大概是在 C:\ProgramData\chocolatey\lib\hugo-extended\tools ，这个路径下，有一个 hugo.exe 和 hugo_extended_0.134.3_windows-amd64.zip 压缩包，把这个压缩包复制贴贴到你想存放的位置上，解压出来。比如我放到 F:\hugo

Hugo 配置

创建站点

上边解压的位置 F:\hugo\hugo_extended_0.134.3_windows-amd64\，在解压的目录中会有一个 hugo.exe 。

在这里使用【Shift + 右键】选择【在此处打开 Powershell 窗口】，执行

1

hugo new site blog    (blog是博客目录名称，任意起)

下载主题

在 blog/themes/ 目录下边，【Shift + 右键】选择【Git Bash here】，执行：

1

git clone https://github.com/CaiJimmy/hugo-theme-stack.git

我这里下载的是 Stack 主题，其他主题也一样的：git clone 主题地址 命令

替换主题示例文件

[!NOTE]

每个主题都有 exampleSite 文件夹，里边存放着主题的示例文件。

1）将 blog/themes/hugo-theme-stack/exampleSite 里的 hugo.yaml 和 content 目录都复制到 blog/ 目录下替换掉（注意先备份一下）

2）* 因为 Stack 主题，我把content/post 下的内容都删了（我的这个版本不删的话，后边启动 hugo 服务会报错）。这个是存放文章的目录，也可以直接在这里建随意建一个 .md 文件，根据示例里的文章改改标题啥的。

Hugo 启动

在 cmd 里执行

1

hugo server

建议这样：

1
2


# 自动重定向，修改配置或内容后自动更新，发布草稿内容
hugo server --navigateToChanged -D 

然后可以在 http://localhost:1313/ 地址上看到 blog 的内容

主题美化

单独写一篇，总结主题美化的内容。也可以不美化，反正主要还是内容为主。

发布文章

1）在 hugo/content/post/ 目录下，新建 .md 文件

2）或者在 Hugo 站点目录下，使用命令 hugo new content/post/示例.md

注意：

文章的头部至少需要以下信息，然后 draft = false 表示这篇文章不是草稿。

1
2
3
4
5
6
7


+++
title = 'Hugo stack 主题配合 Github 搭建个人博客'
date = 2024-10-15T09:08:41+08:00
draft = false
categories = ["Hugo"]
tags = ["Hugo"]
+++

保存后，可以上 http://localhost:1313/ 进行本地预览。

推送到 Github

1）需要要到 Github 新建一个新的仓库

2）仓库名称必须得是 username.github.io ，不然托管不了的

3）仓库必须是公开的，公开的，托管站点是免费的

首次推送

1）进去到 Hugo 站点目录里，打开 Powershell ，执行

1

# hugo

会在 Hugo 站点目录下生成一个 public 目录

2）进去 public 目录，【Shift + 右键】选择【Git Bash here】，打开 git 命令窗口，执行

1
2
3
4
5


git init    ##初始化仓库
git remote add origin https://github.com/username/username.github.io.git   ##链接远程仓库
git add .
git commit -m "first commit"	# 提交
git push -u origin main			# 推送

后续推送

进去 public 目录，【Shift + 右键】选择【Git Bash here】，打开 git 命令窗口，执行

1
2
3


git add .
git commit -m "add blog"
git push -u origin main