如何使用 Hexo 搭建博客

把以前搭建的博客的方法记录了下来,给一个参考。

配置运行环境

安装 MSYS2

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

配置 Windows 终端

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

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

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

启动目录勾选使用父进程目录
图标填入以下内容

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 git openssh

安装 Hexo

1
npm install hexo-cli -g

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

配置博客

初始化 Hexo 文件夹

1
hexo init blog

进入 Hexo 文件夹

1
cd blog

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

创建分类页面

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
cp themes/fluid/_config.yml _config.fluid.yml

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

1
2
3
4
5
git init themes/fluid
git -C themes/fluid remote add origin https://github.com/fluid-dev/hexo-theme-fluid
git -C themes/fluid fetch
git -C themes/fluid reset --hard origin/master
rm -rf themes/fluid/.git

编辑主题文件

这里我使用 LunarVim 作为编辑器,当然可以用其他编辑器进行编辑。

1
lvim _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
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
@@ -346,7 +348,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
@@ -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/about.jpg
+ # banner_img: https://t.mwm.moe/ycy
banner_img_height: 70
banner_mask_alpha: 0.3

@@ -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/archieve.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 主配置文件

1
lvim _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: http://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
lvim source/tools/index.md

修改 source/tools/index.md 文件头部内容。

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

<文档内容>

编辑 about 页面

1
lvim source/about/index.md

修改 source/about/index.md 文件头部内容。

1
2
3
4
5
6
7
---
title: 关于
date: 2023-11-23 21:33:44
layout: about # 将布局修改成个人介绍页的格式
---

<文档内容>

博客此时就配置好了。

参考文档:
文档 | Hexo
Hexo Fluid 用户手册

将源码上传至 Github

配置 Git

1
2
git config --global user.name "username"
git config --global user.email "youremail@example.com"

配置 Github SSH 密钥

生成 SSH 密钥。

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

获取 SSH 公钥。

1
cat ~/.ssh/id_rsa.pub

把输出的内容复制下来。

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

上传源码

在 Github 创建一个私有仓库,命名为blog,用于保存博客源码。再使用下面的命令将源码上传。

1
2
3
4
5
6
git init
git add .
git commit -m "upload blog"
git branch -M main
git remote add origin git@github.com:licyk/blog.git
git push -u origin main

部署博客到网站上

使用 Github Pages

获取本地的 SSH 私钥

1
cat ~/.ssh/id_rsa

将输出的内容复制一下。

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

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

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

1
lvim .github/workflows/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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
name: Build Hexo Pages

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

jobs:
pages:
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- uses: actions/checkout@v4
- name: Use Node.js 20.4.0 # 配置 NodeJs
uses: actions/setup-node@v4
with:
node-version: "16"
- 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: Deploy # 部署到当前项目的网页上
# uses: peaceiris/actions-gh-pages@v3
# with:
# github_token: ${{ secrets.GITHUB_TOKEN }}
# publish_dir: ./public
- 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: |
sudo timedatectl set-timezone "Asia/Shanghai"
mkdir -p ~/.ssh/
echo "$DEPLOY_PRI" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.name '$DEPLOY_PRI'
git config --global user.email '$DEPLOY_PRI'
- name: Commit Blog # 提交文档到 Git 仓库
env:
GIT_URL: 'git@github.com:licyk/licyk.github.io.git' # 把它换成项目的地址,注意要用 SSH 格式的
run: |
cd public
git init
git remote add origin $GIT_URL
git add -A
git commit -m "Blog auto generated. Time: $(date +'%Y-%m-%d %H:%M:%S')"
- name: Push blog # 推送
run: |
cd public
git 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 更改你网站的名称

使用 Vercel

先注册一个 Vercel 帐号,通过 GitHub 注册

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

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

管理博客

创建新文章

1
hexo new <post_name>

本地展示网页

1
hexo g && hexo s

安装插件

1
npm install <package_name> --save

自用的插件:

  1. hexo-admonition:Hexo 内容辅助插件,支持将类似 reStructuredText 的警告提示块添加到 Markdown 文档中,不过 Hexo Fluid 主题自带这个功能,不需要再装插件
  2. hexo-fontawesome:添加 Font Awesome SVG 支持

网页特效

  • 鼠标点击特效
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>

如何使用 Hexo 搭建博客
http://licyk.github.io/2024/06/26/how-to-deploy-hexo/
作者
licyk
发布于
2024年6月26日
许可协议