1. 安装 Hugo#
苹果用户有安装 HomeBrew 工具的话可以直接输入 brew install hugo 进行安装.
下载完成后检查是否安装成功，输入: hugo version, 若出现版本信息则表示安装成功.
2. 新建站点#
输入 hugo new site {your site's name}, 即可生成以 {your site's name} 命名的站点文件夹. 具有 archetypes, content, data, layouts, static, themes 文件夹和 config.yml 配置文件.
3. 下载主题#
先去 Hugo 主题官网 找到自己喜欢的主题, 然后点击下载会跳转到主题的github, 把终端的路径调整到博客文件夹的themes目录下, 输入 git clone https://github.com/adityatelange/hugo-PaperMod.git. 也可以在 github 下载对应 repo 的压缩包, 解压到themes目录下.
使用该主题的方法就是在站点配置文件输入主题的名字:
1
|
theme: PaperMod # 主题名字，和themes文件夹下的一致
|
4. 配置文件#
我的 config.yml 内容如下:
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
|
baseURL: https://michelia-zhx.github.io
languageCode: zh-cn # en-us
title: Michelia'Log
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: Michelia
paginate: 5 # 首页每页显示的文章数
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
avatarURL: "images/Cheese.ico"
profileMode:
enabled: true
title: 🧀 Welcome to Michelia'Log
imageUrl: "images/goujuan.png"
imageTitle:
imageWidth: 130
imageHeight: 130
menu:
main:
- identifier: home
name: 🧀Home
url: /
weight: 1
- identifier: posts
name: 🥑Posts
url: posts
weight: 2
- identifier: archives
name: 🍑Archives
url: archives
weight: 4
- identifier: tags
name: 🍍Tags
url: tags
weight: 5
- identifier: about
name: 🍉About
url: about
weight: 6
- identifier: search
name: 🍳Search
url: search
weight: 7
outputs:
home:
- HTML
- RSS
- JSON
params:
env: production # to enable google analytics, opengraph, twitter-cards and schema.
author: Michelia-zhx
# 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/Michelia-zhx"
- name: twitter
url: "images/twitter.png"
- name: facebook
url: "https://www.facebook.com/"
- name: instagram
url: "images/instagram.png"
- name: QQ
url: "images/qq.png"
- name: WeChat
url: "images/wechat.png"
- name: email
url: "mailto: zhanghanxiao000@gmail.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: "Home"
# icon: icon.png
# iconHeight: 35
# analytics:
# google:
# SiteVerificationTag: "XYZabc"
assets:
favicon: "images/Cheese.ico"
favicon16x16: "images/Cheese.ico"
favicon32x32: "images/Cheese.ico"
apple_touch_icon: "images/Cheese.ico"
safari_pinned_tab: "images/Cheese.ico"
# 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:
codeFences: true
guessSyntax: false
hl_Lines: ""
lineNoStart: 1
lineNos: true
lineNumbersInTable: true
noClasses: true
style: monokai
tabWidth: 4
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
|
5. 启动博客#
在站点目录下输入 hugo server -D 就可以在本地预览了, 本地预览网址为 localhost:1313, 输入 hugo 就可以生成 public 文件夹，这个文件夹可以部署到云服务器或者托管到 github 上.
注意: 输入 hugo 的生成方式只会往 public 文件夹里添加内容, 但是不会删除外部已经不存在而 public 里面还存在的文件.
6. 写博客#
输入 hugo new 文章名称.md 就会在 content 目录下的到 “文章名称.md” 形式的文件, 所有文章都是放在 content 这个文件夹里.
文章内部的头部配置信息:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
---
title: Hugo 博客搭建 | PaperMod 主题
author: "Michelia-zhx" # 文章作者
date: 2022-03-01 15:20 # 文章编写日期
lastmod: 2022-03-01 15:20 # 文章修改日期
tags: [ # 文章所属标签
"Hugo",
"Blog"
]
keywords: [ # 文章关键词
"Hugo",
"static",
"generator",
]
---
|
这里有一些功能每个主题不一定有, 需要根据具体情况做一些适配, 仅供参考.
7. 数学公式#
在 ./themes/PaperMod/layouts/partials/footer.html末尾添加以下内容 (因为每个页面都有 footer 部分):
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
|
<script type="text/javascript"
async
src="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [['$$','$$'], ['\[\[','\]\]']],
processEscapes: true,
processEnvironments: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
TeX: { equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js"] }
}
});
MathJax.Hub.Queue(function() {
// Fix <code> tags after MathJax finishes running. This is a
// hack to overcome a shortcoming of Markdown. Discussion at
// https://github.com/mojombo/jekyll/issues/199
var all = MathJax.Hub.getAllJax(), i;
for(i = 0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<style>
code.has-jax {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
color: #515151;
}
</style>
|
8. 插入图片#
举例: 将图片放在 ./static/images/multi-teacher_kd/1.png, 文章内使用 <img src="/images/multi-teacher_kd/1.png" width = "500" div align=center />, 建站时 public 文件夹内 images 文件夹下会生成 multi-teacher_kd文件夹, 存放 1.png, 对应的 html 文件内也会通过 <img src="/images/multi-teacher_kd/11.png" width = "500" div align=center /></li>插入图片.