前言

本文记录了博客折腾的大致步骤以及踩坑,先上流程架构图

架构

结构说明

注意,涉及到两个代码仓库。
1,我们博客的源代码,也就是你写的Markdown源文件。
2,编译后,发布的Github仓库,也就是Github pages仓库

大体流程为:

  1. 自己在本地编辑器安装hexo环境,选择主题,编写博客。
  2. 完成后执行git push推送至Github博客源码仓库。
  3. 根据配置的github workflow,触发Github Action,执行编译构建,最后使用插件hexo-deployer-git发布至Github Pages仓库,完成更新。
  4. 配置Github Pages的自定义域名,将个人域名CNAME到Github Pages的域名上。
Git和Github还有Github Action,Github Pages分别是什么?
  • Git是什么
    如果你不懂git,那么可以想象一个word文件,你的每次修改都会保存一份快照。这样有问题就可以随时回退到某个保存的节点,而git是针对一个项目所有文件的快照。
    使用git可以做到你误删文件后可以随时恢复,修改文件后可以随时回退。更多详情

  • Github是什么

    全球最大的同性交友网站
    ,github允许你把自己的git仓库存放到他的网站,这样你从任何可以联网的地方都可以访问自己的仓库,并且它还提供更多的功能。详情你可以查看他的官网。、
  • Github Action是什么
    Github Action是Github推出的一项付费服务,普通用户每个月有一定的免费额度。简单来说就是可以预定一些事件,并指定什么时候运行。例如可以设定当你执行Push推送的时候,自动执行某些操作。
    在此文章中,正是利用了Push的触发操作,执行发布更新。

  • Github Pages是什么
    Github Pages是Github推出的一项免费服务,允许你发布一些静态页面。可以简单理解为你把网站给它然后由它替你发布,Free。我们正是利用了这一点,将博客编译好的成果直接放置在Github Pages上,从而白嫖。

整体流程

此文章并非小白从零开始教程,后续阅读将视为你已拥有:

  • 基本的操作系统知识
  • git环境
  • node环境

验证环境

1
2
3
4
5
6
[root@liyao ~]# git version
git version 1.8.3.1
[root@liyao ~]# node -v
v12.16.1
[root@liyao ~]# npm -v
6.13.4

安装初始化hexo

如果你不是root用户,需要使用sudo提权

1
2
3
4
5
[root@liyao ~]# sudo npm install -g hexo-cli
[root@liyao ~]# cd ~ #切换到你的目录
[root@liyao ~]# hexo init blog #blog为项目名,你可以自由替换
[root@liyao ~]# cd blog
[root@liyao ~]# npm install

安装butterfly主题

1
2
3
4
5
6
7
# 克隆主题代码
git submodule add https://github.com/jerryc127/hexo-theme-butterfly themes/butterfly

# 安装主题依赖
npm install hexo-renderer-pug hexo-renderer-stylus --save
# 安装部署git插件
npm install hexo-deployer-git --save

以子模块的方式引用主题的仓库,好处是管理方便,因为两个仓库独立,你可以轻松的配置两个仓库而不互相冲突。更新主题只要cd到主题目录,执行以下git pull即可。

但缺点是,因为github action一直沿用最新的主题master分支,一旦主题有不兼容的措施或者配置变动,可能会受到影响,需要使用者互相权衡。

配置博客

修改hexo配置文件_confog.yml,以下是我用到的项,按需修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
title: LiYao's Blog
description: "生于尘埃,溺于人海,死于理想高台。"
keywords:
author: Li Yao
language: zh-CN
timezone: Asia/Shanghai
url: https://blog.lucat.fun

theme: butterfly

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: git@github.com:liyao2598330/liyao2598330.github.io.git
branch: master

生成主题配置文件,后续修改都将在主题配置文件_config.butterfly.yml中进行

1
2
# 复制主题配置文件,其实就是复制一份
cp _config.yml _config.butterfly.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
385
386
387
388
389
390
391
392
393
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: LiYao's Blog
description: "生于尘埃,溺于人海,死于理想高台。"
keywords:
author: Li Yao
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: https://blog.lucat.fun
permalink: :title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: git@github.com:liyao2598330/liyao2598330.github.io.git
branch: master

# 主题配置 https://butterfly.js.org/posts/4aa8abbe/
## 首页菜单
menu:
首頁: / || fas fa-home
时间轴: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
友链: /link/ || fas fa-link
关于||fas fa-heart:
- || /about/ || fas fa-user

## 代码配置
highlight_theme: darker
highlight_copy: true
highlight_shrink: none

## 社交配置
social:
fab fa-github: https://github.com/liyao2598330 || Github
fas fa-envelope: mailto:liyao2598330@gmail.com || Email

## 文章节选配置
index_post_content:
method: 2
length: 200

## 网站顶部图
index_img: 'https://cdn.lucat.fun/blog/2021-03/bg-55TvGD.jpg'
default_top_img: 'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'
archive_img: 'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'
tag_img tag: 'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'
category_img: 'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'
tag_per_img:
aplayer: https://xxxxxx.png
android: ddddddd.png

category_per_img:
隨想: hdhdh.png
推薦: ddjdjdjd.png

## 文章封面图
cover:
# 是否顯示文章封面
index_enable: true
aside_enable: true
archives_enable: true
# 封面顯示的位置
# 三個值可配置 left , right , both
position: both
# 當沒有設置cover時,默認的封面顯示
default_cover:

## 文章展示信息
post_meta:
page:
date_type: both # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
date_format: relative # date/relative 顯示日期還是相對日期
categories: true # true or false 主頁是否顯示分類
tags: true # true or false 主頁是否顯示標籤
label: true # true or false 顯示描述性文字
post:
date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
date_format: relative # date/relative 顯示日期還是相對日期
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示標籤
label: true # true or false 顯示描述性文字

## 文章版权信息
post_copyright:
enable: true
decode: false
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

## 文章目录
toc:
enable: true
number: true
style_simple: true

related_post:
enable: true
limit: 6 # 顯示推薦文章數目
date_type: created # or created or updated 文章日期顯示創建日或者更新日

## 文章锚点
anchor: true


## 文章过期提示
noticeOutdate:
enable: true
style: simple # style: simple/flat
limit_day: 365 # When will it be shown
position: top # position: top/bottom
message_prev: 你似乎正在查看一篇很久远的文章,本文编写于
message_next: 天前,其中某些信息可能过期

## 文章分页
post_pagination:
value: 2

## 头像
avatar:
img: /image/avatar.jpg
effect: false

## 复制提示
copy:
enable: true
copyright:
enable: true
limit_count: 50

## 页脚
footer:
owner:
enable: true
since: 2018
custom_text: # 你的自定义信息

darkmode:
enable: true
# dark mode和 light mode切換按鈕
button: true
autoChangeMode: false

## 网站统计
busuanzi:
site_uv: true
site_pv: true
page_pv: true

## 运行时间
runtimeshow:
enable: true
publish_date: 2018/6/8 00:00:00


## 笔记配置
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

## 开启美化
beautify:
enable: true
field: site # site/post
title-prefix-icon: '\f0c1'
title-prefix-icon-color: "#F47466"


# 主頁subtitle
subtitle:
enable: true
# 打字效果
effect: false
# 循環或者只打字一次
loop: false
# source調用第三方服務
# source: false 關閉調用
# source: 1 調用搏天api的隨機語錄(簡體)
# source: 2 調用一言網的一句話(簡體)
# source: 3 調用一句網(簡體)
# source: 4 調用今日詩詞(簡體
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果有英文逗號' , ',請使用轉義字元 ,
# 如果有英文雙引號' " ',請使用轉義字元 "
# 開頭不允許轉義字元,如需要,請把整個句子用雙引號包住
# 例如 ”&quotNever put off till tomorrow what you can do today&quot"
# 如果關閉打字效果,subtitle只會顯示sub的第一行文字
sub:
- "生于尘埃,溺于人海,死于理想高台。"


## 图片缩放
fancybox: true

## 美化弹窗
snackbar:
enable: true
position: top-right
bg_light: '#49b1f5' #light mode時彈窗背景
bg_dark: '#2d3035' #dark mode時彈窗背景

## 分享信息
Open_Graph_meta: true

## 预加载网页
instantpage: true


pjax:
enable: true
exclude:
- /music/
- /no-pjax/

aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: right # left or right
card_author:
enable: true
description:
button:
enable: true
icon: fab fa-github
text: Follow Me
link: https://github.com/liyao2598330
card_announcement:
enable: true
content: 新迁移博客,旧文章丢失无法恢复
card_recent_post:
enable: true
limit: 5 # if set 0 will show all
sort: date # date or updated
sort_order: # Don't modify the setting unless you know how it works
card_categories:
enable: true
limit: 8 # if set 0 will show all
expand: none # none/true/false
sort_order: # Don't modify the setting unless you know how it works
card_tags:
enable: true
limit: 40 # if set 0 will show all
color: false
sort_order: # Don't modify the setting unless you know how it works
card_archives:
enable: true
type: monthly # yearly or monthly
format: MMMM YYYY # eg: YYYY年MM月
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
limit: 8 # if set 0 will show all
sort_order: # Don't modify the setting unless you know how it works
card_webinfo:
enable: true
post_count: true
last_push_date: true

error_404:
enable: true
subtitle: "页面走丢了 (ಥ﹏ಥ)"
background:

footer_bg: true

comments:
use:
- Waline
lazyload: true
count: true
card_post_count: false

waline:
appId: # 更换为自己的appId
appKey: # 更换为自己的appKey
pageSize: 10 # comment list page size
serverURL: # 更换为自己的serverURL
avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image
bg: /image/comment_bg.png # 在source下建立image目录,放置背景图
emojiCDN: # emoji CDN
lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
option:


canvas_ribbon:
enable: true
size: 150
alpha: 0.6
zIndex: -1
click_to_change: true #設置是否每次點擊都更換綵帶
mobile: false # false 手機端不顯示 true 手機端顯示

准备发布

创建需要的仓库

  1. 创建blog存放源代码
  2. 创建你的GitHub用户名.github.io用来存放博客

生成并绑定秘钥

注意,本小节生成的两个文件,带.pub的为公钥文件,不带的则为私钥文件,不要弄混。

1
ssh-keygen -f blog  # 一直回车就好,不要输入任何东西

打开SSH KEY配置页面 ,新建SSH key, 将公钥blog.pub的内容填入,名字自己写一个自己看的懂的就行。

打开博客源码仓库blog,打开设置,Secrets配置页面,创建名为HEXO_DEPLOY_PRI的变量,将私钥blog的内容填写进去

创建部署需要的私钥信息

创建Github Action需要的workflow文件

1
2
3
# 与source文件夹同级,创建文件夹
mkdir -p .github/workflows
touch .github/workflows/deploy.yml

deploy.yaml内容你可以参考下面的配置,只需修改标注的三个地方即可,其他都不用修改

我的配置
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
name: CI

on:
push:
branches:
- master

env:
GIT_USER: # 你的github用户名 例如:liyao2598330
GIT_EMAIL: # 你的github邮箱 例如: liyao2598330@126.com
DEPLOY_REPO: # 你的博客仓库地址,以github.io结尾,例如:liyao2598330/liyao2598330.github.io
DEPLOY_BRANCH: master # 按需修改

jobs:
build:
name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
runs-on: ubuntu-latest
strategy:
matrix:
os: [ubuntu-latest]
node_version: [12.x]

steps:
- name: Checkout
uses: actions/checkout@v2
with:
submodules: true

- name: Checkout deploy repo
uses: actions/checkout@v2
with:
repository: ${{ env.DEPLOY_REPO }}
ref: ${{ env.DEPLOY_BRANCH }}
path: .deploy_git

- name: Use Node.js ${{ matrix.node_version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node_version }}

- name: Configuration environment
env:
HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}
run: |
sudo timedatectl set-timezone "Asia/Shanghai"
mkdir -p ~/.ssh/
echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.name $GIT_USER
git config --global user.email $GIT_EMAIL

- name: Install dependencies
run: |
npm install

- name: Hexo generate
run: |
npm build

- name: Deploy hexo
run: |
npm run deploy

执行push,验证结果

1
git push
查看Action执行结果

打开你的仓库地址:你的Github用户名.github.io 查看效果

设置自定义域名

配置CNAME

如果你有域名,首先登陆至域名管理平台,如果你没有,可以考虑购买 一个。上面链接包括推广,不会增加你的成本,且阿里云会返给我一些代金券。无推广信息的请点这里https://www.aliyun.com/purchasing/2021

假设,我想将blog.lucat.fun自定义域名转至liyao2598330.github.io

以阿里云为例,登录控制台,做如下配置

查看Action执行结果
  • 类型:CNAME
  • 主机记录:blog
  • 记录值:你的github pages地址
  • ttl:无所谓,默认

项目下创建CNAME文件

重要!不添加会导致每次自动构建会丢失CNAME配置

在项目source目录下,创建一个名为CNAME的文件,内容为你的github pages地址

配置Github Pages

在github pages项目Settings配置下,找到相关配置

查看Action执行结果

修改Custom domain为自己刚才配置好的地址,第一次配置,github会帮你申请90天的https,最迟24小时生效。在证书生效之前,你的访问浏览器会警告提示证书不信任。

90天到期前Github会自动帮你续期,所以不用担心过期。