序曲：
在Emlog經歷數次伺服器死亡之後，我開始尋找穩定性高的方案。
我將目光看向了純靜態頁面的Hexo，可以免卻SQ資料庫管理的繁瑣。
不過，Git是什麽？我該如何部署？這些特殊名詞如何去理解？這些，都是一道道難題。
現在距離Hexo建站之初已有半年之久，我將盡力去回憶每一處過程並記錄。當然，這不是教學。
準備：
若不隨意更改核心軟體的安裝路徑，便可避免許多未知的錯誤。
Node.js和Git均為如此。VSCode？本質上是Hexo的管理器罷了。
01.Node.js的安裝
02.選擇Windows Installer X64.msi下載並安裝；
03.按照默認路徑&選項安裝，以規避無法部署的風險；
04.CDM鍵入“node -v”進行驗證，若出現版本訊息即為安裝成功。
02.Git的安裝
03.按照默認路徑&選項安裝，以規避無法部署的風險；
04.CDM鍵入“git –version””node -v””npm -v”進行驗證，若出現版本訊息即為安裝成功。
03.VSCode的安裝
02.選擇Windows X64下載並安裝，路徑可隨意選擇盤符；
P.S.: VSCode本質上作為Hexo的管理器存在，頁面編輯和終端部署均可在其中完成。
部署：
部署包括Hexo的本地部署和Github的通信部署。
本地部署仍需遵循不隨意變動默認安裝目錄的準則。
若SSH無法使用，那麽切換為HTTPS也是一個不錯的方法。
01.Hexo的安裝
02.在終端中鍵入以下指令，若提示鍵入新指令則安裝完成；
03.在C:\Users<用戶名>路徑創建資料夾，用以存放Hexo本地檔案；
04.在終端中鍵入”cd <01步驟創建的文件夾名>”，意為進入03步驟創建的目錄；
05.在終端中鍵入以下指令，若提示鍵入新指令則安裝完成；
06.在終端中鍵入以下指令進行驗證，若出現版本訊息即為安裝結束。
06.在終端中鍵入”hexo clean && hexo g && hexo s”，訪問終端出現的連結，若正確訪問即成功。
P.S.: 若安裝路徑不為默認，Bash終端將在下一次重載系統後無法調用Hexo指令。
02.Github的部署
01.鍵入以下指令，安裝推送部署擴展；
1
| npm install hexo-deployer-git --save
|
02.打開_config.yml文件，修改deploy為如下配置；
1
2
3
4
| deploy:
type: git
repository: [email protected]:Magstic/magstic.github.io.git
branch: main
|
04.若出現文件路徑，則Enter兩次，鍵入如下命令，複製密鑰至剪貼板；
1
| clip < ~/.ssh/id_rsa.pub
|
05.訪問Github-Settings-SSH and GPG Keys，將剪貼板上的密鑰添加至SSH key；
06.創建名為magstic.github.io的Repositories，勾選Public和Add a README file；
07.進入06創建的Repositories，Settings-Page-Branch，選擇main分支。
進入06創建的Repositories，Settings-Page-Custom domain，連結域名並使用HTTPS；
09.鍵入以下指令，使用個人信息鏈接Git；
1
2
| git config --global user.name "Magstic"
git config --global user.email "[email protected]"
|
10.鍵入以下指令，鍵入yes，若出現Hi Magstic…則通信成功。
寫作：
個人在寫作中的常用指令。建立新的貼文無需指令，複製即可。
寫作時會遇見子頁面的需求。新建貼文不是好的方法，因此需要自由頁面。
自由頁面並非真正意義上的子頁面——不過，它仍可以被本地搜索引擎檢索。
01.常規指令
清理緩存檔案
生成靜態頁面
部署至本地訪問
部署至Git訪問
一系列常用的組合指令
1
| hexo clean && hexo g && hexo s
|
1
| hexo clean && hexo g && hexo d
|
02.自由頁面
什麽是“自由頁面”？
Hexo會默認渲染通用路徑下的頁面，有時候會為自定義Html帶來困擾。
因此，我們需要使頁面規避抑或進行Hexo的渲染，以使最終頁面的結構合理。
打開_config.yml文件，修改Directory的skip_render項。
Skip_Render意為“略過渲染”，在這裡可以使用Glob表達式配對路徑。
“source”為資源路徑，在渲染後source中的内容會出現在靜態頁的根目錄。
故修改路徑時略過source，直接填寫其下的子資料夾或者文件名即可。
這是一些例子：
我不想令指定路徑下的一個html被渲染！
1
2
| skip_render:
- "html/aojiru/coll.html"
|
我不想令指定路徑下的全部html被渲染！
1
2
| skip_render:
- "html/aojiru/*"
|
03.其他事項
合理安排資源路徑比其他任何事情都重要。
不論自己能否記清每一檔案的明細，都應做好分類。
此外，Hexo是輕量化的靜態頁，應避免在source中直接上載媒體資源。
當然，這涉及優化，將在最後一個環節中去總結。
美化：
我喜歡極簡單，但是極簡亦會使Hexo失去美感。
Butterfly無繁雜動態效果的同時，也提供了諸多的美化策略。
功能上，檢索與評論功能并不被原生的Hexo支持，我們需要擴展。
01.Butterfly
Butterfly是Hexo的一個主題，由Jerry開發。
Butterfly文檔已囊括90%的美化策略，我將在下面記錄該site上所應用的策略。
1
| npm install hexo-theme-butterfly
|
主題被安裝到該路徑：node_modules/hexo-theme-butterfly
打開_config.yml文件，修改theme項以應用主題。
1
| npm install hexo-renderer-pug hexo-renderer-stylus --save
|
透過npm安裝的内容均在node_modules目錄下，這不便於管理配置檔。
首先，打開該路徑，複製config文件的全部内容：node_modules/hexo-theme-butterfly/_config.yml；
然後，回到根路徑下建立_config.butterfly.yml檔案，將複製的内容貼在該檔案上並保存；
最後，可直接使用根路徑下的_config.butterfly.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
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
|
nav:
logo:
display_title: true
fixed: false
menu:
歸類: /categories/ || fas fa-folder-open
關於: /about/ || fas fa-paper-plane
足跡: /message/ || fas fa-shoe-prints
favicon: https://magstic.art/images/avatar.jpg
avatar:
img: https://magstic.art/images/avatar.jpg
effect: false
disable_top_img: true
error_404:
enable: true
subtitle: '站點重建中，請訪問主頁。'
background: https://s2.loli.net/2023/05/12/V8LgEuI6CnvYe7F.png
post_meta:
page:
date_type: created
date_format: date
categories: true
tags: false
label: true
post:
date_type: both
date_format: date
categories: true
tags: true
label: true
photofigcaption: false
copy:
enable: true
copyright:
enable: false
toc:
post: true
page: false
number: true
expand: false
style_simple: false
scroll_percent: true
post_copyright:
enable: false
decode: false
footer:
owner:
enable: true
since: 2020
custom_text:
copyright: true
aside:
enable: true
hide: false
button: true
mobile: true
position: right
display:
archive: true
tag: true
category: true
card_author:
enable: true
description:
button:
enable: true
icon: fab fa-google
text: Gmail
link: mailto:[email protected]
card_recent_post:
enable: true
limit: 2
card_archives:
enable: false
card_webinfo:
enable: false
post_count: true
last_push_date: true
darkmode:
enable: true
|
- 調整主題檔
控制avatar不被滑鼠動作響應。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| //node_modules\hexo-theme-butterfly\source\css\_layout\aside.styl
.avatar-img
overflow: hidden
margin: 0 auto
width: 110px
height: 110px
border-radius: 70px
img
width: 100%
height: 100%
transition: filter 0ms ease-in .0s, transform .0s
object-fit: cover
&:hover
transform: rotate(0deg)
|
02.星空背景
網路流行的星空背景，我進行了螢火蟲化。
1
2
3
4
5
6
7
| //_config.butterfly.yml
inject:
head:
- <link rel="stylesheet" href="/css/universe.css">
bottom:
- <canvas id="universe"></canvas>
- <script defer src="/js/universe.js"></script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| //node_modules\hexo-theme-butterfly\source\css\universe.css
#universe{
display: block;
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
|
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
|
function fireflies() {
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var canvas = document.getElementById("universe"),
ctx = canvas.getContext("2d"),
fireflies = [],
numFireflies = 50,
fireflySpeed = 0.2,
fireflySize = 1,
fireflyOpacityMin = 0.2,
fireflyOpacityMax = 0.5;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
function Firefly() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.dx = (Math.random() < 0.5 ? -1 : 1) * fireflySpeed;
this.dy = (Math.random() < 0.5 ? -1 : 1) * fireflySpeed;
this.color = "rgba(255, 215, 0, " + (Math.random() * (fireflyOpacityMax - fireflyOpacityMin) + fireflyOpacityMin) + ")";
this.flashing = false;
this.flashSpeed = Math.random() * 0.2 + 0.5;
}
Firefly.prototype.update = function() {
this.x += this.dx;
this.y += this.dy;
if (this.x < 0 || this.x > canvas.width) this.dx *= -1;
if (this.y < 0 || this.y > canvas.height) this.dy *= -1;
};
Firefly.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, fireflySize, 0, 2 * Math.PI);
ctx.fillStyle = this.color;
ctx.fill();
};
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < fireflies.length; i++) {
var firefly = fireflies[i];
firefly.update();
firefly.draw();
}
requestAnimationFrame(animate);
}
for (var i = 0; i < numFireflies; i++) {
fireflies.push(new Firefly());
}
animate();
}
fireflies();
|
03.本地檢索
本地檢索是靜態BLOG的必備之物。
1
| npm install hexo-generator-search --save
|
1
2
3
4
5
6
7
|
local_search:
enable: true
preload: false
top_n_per_article: 0
unescape: false
CDN:
|
04.摺叠擴展
Hexo的摺叠擴展不被Lazyload規則響應，這不利於優化。
hexo-sliding-spoiler雖不完美，但在優化面前，必須取捨。
1
| install hexo-sliding-spoiler --save
|
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
| //node_modules\hexo-sliding-spoiler\assets\spoiler.css
.spoiler {
margin: 5px 0;
padding: 0 15px;
border: 0.5px solid #4e4e4e80;
position: relative;
clear: both;
border-radius: 3px;
}
.spoiler .spoiler-title {
background: #4e4e4e60;
margin: 0 -15px;
padding: 5px 15px;
color: #ffffff;
font-weight: bold;
font-size: 13px;
display: block;
cursor: pointer;
}
.spoiler .spoiler-title:before {
font-weight: bold;
}
.spoiler.collapsed .spoiler-title:before {
content: "▶ ";
}
.spoiler.expanded .spoiler-title:before {
content: "▼ ";
}
.spoiler .spoiler-content {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
-moz-transition-duration: 0.1s;
-webkit-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
transition-duration: 0.8s;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.spoiler.collapsed .spoiler-content {
overflow: hidden;
max-height: 0;
}
.spoiler.expanded .spoiler-content {
max-height: 8000px;
overflow: hidden;
}
.spoiler .spoiler-content p:first-child {
margin-top: 0 !important;
}
|
05.留言系統
該BLOG使用Twikoo進行Hugging Face+MongoDB部署。
MongoDB的Free Instance對於一個BLOG的評論區域足矣。
我不推薦使用圖像系統，因為依賴於第三方圖床的服務並不穩定。
優化：
我不想使用Loading動畫，因此我需要使用Lazyload。
01.Lazyload
使用Butterfly原生的Lazyload即可，因為擴展並不穩定。
為了評論區能夠在大陸地區正常訪問，我關閉了評論的Lazyload。
1
2
3
4
5
6
7
8
9
10
11
| //_config.butterfly.yml
comments:
lazyload: false
lazyload:
enable: true
field: post
placeholder:
blur: true
|
02.Google Search Console
我不希望Baidu引擎收錄我，因此我使用Google Search Console進行管理。
Baidu是最大的中文檢索引擎，但其Console無比糟糕；因此，我注銷了賬戶。
我也不希望一些内容被百度索引。因此，我使用Cloudflare的Rules拒絕了一切百度的Spider。
03.Cloudflare
Cloudflare的面板無比簡潔友好。
我主要使用域管理、WAF以及R2存儲桶。
我使用Art域進行Blog管理，Top域進行資源管理。
Git無比方便，我無法捨棄Git Pages去使用CF Pages。
如果我使用Actions，這會使部分CSS無法被渲染，同時BLOG的時間綫會紊亂。
……總之，我需要使DNS解析至Github。
1
2
3
4
5
| 【A】185.199.111.153
【A】185.199.110.153
【A】185.199.109.153
【A】185.199.108.153
【CNAME】magstic.github.io
|
Cloudflare的Proxy在大陸地區亦可獲得不錯的訪問速度。
我使用Cloudflare的WAF設置防火牆規則。
為了Site的安全，我不會釋放全部的WAF規則。
網路安全 - WAF- 建立規則
1
2
3
4
5
| 【使用者代理程式】
【包含】python-requests
【Or】Go-http-client
【Or】baidu
……
|
我使用R2存儲桶存放Blog的檔案。
我過去使用七牛雲，但服務極度不穩定。
R2提供的Free Plan無比優惠，這使我無比心動。
我使用top域綁定了存儲桶，起源是我沒有想到CF提供免費的SSL服務。
