最近学习的许多东西，有温习以前学的知识，也有学的许多知识。学新的东西踩坑是无法避免的，这时就只能去网上搜索。但总有一些问题是别人从未遇到的，又不敢去stackflow提问（其实主要是英语有点差），这时就只能自己去琢磨，研究。自己这次跑通流程，但下次却又未必。于是便有用博客记录一下的想法，希望自己下次不会踩同样的坑，也希望别人下次遇到同样的问题时，能在我的博客的帮助下快速解决。所以这篇文章将主要记录我搭建这个博客从头到尾的一个过程以及中间遇到的问题与解决方案，希望对你有用。
搭建博客系统
博客系统选型
对于博客系统，我只了解过以下三种：
- WordPress,一款基于PHP的博客框架，或许因为PHP的原因，也或许是以前用过的原因，我对其印象不是那么好。
- GitBook,之前学习某些知识，有些文档就是这个写的，感觉不是很符合我的审美，也果断放弃。
- VuePress,不怎么会Vue，也就放弃了。
至于我为何选择Hugo,来源于我看到的一篇“悟空非空也”的一篇博客文章“搭建个人博客，最想推荐的 10 大框架，强烈建议收藏”，大家也可以根据自己的个人需求选择适合自己的博客系统。
博客系统构建
❗以下博客系统的搭建基于Hugo
- 博客的搭建过程主要基于以下几个文档，有能力的同学可以自己阅读
- Hugo官方文档
- Stack主题官方文档
- Stack中文文档
- giscus评论系统文档
- github GraphQL API官方文档
安装Hugo
官网在安装教程中有提到先决条件，如下图所示
不过我并未按照其配置这三种环境，我并不清楚不配置这是三种环境的问题，不过觉得并不会产生大的影响（毕竟我们并不需要从源码进行编译，使用编译好的即可），我的电脑上本身便具备Go语言环境与Git，在react中我又曾使用过过SASS，所以对于这“先决条件”，是否一定需要配置，还是自行决定。
-
Github直接下载自己系统对应的Releases的压缩包就行。Windows系统就下载下图红框的任意一个即可，推荐下载extended版。standard and extended的区别详见官网：standard and extended的区别
-
解压压缩包到任意位置
-
添加环境变量，打开设置-系统性息（可右击“此电脑”，选择属性；或右击底下的windows图标选择系统），依次点击“高级系统设置”，“环境变量”。双击打开“Path”，新增一条，位置选择自己保存Hugo的目录。
-
检验是否配置环境变量成功，在任意一个目录下，右击, 选择“在终端中打开”,输入
hugo version,换回类似于如下结果即代表配置成功
快速选择启动一个博客
以下内容参考官方文档的Quick start
-
进入你想要保存博客的文件，打开终端，输入指令hugo new site blog
-
进入创建出来的“blog”文件夹（将上面指令的“blog”可以任意更换，创建出的文件夹与指令中的名字保持一致），输入hugo server启动预览服务。
安装并配置一个好看的主题（以Stack为例）
以下内容参照Stack官方文档Getting Started和Config，以Git子模块方式安装（默认读者需要自己使用git）。
- 进入存放博客数据的文件夹，在上文中为“blog”文件夹， 使用以下命令安装主题。
1
|
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
|
- 配置Stack主题。
- 编辑“hugo.toml”，可更具以下模板进行更改。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
baseurl = "博客的链接"
languageCode = "zh-Hans"
paginate = 5
title = "博客的名字"
DefaultContentLanguage = "zh-cn"
# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage = false
# Change it to your Disqus shortname before using
disqusShortname = "名字"
theme = "hugo-theme-stack"
|
- 在“blog”文件夹中创建“config”文件夹，并在“config”文件夹下创建“_default”文件夹，再在“_default”文件下创建"menu.toml"和“params.toml” 文件，其目录结构应如下：
1
2
3
4
5
6
7
8
9
|
blog
├─config
│ └─_default
│ ├─params.toml
│ └─menu.toml
├─...
├─hugo.toml
└─themes
└─hugo-theme-stack
|
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
|
# ---------menu.toml-------------
# Configure main menu and social menu
[[main]]
identifier = "home"
name = "Home"
url = "/"
[main.params]
icon = "home"
newtab = true
[[social]]
identifier = "github"
name = "GitHub"
url = "https://github.com/xxxx"
[social.params]
icon = "brand-github"
[[social]]
identifier = "twitter"
name = "Twitter"
url = "https://twitter.com/xxxx"
[social.params]
icon = "brand-twitter"
|
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
# ---------params.toml-------------
# Pages placed under these sections will be shown on homepage and archive page.
mainSections = ["post"]
# Output page's full content in RSS.
rssFullContent = true
favicon = "/favicon.png"
[footer]
since = 2024
customText = "感谢各位老爷的支持"
[dateFormat]
published = "Jan 02, 2006"
lastUpdated = "Jan 02, 2006 15:04 MST"
[sidebar]
emoji = "😄"
subtitle = "人生得意须尽欢，莫使金樽空对月！"
compact = false #侧边栏精简版本
[sidebar.avatar]
enabled = true
local = true
src = "img/logo.jpg"
[article]
math = false
readingTime = true
[article.license]
enabled = false
default = "Licensed under CC BY-NC-SA 4.0"
## Widgets
[[widgets.homepage]]
type = "search"
[[widgets.homepage]]
type = "archives"
[widgets.homepage.params]
limit = 5
[[widgets.homepage]]
type = "categories"
[widgets.homepage.params]
limit = 10
[[widgets.homepage]]
type = "tag-cloud"
[widgets.homepage.params]
limit = 10
[[widgets.page]]
type = "toc"
[opengraph.twitter]
site = ""
card = "summary_large_image"
[defaultImage.opengraph]
enabled = false
local = false
src = ""
[colorScheme]
toggle = true
default = "auto"
[imageProcessing.cover]
enabled = true
[imageProcessing.content]
enabled = true
## Comments
[comments]
enabled = true
provider = "giscus"
[comments.disqusjs]
shortname = ""
apiUrl = ""
apiKey = ""
admin = ""
adminLabel = ""
[comments.utterances]
repo = ""
issueTerm = "pathname"
label = ""
[comments.remark42]
host = ""
site = ""
locale = ""
[comments.vssue]
platform = ""
owner = ""
repo = ""
clientId = ""
clientSecret = ""
autoCreateIssue = false
[comments.waline]
serverURL = ""
lang = ""
visitor = ""
avatar = ""
emoji = ["https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo"]
requiredMeta = ["name", "email", "url"]
placeholder = ""
[comments.waline.locale]
admin = "Admin"
[comments.twikoo]
envId = ""
region = ""
path = ""
lang = ""
[comments.cactus]
defaultHomeserverUrl = "https://matrix.cactus.chat:8448"
serverName = "cactus.chat"
siteName = ""
[comments.giscus]
repo = ""
repoID = ""
category = ""
categoryID = ""
mapping = "pathname"
lightTheme = "light"
darkTheme = "dark"
reactionsEnabled = 1
emitMetadata = 0
[comments.gitalk]
owner = ""
admin = ""
repo = ""
clientID = ""
clientSecret = ""
[comments.cusdis]
host = ""
id = ""
|
写第一个博客
- 在“blog”文件夹下使用
hugo new content post/first.md即可开始第一篇博客的创作，其内容会生成在“blog/content/post”目录下。
- 预览草稿
hugo server --buildDrafts
- 生成html
hugo
中间踩的一些坑和解决方案
配置Stack主题
官方文档中配置只给出了每个字段配置的是什么内容，也给出了“Fields under :Params”但由于对于toml配置文件的不熟悉，我仍然无法进行有效配置。
- 参考官方使用文档hugo-theme-stack-starter,发现其配置均位于“\config\_default”路径下,因此在根目录下创建相同路径进行配置。
- 对于toml配置文件，其配置类似于.ini,是由一块一块组成，其“Fields under :
Params”即代表在[Params]块下，也等价于在“\config\_default”路径下的“params.toml”文件中。
进行创作
- Question 使用hugo创建的content好像无法使用tags等内容
Stack中文文档中开始创作使用slug、image、categories、tags,在md中使用，运行时报错。
hugo new content创建的md头是以+++…+++包裹，而示例中是以—…—对包裹，需要改变之后，才能正常使用。
