一、常见的博客框架（静态站点生成器）#
下面是几种Github上比较流行的博客框架，主要对比了它们对Markdown语法的支持、社区活跃度以及语言请结合实际场景选择：
| 静态站点生成器 | 语言 | 社区支持 | Markdown支持 | 生成速度 | 可扩展性 | 灵活性 | 适用场景 |
|---|
| Hugo | Go | 非常活跃 | 良好 | 极快 | 中等 | 非常高 | 大型网站，技术博客 |
| Jekyll | Ruby | 非常活跃 | 良好 | 快 | 高 | 非常高 | 个人博客，项目文档 |
| Gatsby | React/GraphQL | 非常活跃 | 良好 | 中等 | 高 | 非常高 | 前端项目，博客 |
| Hexo | JavaScript | 活跃 | 良好 | 快 | 高 | 高 | 个人博客 |
| VuePress | Vue/Node.js | 活跃 | 良好 | 中等 | 高 | 高 | 技术文档，博客 |
| MkDocs | Python | 活跃 | 良好 | 快 | 高 | 中等 | 项目文档，API文档 |
| Pelican | Python | 活跃 | 良好 | 快 | 高 | 中等 | 个人博客，项目文档 |
| Next.js | React | 活跃 | 良好 | 中等 | 高 | 高 | 前端项目，博客 |
| Zola | Rust | 活跃 | 良好 | 快 | 高 | 高 | 个人博客，技术文档 |
| Docusaurus | React | 活跃 | 良好 | 中等 | 高 | 高 | 技术文档，博客 |
二、新建Hugo站点#
Hugo 是一个快速、简单、安全、可靠、强大的静态网站生成器，适合于个人博客、企业网站和在线商店等各种用途。
- 速度快：Hugo 使用 Go 语言编写，生成速度非常快，比其他静态网站生成器快得多。这使得它适合于处理大型网站和博客。
- 简单易用：Hugo 非常易于使用，没有复杂的配置和安装过程。通过简单的命令即可生成静态网站。
- 安全可靠：Hugo 生成的网站是静态的 HTML 页面，不需要使用数据库或服务器端脚本，因此非常安全可靠。同时，它可以在任何支持 HTML 的服务器上部署。
- 主题丰富：Hugo 有许多免费和付费的主题可供选择，使得你可以快速创建一个漂亮的网站。
- 支持多种格式：Hugo 可以处理多种格式的内容，包括 Markdown、Org、HTML 等等。
- 可定制性强：Hugo 允许你根据自己的需求定制网站，比如可以添加自定义布局、网页模板、片段等等。
- 易于部署：由于生成的网站是静态的 HTML 页面，因此可以轻松地将它们部署到任何 Web 服务器或 CDN 上。
第一步：新建站点#
具体步骤，请参阅官方文档：Quick Start
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| #新建Hugo项目
hugo new site [项目名称]
cd [项目名称]
#初始化Git仓库
git init
#添加Hugo主题作为Git子仓库，这里选择PaperMod
git submodule add https://github.com/adityatelange/hugo-PaperMod
#将主题配置输出到配置文件
echo "theme = [主题名称]” >> config.yaml
#启动本地开发服务器
hugo server
|
1
2
3
4
| #在当前目录中新建一个文件夹或根据默认模版生成一个文件
hugo new [your directroy or file]
#编译并压缩
hugo --minify
|
第二步：配置站点#
具体配置，请参阅官方文档 Configure The Site 和你使用的主题的文档 PaperMod Features。
以下素履大佬博客中贴出的配置文件是一个示例的配置文件，大家一起学习：
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
| baseURL: https://www.sulvblog.cn
# baseURL: https://www.sulvblog.cn # 绑定的域名
languageCode: zh-cn # en-us
title: Sulv's Blog
theme: PaperMod # 主题名字，和themes文件夹下的一致
enableInlineShortcodes: true #允许内联短码
enableEmoji: true # 允许使用 Emoji 表情，建议 true
enableRobotsTXT: true # 允许爬虫抓取到搜索引擎，建议 true
hasCJKLanguage: true # 自动检测是否包含 中文日文韩文 如果文章中使用了很多中文引号的话可以开启
buildDrafts: false
buildFuture: false
buildExpired: false
#googleAnalytics: UA-123-45 # 谷歌统计
# Copyright: Sulv
paginate: 15 # 每页显示的文章数
minify:
disableXML: true
# minifyOutput: true
permalinks: #浏览器链接显示方式
post: "/:title/"
# post: "/:year/:month/:day/:title/"
defaultContentLanguage: en # 最顶部首先展示的语言页面
defaultContentLanguageInSubdir: true
languages:
en:
languageName: "English"
# contentDir: content/english
weight: 1
profileMode:
enabled: true
title: (〃'▽'〃)
subtitle: "🧨学而时习之，不亦说乎？有朋自远方来，不亦乐乎？<br/>👏🏼欢迎光临素履(Sulv)的博客<br/>👇联系方式"
imageUrl: "img/Q.gif" #图片放在static/img/Q.gif
imageTitle:
imageWidth: 150
imageHeight: 150
buttons:
- name: 👨🏻💻技术
url: posts/tech
- name: 📕阅读
url: posts/read
- name: 🏖生活
url: posts/life
menu:
main:
- identifier: search
name: 🔍搜索
url: search
weight: 1
- identifier: home
name: 🏠主页
url: /
weight: 2
- identifier: posts
name: 📚文章
url: posts
weight: 3
- identifier: archives
name: ⏱时间轴
url: archives/
weight: 20
- identifier: tags
name: 🔖标签
url: tags
weight: 40
- identifier: about
name: 🙋🏻♂️关于
url: about
weight: 50
- identifier: links
name: 🤝友链
url: links
weight: 60
outputs:
home:
- HTML
- RSS
- JSON
params:
env: production # to enable google analytics, opengraph, twitter-cards and schema.
# description: "这是一个纯粹的博客......"
author: Sulv
# author: ["Me", "You"] # multiple authors
defaultTheme: auto # defaultTheme: light or dark
disableThemeToggle: false
DateFormat: "2006-01-02"
ShowShareButtons: true
ShowReadingTime: true
# disableSpecialistPost: true
displayFullLangName: true
ShowPostNavLinks: true
ShowBreadCrumbs: true
ShowCodeCopyButtons: true
hideFooter: false # 隐藏页脚
ShowWordCounts: true
VisitCount: true
ShowLastMod: true #显示文章更新时间
ShowToc: true # 显示目录
TocOpen: true # 自动展开目录
comments: true
socialIcons:
- name: github
url: "https://github.com/xyming108"
- name: twitter
url: "img/twitter.png"
- name: facebook
url: "https://www.facebook.com/profile.php?id=100027782410997"
- name: instagram
url: "img/instagram.png"
- name: QQ
url: "img/qq.png"
- name: WeChat
url: "img/wechat.png"
- name: email
url: "mailto:1931559710@qq.com"
- name: RSS
url: "index.xml"
# editPost:
# URL: "https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/content"
# Text: "Suggest Changes" # edit text
# appendFilePath: true # to append file path to Edit link
label:
text: "Sulv's Blog"
#icon: "img/Q.gif"
icon: "https://www.sulvblog.cn/Q.gif"
iconHeight: 35
# analytics: #谷歌分析
# google:
# SiteVerificationTag: "XYZabc"
assets:
favicon: "img/Q.gif"
favicon16x16: "img/Q.gif"
favicon32x32: "img/Q.gif"
apple_touch_icon: "Q.gif"
safari_pinned_tab: "Q.gif"
# cover:
# hidden: true # hide everywhere but not in structured data
# hiddenInList: true # hide on list pages and home
# hiddenInSingle: true # hide on single page
fuseOpts:
isCaseSensitive: false
shouldSort: true
location: 0
distance: 1000
threshold: 1
minMatchCharLength: 0
keys: ["title", "permalink", "summary"]
twikoo:
version: 1.4.11
taxonomies:
category: categories
tag: tags
series: series
markup:
goldmark:
renderer:
unsafe: true # HUGO 默认转义 Markdown 文件中的 HTML 代码，如需开启的话
highlight:
# anchorLineNos: true
codeFences: true
guessSyntax: true
lineNos: true
# noClasses: false
# style: monokai
style: darcula
# codeFences：代码围栏功能，这个功能一般都要设为 true 的，不然很难看，就是干巴巴的-代码文字，没有颜色。
# guessSyntax：猜测语法，这个功能建议设置为 true, 如果你没有设置要显示的语言则会自动匹配。
# hl_Lines：高亮的行号，一般这个不设置，因为每个代码块我们可能希望让高亮的地方不一样。
# lineNoStart：行号从编号几开始，一般从 1 开始。
# lineNos：是否显示行号，我比较喜欢显示，所以我设置的为 true.
# lineNumbersInTable：使用表来格式化行号和代码,而不是 标签。这个属性一般设置为 true.
# noClasses：使用 class 标签，而不是内嵌的内联样式
privacy:
vimeo:
disabled: false
simple: true
twitter:
disabled: false
enableDNT: true
simple: true
instagram:
disabled: false
simple: true
youtube:
disabled: false
privacyEnhanced: true
services:
instagram:
disableInlineCSS: true
twitter:
disableInlineCSS: true
|
三、发布#
运行发布命令：Hugo Commands
编译完成后，将public目录下的文件上传到你的服务器即可，你也可以使用Github Page部署。
四、鸣谢#
这次Hugo博客搭建大量参考和借鉴了素履大佬博客里的相关内容，并且得到了素履大佬的亲自指导。在此奉上素履哥的博客地址：https://www.sulvblog.cn，供大家一起学习进步。