如何使用 Hexo 搭建博客

本文最后更新于 2026年1月24日 晚上

配置运行环境

我自己使用的是 Windows 11 系统，下面的步骤都是基于 Windows 11 系统进行操作，如果是 Linux / MacOS 系统，配置运行环境的方法会有些差别，可以自行使用搜索引擎或者使用 AI 解决。

安装 MSYS2

进入 MSYS2 官网。
在官网Installation找到1、Download the installer:，点击右边的按钮进行下载，下载好后打开 MSYS2 安装包，选择好安装的位置后安装。

配置 Windows 终端

Windows 10 需在开始菜单中找到Micorsoft Store，搜索Windows Terminal进行安装。

右键桌面或者文件管理器空的位置，点击在终端中打开，在标题栏点击向下的箭头，打开 Windows 终端设置，点击添加新配置文件。
在名称中填入MSYS2 UCRT64。
在命令行填入以下内容：

1
C:\msys64\msys2_shell.cmd -defterm -no-start -use-full-path -here -ucrt64 -shell bash

C:\msys64为安装目录，根据具体安装的目录修改。

在启动目录勾选使用父进程目录。

在图标填入以下内容：

1
C:\msys64\ucrt64.ico

C:\msys64为安装目录，根据具体安装的目录修改。

保存后生效，在标题栏点击向下的箭头就可以看到MSYS2 UCRT64。

配置 MSYS2 镜像源

配置好 Windows 终端后在 Windows 终端的顶栏菜单里找到MSYS2 UCRT64，打开。

在MSYS2 UCRT64终端输入以下内容并回车。

1
2
sed -i "s#https\?://mirror.msys2.org/#https://mirrors.tuna.tsinghua.edu.cn/msys2/#g" /etc/pacman.d/mirrorlist*
pacman -Sy

安装 NodeJS 等工具

1
pacman -S mingw-w64-ucrt-x86_64-nodejs mingw-w64-ucrt-x86_64-neovim git openssh mingw-w64-ucrt-x86_64-aria2 mingw-w64-ucrt-x86_64-ca-certificates

安装 Hexo

1
npm install hexo-cli -g

此时博客的运行环境都准备好了，下面的命令操作都需要在配置好的 MSYS2 UCRT64 终端中进行。

配置博客

下面有部分操作可能需要科学上网并且配置终端代理才能正常进行，配置终端代理可以参考《在终端中快速设置代理 》这篇文章。

初始化 Hexo 文件夹

一般在打开 MSYS2 终端后，默认路径是在 C:/Windows/System32，这是系统路径，不能随意修改，所以需要使用 cd 命令去切换路径到其他路径，比如切换到 D 盘的根目录：

1
cd D:/

切换到其他路径后再进行其他操作。

1
hexo init blog

如果创建 Hexo 文件夹时出现了报错，需要在进入文件夹后运行npm install重新安装依赖。

进入 Hexo 文件夹

1
cd blog

编辑文章模板

这里我使用 NeoVim 作为编辑器，当然可以用其他编辑器进行编辑，比如 Visual Studio Code。

Visual Studio Code 支持使用命令启动，命令是 code，下面展示的是使用 NeoVim 去编辑文件，可以将命令中的 nvim 替换成 code，这样就是用 Visual Studio Code 去打开文件。

1
code scaffolds/page.md

编辑 page.md 文件：

1
nvim scaffolds/page.md

以下为修改 page.md 后文件的内容变动：

1
2
3
4
5
6
7
8
9
10
diff --git a/scaffolds/page.md b/scaffolds/page.md
index f01ba3c..200404f 100644
--- a/scaffolds/page.md
+++ b/scaffolds/page.md
@@ -1,4 +1,5 @@
 ---
 title: {{ title }}
 date: {{ date }}
+updated: {{ date }}
 ---

编辑 post.md 文件：

1
nvim scaffolds/post.md

以下为修改 post.md 后文件的内容变动：

1
2
3
4
5
6
7
8
9
10
11
12
diff --git a/scaffolds/post.md b/scaffolds/post.md
index 1f9b9a4..300f685 100644
--- a/scaffolds/post.md
+++ b/scaffolds/post.md
@@ -1,5 +1,7 @@
 ---
 title: {{ title }}
 date: {{ date }}
+updated: {{ date }}
 tags:
+categories:
 ---

创建分类页面

1
2
hexo new page tools # 其他的自定义页面
hexo new page about # 个人介绍页

安装主题

1
2
3
git clone https://github.com/fluid-dev/hexo-theme-fluid themes/fluid # 下载主题
rm -rf themes/fluid/.git                                             # 删除不必要的 Git 信息
cp themes/fluid/_config.yml _config.fluid.yml                        # 复制主题配置文件

如果后续主题有更新，可使用下面的方法获取更新。

1
2
3
4
5
git -C themes/fluid init                                                            # 重新初始化 Git 仓库
git -C themes/fluid remote add origin https://github.com/fluid-dev/hexo-theme-fluid # 添加 Git 仓库远程源
git -C themes/fluid fetch                                                           # 拉取远程源数据
git -C themes/fluid reset --hard origin/master                                      # 同步远程数据到本地数据
rm -rf themes/fluid/.git                                                            # 删除不必要的 Git 信息

编辑主题文件

编辑 Fluid 主题的 _config.fluid.yml 配置文件：

1
nvim _config.fluid.yml

以下为修改 _config.fluid.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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
diff --git a/_config.fluid.yml b/_config.fluid.yml
index 54f2c42..7dd70b9 100644
--- a/_config.fluid.yml
+++ b/_config.fluid.yml
@@ -18,11 +18,11 @@
 
 # 用于浏览器标签的图标
 # Icon for browser tab
-favicon: /img/fluid.png
+favicon: /img/favicon.png
 
 # 用于苹果设备的图标
 # Icon for Apple touch
-apple_touch_icon: /img/fluid.png
+apple_touch_icon: /img/favicon.png
 
 # 浏览器标签页中的标题分隔符，效果： 文章名 - 站点名
 # Title separator in browser tab, eg: article - site
@@ -87,7 +87,7 @@ fun_features:
 
     # 打印速度，数字越大越慢
     # Typing speed, the larger the number, the slower
-    typeSpeed: 70
+    typeSpeed: 30
 
     # 游标字符
     # Cursor character
@@ -145,7 +145,7 @@ color:
 
   # 顶部菜单背景色
   # Color of navigation bar background
-  navbar_bg_color: "#2f4154"
+  navbar_bg_color: "#66afef"
   navbar_bg_color_dark: "#1f3144"
 
   # 顶部菜单字体色
@@ -240,7 +240,7 @@ custom_css:
 # 网页访问统计
 # Analysis of website visitors
 web_analytics:  # 网页访问统计
-  enable: false
+  enable: true
 
   # 遵循访客浏览器"请勿追踪"的设置，如果开启则不统计其访问
   # Follow the "Do Not Track" setting of the visitor's browser
@@ -250,7 +250,7 @@ web_analytics:  # 网页访问统计
   # 百度统计的 Key，值需要获取下方链接中 `hm.js?` 后边的字符串
   # Baidu analytics, get the string behind `hm.js?`
   # See: https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376
-  baidu:
+  baidu: xxxxxxxxxxxxxxxxxxxxxxxxx
 
   # Google Analytics 4 的媒体资源 ID
   # Google Analytics 4 MEASUREMENT_ID
@@ -277,12 +277,14 @@ web_analytics:  # 网页访问统计
 
   # LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
   # LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
+  # LeanCloud：https://console.leancloud.cn/apps
+  # app_id，app_key，server_url 需要创建一个 LeaanCloud 应用，并在应用的设置 -> 应用凭证中获取
   leancloud:
-    app_id:
-    app_key:
+    app_id: xxxxxxxxxxxxxxxxxxxxxxxx
+    app_key: xxxxxxxxxxxxxxxxxxxx
     # REST API 服务器地址，国际版不填
     # Only the Chinese mainland users need to set
-    server_url:
+    server_url: https://xxxxxxxxxxxxxxxxxxxxx
     # 统计页面时获取路径的属性
     # Get the attribute of the page path during statistics
     path: window.location.pathname
@@ -322,7 +324,7 @@ iconfont: //at.alicdn.com/t/font_1736178_lbnruvf0jn.css
 navbar:
   # 导航栏左侧的标题，为空则按 hexo config 中 `title` 显示
   # The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config
-  blog_title: "Fluid"
+  blog_title: "licyk的小窝"
 
   # 导航栏毛玻璃特效，实验性功能，可能会造成页面滚动掉帧和抖动，部分浏览器不支持会自动不生效
   # Navigation bar frosted glass special animation. It is an experimental feature
   ground_glass:
-    enable: false
+    enable: true

     # 模糊像素，只能为数字，数字越大模糊度越高
     # Number of blurred pixel. the larger the number, the higher the blur
@@ -372,7 +372,8 @@ navbar:
     - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" }
     - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
     - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
-    #- { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }
+    - { key: "工具", link: "/tools/", icon: "iconfont icon-briefcase" }
+    - { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }
 
 # 搜索功能，基于 hexo-generator-search 插件，若已安装其他搜索插件请关闭此功能，以避免生成多余的索引文件
 # Search feature, based on hexo-generator-search. If you have installed other search plugins, please disable this feature to avoid generating redundant index files
@@ -376,7 +376,7 @@ search:
   # 搜索的范围
   # Search field
   # Options: post | page | all
-  field: post
+  field: all

   # 搜索是否扫描正文
   # If true, search will scan the post content
@@ -428,12 +431,14 @@ footer:
   # 展示网站的 PV、UV 统计数
   # Display website PV and UV statistics
   statistics:
-    enable: false
+    enable: true
 
     # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
     # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
     # Options: busuanzi | leancloud
-    source: "busuanzi"
+    source: "leancloud"
+    pv_format: "总访问量 {} 次"  # 显示的文本，{}是数字的占位符（必须包含)，下同
+    uv_format: "总访客数 {} 人"
 
   # 国内大陆服务器的备案信息
   # For Chinese mainland website policy, other areas keep disable
@@ -456,7 +461,8 @@ footer:
 index:
   # 首页 Banner 头图，可以是相对路径或绝对路径，以下相同
   # Path of Banner image, can be a relative path or an absolute path, the same on other pages
-  banner_img: /img/default.png
+  banner_img: /img/home.jpg
+  # banner_img: https://t.mwm.moe/ycy
 
   # 头图高度，屏幕百分比
   # Height ratio of banner image
@@ -475,16 +481,16 @@ index:
 
     # 为空则按 hexo config.subtitle 显示
     # If empty, text based on `subtitle` in hexo config
-    text: "An elegant Material-Design theme for Hexo"
+    text: "做自己喜欢的事情就好"
 
     # 通过 API 接口作为首页副标题的内容，必须返回的是 JSON 格式，如果请求失败则按 text 字段显示，该功能必须先开启 typing 打字机功能
     # Subtitle of the homepage through the API, must be returned a JSON. If the request fails, it will be displayed in `text` value. This feature must first enable the typing animation
     api:
-      enable: false
+      enable: true
 
       # 请求地址
       # Request url
-      url: ""
+      url: "https://v1.hitokoto.cn/"
 
       # 请求方法
       # Request method
@@ -497,7 +503,7 @@ index:
 
       # 从请求结果获取字符串的取值字段，最终必须是一个字符串，例如返回结果为 {"data": {"author": "fluid", "content": "An elegant theme"}}, 则取值字段为 ['data', 'content']；如果返回是列表则自动选择第一项
       # The value field of the string obtained from the response. For example, the response content is {"data": {"author": "fluid", "content": "An elegant theme"}}, the expected `keys: ['data','content']`; if the return is a list, the first item is automatically selected
-      keys: []
+      keys: ["hitokoto"]
 
   # 自动截取文章摘要
   # Auto extract post
@@ -528,7 +534,8 @@ index:
 # Post Page
 #---------------------------
 post:
-  banner_img: /img/default.png
+  banner_img: /img/post.jpg
+  # banner_img: https://t.mwm.moe/ycy
   banner_img_height: 70
   banner_mask_alpha: 0.3
 
@@ -595,7 +595,7 @@ post:
   # 在文章开头显示文章更新时间，该时间默认是 md 文件更新时间，可通过 front-matter 中 `updated` 手动指定（和 date 一样格式）
   # Update date is displayed at the beginning of the post. The default date is the update date of the md file, which can be manually specified by `updated` in front-matter (same format as date)
   updated:
-    enable: false
+    enable: true

     # 格式参照 ISO-8601 日期格式化
     # ISO-8601 date format
@@ -628,7 +635,7 @@ post:
     # 置于板块的左侧或右侧
     # place in the board
     # Options: left | right
-    placement: right
+    placement: left
 
     # 目录会选择这些节点作为标题
     # TOC will select these nodes as headings
@@ -636,7 +643,7 @@ post:
 
     # 层级的折叠深度，0 是全部折叠，大于 0 后如果存在下级标题则默认展开
     # Collapse depth. If 0, all headings collapsed. If greater than 0, it will be expanded by default if there are sub headings
-    collapseDepth: 0
+    collapseDepth: 6
 
   # 版权声明，会显示在每篇文章的结尾
   # Copyright, will be displayed at the end of each post
@@ -720,11 +727,11 @@ post:
   # 评论插件
   # Comment plugin
   comments:
-    enable: false
+    enable: true
     # 指定的插件，需要同时设置对应插件的必要参数
     # The specified plugin needs to set the necessary parameters at the same time
     # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
-    type: disqus
+    type: giscus
 
 
 #---------------------------
@@ -865,10 +872,10 @@ cusdis:
 # Based on GitHub Discussions, similar to Utterances
 # See: https://giscus.app/
 giscus:
-  repo:
-  repo-id:
-  category:
-  category-id:
+  repo: username/repo
+  repo-id: xxxxxxxxxxxxxxxxxxxxxx
+  category: xxxxxxxxxxxxx
+  category-id: xxxxxxxxxxxxxxxxxxx
   theme-light: light
   theme-dark: dark
   mapping: pathname
@@ -876,6 +883,7 @@ giscus:
   emit-metadata: 0
   input-position: top
   lang: zh-CN
+  data-strict: 1
 
 # Discuss
 # 多平台、多数据库、自托管、免费开源评论系统
@@ -891,7 +899,8 @@ discuss:
 # Archive Page
 #---------------------------
 archive:
-  banner_img: /img/default.png
+  banner_img: /img/archive.jpg
+  # banner_img: https://t.mwm.moe/ycy
   banner_img_height: 60
   banner_mask_alpha: 0.3
 
@@ -902,7 +911,8 @@ archive:
 #---------------------------
 category:
   enable: true
-  banner_img: /img/default.png
+  banner_img: /img/categories.jpg
+  # banner_img: https://t.mwm.moe/ycy
   banner_img_height: 60
   banner_mask_alpha: 0.3
 
@@ -931,7 +941,8 @@ category:
 #---------------------------
 tag:
   enable: true
-  banner_img: /img/default.png
+  banner_img: /img/tags.jpg
+  # banner_img: https://t.mwm.moe/ycy
   banner_img_height: 80
   banner_mask_alpha: 0.3
   tagcloud:
@@ -948,18 +959,22 @@ tag:
 #---------------------------
 about:
   enable: true
-  banner_img: /img/default.png
+  banner_img: /img/about.jpg
+  # banner_img: https://t.mwm.moe/ycy
   banner_img_height: 60
   banner_mask_alpha: 0.3
-  avatar: /img/avatar.png
-  name: "Fluid"
-  intro: "An elegant theme for Hexo"
+  # avatar: /img/avatar.png
+  avatar: https://avatars1.githubusercontent.com/u/76895225
+  name: "licyk"
+  intro: "做自己喜欢的事~"
   # 更多图标可从 https://hexo.fluid-dev.com/docs/icon/ 查找，`class` 代表图标的 css class，添加 `qrcode` 后，图标不再是链接而是悬浮二维码
   # More icons can be found from https://hexo.fluid-dev.com/docs/en/icon/  `class` is the css class of the icon. If adding `qrcode`, The icon is no longer a link, but a hovering QR code
   icons:
-    - { class: "iconfont icon-github-fill", link: "https://github.com", tip: "GitHub" }
-    - { class: "iconfont icon-douban-fill", link: "https://douban.com", tip: "豆瓣" }
-    - { class: "iconfont icon-wechat-fill", qrcode: "/img/favicon.png" }
+    - { class: "iconfont icon-github-fill", link: "https://github.com/licyk", tip: "GitHub" }
+    - { class: "iconfont icon-bilibili-fill", link: "https://space.bilibili.com/46497516", tip: "哔哩哔哩" }
+    - { class: "iconfont icon-zhihu-fill", link: "https://www.zhihu.com/people/licyk", tip: "知乎" }
+    - { class: "iconfont icon-weibo-fill", link: "https://weibo.com/u/5220561442", tip: "微博" }
+    # - { class: "iconfont icon-wechat-fill", qrcode: "/img/favicon.png" }
 
 
 #---------------------------
@@ -970,7 +985,8 @@ about:
 # Custom Page through `hexo new page`
 #---------------------------
 page:
-  banner_img: /img/default.png
+  banner_img: /img/about.jpg
+  # banner_img: https://t.mwm.moe/ycy
   banner_img_height: 60
   banner_mask_alpha: 0.3
 
@@ -981,7 +997,8 @@ page:
 #---------------------------
 page404:
   enable: true
-  banner_img: /img/default.png
+  banner_img: /img/links.jpg
+  # banner_img: https://t.mwm.moe/ycy
   banner_img_height: 85
   banner_mask_alpha: 0.3
   # 重定向到首页的延迟(毫秒)
@@ -995,29 +1012,30 @@ page404:
 #---------------------------
 links:
   enable: true
-  banner_img: /img/default.png
+  banner_img: /img/links.jpg
+  # banner_img: https://t.mwm.moe/ycy
   banner_img_height: 60
   banner_mask_alpha: 0.3
   # 友链的成员项
   # Member item of page
   items:
-    - {
-      title: "Fluid Blog",
-      intro: "主题博客",
-      link: "https://hexo.fluid-dev.com/",
-      avatar: "/img/favicon.png"
-    }
-    - {
-      title: "Fluid Docs",
-      intro: "主题使用指南",
-      link: "https://hexo.fluid-dev.com/docs/",
-      avatar: "/img/favicon.png"
-    }
+    # - {
+    #   title: "Fluid Blog",
+    #   intro: "主题博客",
+    #   link: "https://hexo.fluid-dev.com/",
+    #   avatar: "/img/favicon.png"
+    # }
+    # - {
+    #   title: "Fluid Docs",
+    #   intro: "主题使用指南",
+    #   link: "https://hexo.fluid-dev.com/docs/",
+    #   avatar: "/img/favicon.png"
+    # }
     - {
       title: "Fluid Repo",
       intro: "主题 GitHub 仓库",
       link: "https://github.com/fluid-dev/hexo-theme-fluid",
-      avatar: "/img/favicon.png"
+      avatar: "/img/fluid.png"
     }
 
   # 当成员头像加载失败时，替换为指定图片
@@ -1027,17 +1045,18 @@ links:
   # 友链下方自定义区域，支持 HTML，可插入例如申请友链的文字
   # Custom content at the bottom of the links
   custom:
-    enable: false
-    content: '<hr><p>在下方留言申请加入我的友链，按如下格式提供信息：</p><ul><li>博客名：Fluid</li><li>简介：Fluid 主题官方博客</li><li>链接：https://hexo.fluid-dev.com</li><li>图片：https://hexo.fluid-dev.com/img/favicon.png</li></ul>'
+    enable: true
+    # content: '<hr><p>在下方留言申请加入我的友链，按如下格式提供信息：</p><ul><li>博客名：Fluid</li><li>简介：Fluid 主题官方博客</li><li>链接：https://hexo.fluid-dev.com</li><li>图片：https://hexo.fluid-dev.com/img/favicon.png</li></ul>'
+    content: '<hr><p>在下方留言申请加入我的友链~'
 
   # 评论插件
   # Comment plugin
   comments:
-    enable: false
+    enable: true
     # 指定的插件，需要同时设置对应插件的必要参数
     # The specified plugin needs to set the necessary parameters at the same time
     # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
-    type: disqus
+    type: giscus
 
 
 #---------------------------

编辑 Hexo 主配置文件

编辑 Hexo 的 _config.yml 配置文件：

1
nvim _config.yml

修改 _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
diff --git a/_config.yml b/_config.yml
index 5c05e75..92ddabe 100644
--- a/_config.yml
+++ b/_config.yml
@@ -3,17 +3,17 @@
 ## Source: https://github.com/hexojs/hexo/
 
 # Site
-title: Hexo
+title: licyk的小窝
 subtitle: ''
-description: ''
+description: '做自己喜欢的事情就好'
 keywords:
-author: John Doe
-language: en
-timezone: ''
+author: licyk
+language: zh-CN
+timezone: 'Asia/Shanghai'
 
 # URL
 ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
-url: http://example.com
+url: https://licyk.github.io
 permalink: :year/:month/:day/:title/
 permalink_defaults:
 pretty_urls:
@@ -96,7 +96,7 @@ ignore:
 # Extensions
 ## Plugins: https://hexo.io/plugins/
 ## Themes: https://hexo.io/themes/
-theme: landscape
+theme: fluid
 
 # Deployment
 ## Docs: https://hexo.io/docs/one-command-deployment

编辑 tools 页面

1
nvim source/tools/index.md

修改 source/tools/index.md 文件的 front-matter 内容。

1
2
3
4
5
6
7
8
9
10
---
title: tools                  # 文章标题, 可随意更改
date: 2023-07-13 11:59:18     # 文章的发布时间
updated: 2023-07-13 11:59:18  # 文章最后一次修改的时间
layout: post                  # 这里要手动指定布局为文章, 不然 fluid 主题无法正常渲染子页面部分的布局
copyright: false              # 禁用底部版权显示
banner_img: /img/tools.jpg    # 头图
---

<这里就写文章的内容>

编辑 about 页面

1
nvim source/about/index.md

修改 source/about/index.md 文件的 front-matter 内容。

1
2
3
4
5
6
7
8
9
---
title: 关于                   # 文章标题
date: 2023-11-23 21:33:44     # 文章的发布时间
updated: 2023-11-23 21:33:44  # 文章最后一次修改的时间
layout: about                 # 将布局修改成个人介绍页的格式
comment: true                 # 启用关于页的评论功能
---

<文档内容>

博客此时就配置好了。

参考文档：

将源码上传至 Github

配置 Git

配置命令中的username和youremail@example.com需要分别修改成自己的用户名和邮箱。

1
2
git config --global user.name "username"                 # 配置 Git 的用户名, username 修改成自己的用户名
git config --global user.email "youremail@example.com"   # 配置 Git 的邮箱, youremail@example.com 修改成自己的邮箱

配置 Github SSH 密钥

生成 SSH 密钥。

1
ssh-keygen -t ed25519 -C "youremail@example.com"

运行这个命令后会有一些提示信息，保持默认值，直接回车几次即可。

获取 SSH 公钥。

1
cat ~/.ssh/id_ed25519.pub

把输出的整个内容复制下来。

进入 Github 页面，点击头像，选择Settings->SSH and GPG keys，点击New SSH key，在Title选项随意填，Key选项填上刚刚复制的 SSH 公钥，再点Add SSH key保存。

上传源码

在 Github 创建一个私有仓库，命名为blog，用于保存博客源码。再使用下面的命令将源码上传，注意要把git remote add部分的用户名修改成自己的用户名。

1
2
3
4
5
6
git init                                              # 初始化 Git 仓库
git add -A                                            # 追踪仓库文件
git commit -m "upload blog"                           # 添加提交信息
git branch -M main                                    # 将默认的分支名修改
git remote add origin git@github.com:licyk/blog.git   # 添加 Github 仓库地址到本地中, 这里的 licyk 换成自己的 Github 用户名
git push -u origin main                               # 设置分支上游并上传仓库

之后如果博客有更新，运行下面的命令即可。

1
2
3
git add -A                    # 追踪仓库文件
git commit -m "update blog"   # 添加提交信息
git push                      # 上传仓库

如果使用git push命令出现网络问题报错导致上传仓库失败，可以将仓库的 SSH 协议链接更换成 HTTPS 协议的链接。

比如上面步骤添加到仓库的链接为git@github.com:licyk/blog.git，为 SSH 协议的链接，把这个链接换成 HTTPS 协议的链接，也就是https://github.com/licyk/blog.git，则使用下面的命令进行替换。

1
git remote set-url origin https://github.com/licyk/blog.git

Github 上的仓库可以使用 HTTPS 协议的链接或者是 SSH 协议的链接进行连接和管理。

  • HTTPS 协议链接格式：https://github.com/<用户名>/<仓库名>
  • SSH 协议链接格式：git@github.com:<用户名>/<仓库名>

然后按照《使用 HTTPS 协议管理 Github 仓库 - licyk的小窝》中的方法进行配置。配置完成后先使用配置终端代理的命令，再使用git push命令，一般就能成功上传仓库了。

部署博客到网站上

下面介绍 3 种平台用于部署博客。

使用 Github Pages

获取本地的 SSH 私钥。

1
cat ~/.ssh/id_ed25519

将输出的整个内容复制一下。

进入博客源码的 Github 仓库，点击Settings->Secrets->Secrets and variables->Actions，在Secrets部分点击New repository secret新建一个私有变量，在Name选项填DEPLOY_PRI，在Secret填入刚刚复制的 SSH 私钥，点击Add secret保存。

在 Github 上再新建一个公有仓库，命名为用户名.github.io，如licyk.github.io。

回到本地的blog仓库，创建一个 Github Action 文件。

1
nvim .github/workflows/pages.yml

写入以下内容，注意在这个文件中找到Commit Blog的部分，将GIT_URL的值修改成自己公有仓库的 SSH 地址。

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
name: Build Hexo Pages

on:
  push:
    branches:
      - main # 默认分支
  workflow_dispatch:

jobs:
  Build-Pages:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Checkout Repo # 载入仓库文件
        uses: actions/checkout@v5

      - name: Configure Timezone # 配置时区
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai"

      - name: Start Collecting Info # 统计信息
        run: |
          mkdir -p "${{ github.workspace }}/public"
          echo "# Deploy Info" > "${{ github.workspace }}/public/README.md"
          echo "- Deploy Time: \`$(date +'%Y-%m-%d %H:%M:%S')\`" >> "${{ github.workspace }}/public/README.md"

      - name: Use Node.js # 配置 NodeJs
        uses: actions/setup-node@v4
        with:
          node-version: "23"

      - name: Cache NPM Dependencies # 安装 Npm 依赖
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache

      - name: Install Dependencies # 安装 Hexo 依赖
        run: |
          npm install

      - name: Build # 构建 Hexo 环境
        run: |
          npm run build

      - name: Configure Git # 配置 Git, 用于把网页推送到另一个项目上
        env:
          DEPLOY_PRI: ${{ secrets.DEPLOY_PRI }} # 这里就是刚刚配置的私钥了
          GIT_USERNAME: ${{ github.repository_owner }} # Github 用户名, 这里用了 Actions 自带的变量
          GIT_EMAIL: ${{ github.repository_owner }}@user.github.com # 邮箱, 可以写自己的邮箱
        run: |
          mkdir -p ~/.ssh/
          echo "${DEPLOY_PRI}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.name "${GIT_USERNAME}"
          git config --global user.email "${GIT_EMAIL}"

      - name: Collect Info # 统计信息
        run: |
          echo "- Node Version: \`$(node --version)\`" >> "${{ github.workspace }}/public/README.md"
          echo "- Npm Version: \`$(npm --version)\`" >> "${{ github.workspace }}/public/README.md"
          echo "- Hexo Version: \`$(npm show hexo version)\`" >> "${{ github.workspace }}/public/README.md"
          echo "- Blog File Size: \`$(du -sh "${{ github.workspace }}/public" | awk '{ print $1 }')\`" >> "${{ github.workspace }}/public/README.md"

      - name: Commit Blog # 提交文档到 Git 仓库
        env:
          GIT_URL: 'git@github.com:licyk/licyk.github.io.git' # 把它换成自己项目的地址, 也就是 blog 这个仓库的地址, 注意要用 SSH 格式的
        run: |
          git -C "${{ github.workspace }}/public" init
          git -C "${{ github.workspace }}/public" remote add origin "${GIT_URL}"
          git -C "${{ github.workspace }}/public" add -A
          git -C "${{ github.workspace }}/public" commit -m "Blog auto generated. Time: $(date +'%Y-%m-%d %H:%M:%S')"

      - name: Push Blog # 推送博客文件
        run: |
          git -C "${{ github.workspace }}/public" push origin HEAD:gh-pages --force

保存文件后将这个 Github Action 文件推送到 Github 上的仓库，

1
2
3
git add .github/workflows/pages.yml
git commit -m "add pages.yml"
git push

再进入licyk.github.io这个仓库，在仓库的 Settings -> Pages -> Build and deployment，把 Branch 从 main 修改为 gh-pages，再点击 Save。

等待几分钟后就可以通过https://licyk.github.io访问自己搭建的博客了。

使用 Netlify

先注册一个 Netlify 帐号，通过 GitHub 注册。

注册成功后跳转到你的首页，点击 Add new site 中的 Import an existing project，点击 GitHub，与 GitHub 关联。

关联 GitHub 后在下面会出现你 GitHub 中的仓库，点击你创建的 Hexo 博客，再点击 Deploy site 上传。

上传完成会跳转到项目主页，选择 Site settings，跳转后往下滑，点击 Change site name 更改你网站的名称。

Netlify 建议在项目的 Project configuration -> Build & deploy -> Continuous deployment -> Branches and deploy contexts，把 Branch deploys 修改为 None，再点击 Save 保存配置。

使用 Vercel

先注册一个 Vercel 帐号，通过 GitHub 注册。

注册成功后跳转到你的首页，点击 New project，跳转后在 Import Git Repository 中选择你的 Hexo 博客，跳转后点击 Deploy 上传到 Vercel。

上传完成点击 Goto Dashboard 来到项目主页，选择顶部的 Settings，在 Project Name 中更改你网站的名称。

Vercel 建议在项目的 Settings -> Git -> Ignored Build Step 里，Behavior 选择 custom，Command 填写if [ ! "$VERCEL_GIT_COMMIT_REF" = "gh-pages" ]; then exit 1; else exit 0; fi，再点一下 Save。

使用 Cloudflare Pages

在 Cloudflare 注册一个账号。

登陆后在 Cloudflare 管理面板首页，点击右上角的 Add -> Pages -> Import an existing Git repository，在 Github 选项下选择 blog 仓库，再点击 Begin setup。

在 Set up builds and deployments 设置中，Project name 修改为自己的用户名，如licyk，之后后博客访问的地址就是https://licyk.pages.dev；Build command 填写 npm install hexo-cli -g; npm install; hexo generate；Build output directory 填写 public。填写完成后点击 Save and Deploy。

等待一段时间后就可以看到博客部署成功了，使用https://licyk.pages.dev就可以访问自己的博客。

使用 Gitlab Pages

获取本地的 SSH 私钥。

1
cat ~/.ssh/id_ed25519

将输出的整个内容复制一下。

进入博客源码的 Github 仓库，点击Settings->Secrets->Secrets and variables->Actions，在Secrets部分点击New repository secret新建一个私有变量，在Name选项填DEPLOY_PRI，在Secret填入刚刚复制的 SSH 私钥，点击Add secret保存。

如果已经做过使用 Github Pages部分的步骤，则上面的步骤可以省略。

在 Gitlab 上注册一个账号。然后点击 Gitlab 右上角的+号 -> New project/repository -> Create blank project，在 Project name 命名自己的仓库，命名格式为用户名.gitlab.io，如licyk.gitlab.io；Project URL 的 Pick a group or namespace 选项选择自己的用户名；Visibility Level 修改为 Public，最后点击 Create project。

回到本地的blog仓库，创建一个 Github Action 文件。

1
nvim .github/workflows/gitlab-pages.yml

写入以下内容，注意在这个文件中找到Commit Blog的部分，将GIT_URL的值修改成自己在 Gitlab 上刚刚创建的仓库的 SSH 地址。

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
name: Build Hexo Pages (Gitlab)

on:
  push:
    branches:
      - main # 默认分支
  workflow_dispatch:

jobs:
  Build-Pages:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Checkout Repo # 载入仓库文件
        uses: actions/checkout@v5

      - name: Configure Timezone # 配置时区
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai"

      - name: Start Collecting Info # 统计信息
        run: |
          mkdir -p "${{ github.workspace }}/public"
          echo "# Deploy Info" > "${{ github.workspace }}/public/README.md"
          echo "- Deploy Time: \`$(date +'%Y-%m-%d %H:%M:%S')\`" >> "${{ github.workspace }}/public/README.md"

      - name: Use Node.js # 配置 NodeJs
        uses: actions/setup-node@v4
        with:
          node-version: "23"

      - name: Cache NPM Dependencies # 安装 Npm 依赖
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache

      - name: Install Dependencies # 安装 Hexo 依赖
        run: |
          npm install

      - name: Build # 构建 Hexo 环境
        run: |
          npm run build

      - name: Configure Git # 配置 Git, 用于把网页推送到另一个项目上
        env:
          DEPLOY_PRI: ${{ secrets.DEPLOY_PRI }} # 这里就是刚刚配置的私钥了
          GIT_USERNAME: ${{ github.repository_owner }} # Github 用户名, 这里用了 Actions 自带的变量
          GIT_EMAIL: ${{ github.repository_owner }}@user.github.com # 邮箱, 可以写自己的邮箱
        run: |
          mkdir -p ~/.ssh/
          echo "${DEPLOY_PRI}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
          ssh-keyscan gitlab.com >> ~/.ssh/known_hosts
          git config --global user.name "${GIT_USERNAME}"
          git config --global user.email "${GIT_EMAIL}"

      - name: Collect Info # 统计信息
        run: |
          echo "- Node Version: \`$(node --version)\`" >> "${{ github.workspace }}/public/README.md"
          echo "- Npm Version: \`$(npm --version)\`" >> "${{ github.workspace }}/public/README.md"
          echo "- Hexo Version: \`$(npm show hexo version)\`" >> "${{ github.workspace }}/public/README.md"
          echo "- Blog File Size: \`$(du -sh "${{ github.workspace }}/public" | awk '{ print $1 }')\`" >> "${{ github.workspace }}/public/README.md"

      - name: Configure Gitlab CI # 配置 Gitlab Pages 的工作流
        run: |
          cat<<'EOF' > "${{ github.workspace }}/public/.gitlab-ci.yml"
          # The Docker image that will be used to build your app
          image: alpine:latest
          create-pages:
            pages:
              # The folder that contains the files to be exposed at the Page URL
              publish: public
            rules:
              # This ensures that only pushes to the default branch will trigger
              # a pages deploy
              - if: $CI_COMMIT_REF_NAME == "gh-pages"
            # Functions that should be executed before the build script is run
            before_script:
              - echo "Preparing to deploy from branch $CI_COMMIT_REF_NAME"
            script:
              - mkdir -p public
              - cp -rt public ./* 2>/dev/null || true
              - echo "Build complete. Files moved to public/ for deployment."
          EOF

      - name: Commit Blog # 提交文档到 Git 仓库
        env:
          GIT_URL: 'git@gitlab.com:licyk/licyk.gitlab.io.git' # 把它换成自己项目的地址, 也就是 blog 这个仓库的地址, 注意要用 SSH 格式的
        run: |
          git -C "${{ github.workspace }}/public" init
          git -C "${{ github.workspace }}/public" remote add origin "${GIT_URL}"
          git -C "${{ github.workspace }}/public" add -A
          git -C "${{ github.workspace }}/public" commit -m "Blog auto generated. Time: $(date +'%Y-%m-%d %H:%M:%S')"

      - name: Push Blog # 推送博客文件
        run: |
          git -C "${{ github.workspace }}/public" push origin HEAD:gh-pages --force

保存文件后将这个 Github Action 文件推送到 Github 上的仓库，

1
2
3
git add .github/workflows/gitlab-pages.yml
git commit -m "add gitlab-pages.yml"
git push

如果已经做过使用 Github Pages部分的步骤，可以在原来的基础上修改，编辑原来的pages.yml文件。

1
nvim .github/workflows/pages.yml

修改 pages.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
diff --git a/pages.yml b/pages1.yml
index e132336..feb7f53 100644
--- a/pages.yml
+++ b/pages1.yml
@@ -78,3 +78,33 @@ jobs:
       - name: Push Blog # 推送博客文件
         run: |
           git -C "${{ github.workspace }}/public" push origin HEAD:gh-pages --force
+
+      - name: Push Blog To Gitlab # 推送博客文件到 Gitlab 仓库
+        env:
+          GIT_URL: 'git@gitlab.com:licyk/licyk.gitlab.io.git' # 把它换成 Gitlab 项目的地址, 注意要用 SSH 格式的
+        run: |
+          cat<<'EOF' > "${{ github.workspace }}/public/.gitlab-ci.yml"
+          # The Docker image that will be used to build your app
+          image: alpine:latest
+          create-pages:
+            pages:
+              # The folder that contains the files to be exposed at the Page URL
+              publish: public
+            rules:
+              # This ensures that only pushes to the default branch will trigger
+              # a pages deploy
+              - if: $CI_COMMIT_REF_NAME == "gh-pages"
+            # Functions that should be executed before the build script is run
+            before_script:
+              - echo "Preparing to deploy from branch $CI_COMMIT_REF_NAME"
+            script:
+              - mkdir -p public
+              - cp -rt public ./* 2>/dev/null || true
+              - echo "Build complete. Files moved to public/ for deployment."
+          EOF
+          ssh-keyscan gitlab.com >> ~/.ssh/known_hosts
+          git -C "${{ github.workspace }}/public" remote add gitlab "${GIT_URL}"
+          git -C "${{ github.workspace }}/public" add -A
+          git -C "${{ github.workspace }}/public" commit -m "Blog auto generated. Time: $(date +'%Y-%m-%d %H:%M:%S')"
+          git -C "${{ github.workspace }}/public" push gitlab HEAD:gh-pages --force || {
+            echo "推送博客文件到 Gitlab 时失败, 请在 Gitlab 中打开该仓库, 打开设置 -> 仓库 -> 分支规则 -> gh-pages -> 查看详情, 确保允许强制推送选项已经启用";
+            exit 1;
+          }

保存文件后将这个 Github Action 文件更新到 Github 上的仓库，

1
2
3
git add .github/workflows/pages.yml
git commit -m "update pages.yml"
git push

再进入licyk.gitlab.io这个 Gitlab 仓库，在仓库左侧的 Settings -> General -> Visibility, project features, permissions -> Pages，将 Only Project Members 修改为 Everyone With Access，再点击下面的 Save Changes 按钮保存修改。

等待几分钟后就可以通过https://licyk.gitlab.io访问自己搭建的博客了。

管理博客

文章保存在博客目录的source/_posts目录中，使用的文件格式为md，编写文章使用的是 Markdown 语法，不过也允许使用 HTML 语法进行文档编写，在 Markdown 语法实现不了某些效果时可使用 HTML 语法来实现。

在每篇文章的开头为 front-matter，用于配置写作设置。

比如可以在文章开头可以看到下面的内容：

1
2
3
4
5
6
7
8
9
10
---
title: 如何使用 Hexo 搭建博客                          # 文章的标题
date: 2024-06-26 23:02:03                            # 文章的创建时间
updated: 2025-05-18 17:15:26                         # 文章的修改时间
categories:                                          # 文章的分类
 - 教程
tags:                                                # 文章的标签
 - windows
excerpt: 把以前搭建的博客的方法记录了下来，给一个参考    # 文章封面的摘要文字
---

在 front-matter 下面的部分就可以用于编写文章。

创建新文章

1
hexo new <post_name>

本地展示网页

1
hexo generate && hexo server

安装插件

1
npm install <package_name> --save

Hexo 可用的插件可以在 Plugins | Hexo 中查看，如果安装插件后出现问题，可以通过npm uninstall <package_name> --save卸载插件。

网页特效

  • 鼠标点击特效
anime.min.js fireworks.min.js 
1
2
3
4
5
<canvas
    id="fireworks"
    style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 32767" ></canvas>
<script src="/js/anime.min.js"></script>
<script src="/js/fireworks.min.js"></script>
  • 流星效果
background.min.js 
1
2
3
4
5
<canvas
    id="background"
    style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1">
</canvas>
<script src="/js/background.min.js"></script>
  • 指针效果
cursor.min.js cursor.min.css 
1
2
3
<div id="cursor"></div>
<link rel="stylesheet" href="/css/cursor.min.css" />
<script src="/js/cursor.min.js"></script>
  • 樱花飘落效果
sakura.js 
1
<script src="/js/sakura.js"></script>
  • 看班娘
1
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

添加追番列表

注册 bangumi 账号并登陆。

安装 HCLonely/hexo-bilibili-bangumi。

1
npm install hexo-bilibili-bangumi --save

修改 _config.yml 文件。

1
nvim _config.yml

加入下面的内容，vmid根据自己的进行修改，更多的说明可以看 HCLonely/hexo-bilibili-bangumi 这个项目的文档。

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
# 追番设置
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi:
  enable: true
  source: bgmv0
  bgmInfoSource: 'bgmv0'
  path:
  vmid: licyk
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  showMyComment: false
  pagination: false
  metaColor:
  color:
  webp:
  progress:
  progressBar:
  extraOrder:
  order: latest
  proxy:
    host: '代理host'
    port: '代理端口'
  extra_options:
    key: value
  coverMirror:
cinema: # 追剧设置
  enable: false
  path:
  vmid: licyk
  title: '追剧列表'
  quote: '生命不息，追剧不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  metaColor:
  color:
  webp:
  progress:
  progressBar:
  extraOrder:
  order:
  extra_options:
    key: value
  coverMirror:
game: # 游戏设置，仅支持source: bgmv0
  enable: false
  path:
  source: bgmv0
  vmid: licyk
  title: '游戏列表'
  quote: '生命不息，游戏不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  metaColor:
  color:
  webp:
  progress:
  progressBar:
  extraOrder:
  order:
  extra_options:
    key: value
  coverMirror:

改一下 pages.yml 文件，添加刷新追番列表的命令。

1
nvim .github/workflows/pages.yml

修改 pages.yml 文件后的改动如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
diff --git a/pages.yml b/pages1.yml
index 2a5b00a..0a80b78 100644
--- a/pages.yml
+++ b/pages1.yml
@@ -24,9 +24,15 @@ jobs:
           restore-keys: |
             ${{ runner.OS }}-npm-cache
       - name: Install Dependencies # 安装 Hexo 依赖
         run: |
+          npm install hexo-cli -g
+          npm install hexo-bilibili-bangumi -g
+          npm install -g
           npm install

       - name: Build # 构建 Hexo 环境
         run: |
+          hexo bangumi -u
           npm run build

       #- name: Deploy # 部署到当前项目的网页上
       #  uses: peaceiris/actions-gh-pages@v3
       #  with:

修改 _config.fluid.yml 文件，添加追番列表入口。

1
nvim _config.fluid.yml

修改 _config.fluid.yml 文件后的改动如下：

1
2
3
4
5
6
7
8
9
10
11
12
diff --git a/_config.fluid.yml b/_config.fluid1.yml
index a3325eb..42a8372 100644
--- a/_config.fluid.yml
+++ b/_config.fluid1.yml	
@@ -352,6 +352,7 @@ navbar:
     - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
     - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
     - { key: "工具", link: "/tools/", icon: "iconfont icon-briefcase" }
+    - { key: "追番", link: "/bangumis/", icon: "iconfont icon-books" }
     - { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }
 
 # 搜索功能，基于 hexo-generator-search 插件，若已安装其他搜索插件请关闭此功能，以避免生成多余的索引文件

修改好后就可以推送到 Github 上的 blog 仓库了。

在 Netlify 上需要修改一下部署命令，在项目的 Site configuration -> Build & deploy -> Build settings -> Configure，把 Build command 修改成npm install hexo-cli -g; npm install hexo-bilibili-bangumi -g; npm install -g; npm install; hexo bangumi -u; npm run build，再点一下 Save 保存设置。

在 Vercel 上也需要修改部署命令，在项目的 Settings -> General -> Build & Development Settings，勾选 Build command 右边的 Override，填写hexo bangumi -u; hexo generate，再勾选 Install command 右边的 Override，填写npm install hexo-cli -g; npm install hexo-bilibili-bangumi -g; npm install -g; npm install，最后点击 Save 保存，

添加 Mermaid 流程图支持

修改 _config.fluid.yml 文件，启用 Mermaid 流程图。

1
nvim _config.fluid.yml

修改 _config.fluid.yml 文件后的改动如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
diff --git a/_config.fluid.yml b/_config.fluid.yml
index 3807536..fede045 100644
--- a/_config.fluid.yml
+++ b/_config.fluid.yml
@@ -722,13 +722,14 @@ post:
   mermaid:
     # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `mermaid: true`
     # If you want to use mermaid on the custom page, you need to set `mermaid: true` in Front-matter
-    enable: false
+    enable: true

     # 开启后，只有在文章 Front-matter 里指定 `mermaid: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
     # If true, only set `mermaid: true` in Front-matter will enable mermaid, to load faster when the page does not contain mermaid
-    specific: false
+    specific: true

     # See: http://mermaid-js.github.io/mermaid/
+    # https://mermaid.js.org/config/schema-docs/config.html#mermaid-config-properties
     options: { theme: 'default' }

   # 评论插件

现在就可以在文章中使用 Mermaid 流程图了。

如果需要在某个文章使用 Mermaid 流程图，则在文章的 front-matter 添加下面的配置。

1
mermaid: true

使用 Mermaid 的方式如下：

1
2
3
4
5
6
7
8
9
10
11
{% mermaid %}
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
{% endmermaid %}

或者在代码块中的开头声明mermaid也可以使用 Mermaid 流程图。

1
2
3
4
5
6
7
8
9
10
11
```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
```

参考：

添加数学公式支持

安装 hexo-math 插件。

1
npm install hexo-math --save

现在就可以在文章中使用数学公式了。

KaTeX 语法：

1
2
3
{% katex '{options}' %}
content
{% endkatex %}

MathJax 语法：

1
2
3
{% mathjax '{options}' %}
content
{% endmathjax %}

参考：

配置站点地图

站点地图用于主动帮助搜索引擎爬取网站内容，告诉搜索引擎哪个页面很重要。

下面提供 2 种方法配置站点地图。

配置站点方法只能使用其中一种，如果需要切换另一种配置站点方法，需要将原来配置站点地图的配置删除，并且使用npm uninstall <Hexo 插件名> --save命令卸载原来的站点地图插件。

使用 hexo-generator-seo-friendly-sitemap 插件

安装 hexo-generator-seo-friendly-sitemap 插件：

1
npm install hexo-generator-seo-friendly-sitemap --save

修改 _config.yml 配置文件：

1
nvim _config.yml

加入下面的内容：

1
2
3
4
# 配置站点地图
# https://github.com/ludoviclefevre/hexo-generator-seo-friendly-sitemap
sitemap:
  path: sitemap.xml

如果想让某篇文章不加入站点地图，则在文章的 front-matter 添加下面的配置。

1
sitemap: false

参考：

使用 hexo-generator-sitemap 插件

安装 hexo-generator-sitemap 插件：

1
npm install hexo-generator-sitemap --save

下载站点地图模板：

1
2
aria2c https://github.com/hexojs/hexo-generator-sitemap/raw/master/sitemap.xml -c -o sitemap_template.xml
aria2c https://github.com/hexojs/hexo-generator-sitemap/raw/master/sitemap.txt -c -o sitemap_template.txt

修改 _config.yml 配置文件：

1
nvim _config.yml

加入下面的内容：

1
2
3
4
5
6
7
8
9
10
11
# 配置站点地图
# https://github.com/hexojs/hexo-generator-sitemap?tab=readme-ov-file#options
sitemap:
  path:
    - sitemap.xml
    - sitemap.txt
  template: ./sitemap_template.xml
  template_txt: ./sitemap_template.txt
  rel: false
  tags: true
  categories: true

如果想让某篇文章不加入站点地图，则在文章的 front-matter 添加下面的配置。

1
sitemap: false

参考：

配置 Atom / RSS 订阅源

Atom / RSS 订阅源可用于推送文章内容更新。

安装 hexo-generator-feed 插件：

1
npm install hexo-generator-feed --save

修改 _config.yml 配置文件：

1
nvim _config.yml

加入下面的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 订阅源
# https://github.com/hexojs/hexo-generator-feed?tab=readme-ov-file#options
feed:
  enable: true
  type:
    - atom
    - rss2
  path:
    - atom.xml
    - rss2.xml
  limit: false
  hub:
  content: true
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

修改 _config.fluid.yml 文件，添加追番列表入口。

1
nvim _config.fluid.yml

修改 _config.fluid.yml 文件后的改动如下：

1
2
3
4
5
6
7
8
9
10
11
12
diff --git a/_config.fluid.yml b/_config.fluid.yml
index e04c222..2d0d265 100644
--- a/_config.fluid.yml
+++ b/_config.fluid.yml
@@ -357,6 +357,7 @@ navbar:
     - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
     - { key: "工具", link: "/tools/", icon: "iconfont icon-briefcase" }
     - { key: "追番", link: "/bangumis/", icon: "iconfont icon-books" }
+    - { key: "RSS", link: "/rss2.xml", icon: "iconfont icon-rss" }
     - { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }

 # 搜索功能，基于 hexo-generator-search 插件，若已安装其他搜索插件请关闭此功能，以避免生成多余的索引文件

参考：

教程
#windows
如何使用 Hexo 搭建博客
https://licyk.netlify.app/2024/06/26/how-to-deploy-hexo/
作者
licyk
发布于
2024年6月26日
许可协议