如何使用Hugo+github搭建博客

序言

这是这个博客的第一篇文章，所以自然要记录怎么建立这个博客，以防后面换电脑导致博客丢失。

如何使用Hugo搭建静态博客

下载Hugo

首先去搜索Hugo官网，也就是这个地址点击这个按钮进入github页面后点击这个tags 选择最新版本拉到最下面之后选择下面这个解压完成之后就可以看到这几个文件了

使用Hugo配置主题

打开命令行，进入Hugo的安装目录，比如我的目录是E:\Hugo_blog\hugo_extended_0.136.5_windows-amd64 最简单的方法就是在地址栏输入cmd，然后回车，进入命令行，并且进入当前目录输入hugo new site zhhHugoBlog创建新站点，然后进入目录cd zhhHugoBlog 由于进入了新目录之后没有hugo.exe文件，所以我们需要把刚才下载的Hugo解压后的目录下的hugo.exe文件复制到zhhHugoBlog目录

进来之后是什么都没有的，所以我们需要一个新的主题来开始写博客，这里我推荐的主题是stack 首先进入Hugo官网，点击这个theme按钮如图所示的第三个就是然后依次点击如下按钮把下载来的zip文件解压到zhhHugoBlog\themes目录下并且把这个主题的文件夹改个名字，把后面的版本号给去掉，后面说配置的时候会说原因的

还没完，我们需要把这两个文件复制下来，放到主目录下然后把主目录下的hugo.toml给删了，这个文件和刚刚复制过来的hugo.yaml是一样的，我们只需要一个进入这个目录，并且把这个文件夹给删了这个目录下面就是我们的博客，每一篇博客都是一个独立的文件夹，他里面用到了油管的链接，需要翻墙才能正常加载，我们不需要，所以就直接删了，避免卡顿

创建文章，并且开始写博客

打开刚刚的控制台，输入hugo new post/如何使用Hugo+github搭建博客/index.md创建新文章回到控制台，输入hugo server -D启动本地服务器，实时预览复制控制台给的网址，在浏览器打开即可看到刚刚的主题和文章此后写博客大抵都是这个流程，博客的内容在index.md文件里面修改就行了如果要支持多语言的话，index.md还需要加上语言标识符，比如index.zh-cn.md或者index.en.md，但是我没有打算做英文的博客，所以就只用index.md了，后面讲配置的时候会说怎么把多语言给去掉的

Hugo常用命令

1
2
3
4


hugo new site my-blog # 创建新站点
hugo new post/my-first-post.md # 创建新文章
hugo server -D # 启动本地服务器，实时预览
hugo -d public # 生成静态文件

配置Hugo主题

stack主题配置

进入主题目录，打开hugo.yaml文件，这个就是stack主题提供的默认配置文件，我们需要作亿点点修改来介绍一下配置文件里面的参数 baseURL: 这个参数是网站的根目录，之后会修改成github上面的仓库地址作为我们的博客的根目录 languageCode: 这个参数是网站的默认语言，可以不用改，没什么影响 theme: 这个参数就是看你要使用哪一个主题，比如说我们这里使用的是stack主题，那么就要stack主题的文件夹的名字，所以我们刚刚把主题文件夹后面的版本号删掉之后就是这个配置文件的默认值了 title: AI说[这个参数是网站的标题，可以改成你喜欢的标题]，但是我没有找到这个参数有什么用，建议删掉 paginate: 每一页有多少篇文章，有些版本可能删掉了，但是没有关系，我们可以自己加上来 copyright: 版权信息，可以删掉，也可以加上自己的信息，对应的是这里

语言设置: title和subtitle: 这两个参数是网站的标题和副标题，对应的就是这两个地方当我们把语言删掉只剩一个中文的时候，网页上对应的语言设置就没了，了却了一些烦恼，记得把hasCJKLanguage改成true，会让字数统计变得准确一点这几个都是没有什么用的东西，直接看图片的注释就好了

接下来的属性都是在params下面的 footer: 网站的页脚，表示博客是从哪一年开始的，如果距今超过一年，就会显示xxxx-xxxx dateFormat中的published：用来设置文章发布日期的格式，lastUpdated：应该是文章最后一次更新时间的格式 sidebar：设置头像和头像下面的表情的，要提一下的是头像的路径在这里，主题根目录下也有，但是站点根目录的优先级比较高，所以在站点根目录下放置一份就好 article：math属性是用来开启数学公式的，需要设置写数学公式的时候开启。toc：表示是否显示目录，true表示显示，false表示不显示。readingTime：显示文章阅读时间，没什么用，开不开都行。license：文章末尾的版权信息，可以删掉，也可以加上自己的信息。 comments: 评论功能，这个图里面的整个comments下面都是可选的评论框架。使用起来很简单，参考这片博客就行了如何给Hugo博客添加评论功能特别注意一下utterances，这个是完全免费的。这里的就是widgets界面右边的功能栏，homepage对应主页的几个功能，page的这个是表头这几个都没什么用，也不知道干嘛的，不管他就好，colorScheme可以设置主题颜色，但是亮暗两种就够用了，先不管。这里就是对应的这个，可以转到自己其他的页面去看看，比如B站

最后还有首页的几个文件在这里面改。

部署到github

常规部署

首先需要自己去下载git，然后用指令初始化一下账号信息新建一个仓库，名字可以随意之后立刻把仓库的网址复制到配置文件的baseURL参数中。特别注意，如果你的仓库不是github名.github.io，那么你需要在URL后面加上刚刚的仓库名作为子路径。

删除掉这里的public 然后在控制台输入hugo -D重新生成静态文件之后进入public按照github的提示上传文件，只有第二步需要修改，改成git add . 如果部署失败，有可能是git没有初始化用户名导致的

上传成功之后，来到github仓库的setting这里选择main分支点击save 过一会之后刷新，就可以看到你得博客了。如果看到这种失败，这种是因为网络问题导致的，多试几次。

自动部署

上传的私有仓库

在根目录下面创建一个.gitignore文件，并且写下以下信息，把几个不需要的文件排除掉之后按照常规部署的操作来一遍，但是这一次是上传根目录的文件，不再是public了，记得把这一次的仓库设置为私有。

生成token准备自动部署

首先到github上生成一个token，这个token可以用来自动部署，而不是用自己的账号密码。按以下步骤点击。把repo和workflow勾选上，然后点击generate token，复制生成的token 把token作为参数添加到这个仓库的Secrets里面(防止出现明文泄露)，名字随便取，比如Hugo_TOKEN

私有仓库自动部署

在根目录下连续新建三层文件，最后的文件名随便取，必须是yaml格式，之后把如下内容复制进去，记得替换一下关键信息

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35



name: deploy

# 代码提交到main分支时触发github action
on:
  push:
	branches:
	  - main

jobs:
  deploy:
	runs-on: ubuntu-latest
	steps:
		- name: Checkout
		  uses: actions/checkout@v4
		  with:
			  fetch-depth: 0

		- name: Setup Hugo
		  uses: peaceiris/actions-hugo@v3
		  with:
			  hugo-version: "latest"
			  extended: true

		- name: Build Web
		  run: hugo -D

		- name: Deploy Web
		  uses: peaceiris/actions-gh-pages@v4
		  with:
			  PERSONAL_TOKEN: ${{ secrets.你的token变量名 }}
			  EXTERNAL_REPOSITORY: 你的github名/你的仓库名
			  PUBLISH_BRANCH: main
			  PUBLISH_DIR: ./public
			  commit_message: auto deploy

对我来说就是只改这里

自动部署测试

上述做完之后进入根目录，打开cmd，连续输入以下命令 git add . git commit -m "update" git push

由于更换了电脑，可能是设置不太一样了，导致命令也会有差异，git push也可以换成git push origin main