从0开始搭建你的个人博客(Hexo+Butterfly)

前言

相信不少人都曾经想过搭建一个属于自己的博客吧。

本篇教程将基于此目的,使用博客框架Hexo与主题Butterfly进行搭建,使用Qexo进行管理,Github Actions 进行在线部署。

本篇教程需要你有一定的Windows/Linux基础。

搭建博客

1
推荐系统要求:Windows10/11、Mac OS、Linux最新版

本教程以Windows10、64位操作系统为例。

知识准备

本篇教程中涉及的英文单词不懂的可以翻译,但你应该认识一些基本单词如error fatal success warn等。

环境准备

Node.js

已有Node.js环境的请跳过此步。

访问 下载 | Node.js (nodejs.org),选择适合你系统的安装包[1]

本教程使用https://nodejs.org/dist/v18.12.1/node-v18.12.1-x64.msi作为安装包。

下载完成后打开安装包,界面应该是这样的:

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_6e1ef7d1a6e6e779cf984d9d4500818e.png

接下来,点击最下方的Next按钮,界面应该变成这样:

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_c8f7b234e9732d16295d959cc0caabba.png

依次点击红框中的按钮,接下来设定安装目录,设定好后点Next

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_8554eb8085df79449c74834af13182aa.png

下一步也点击Next

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_eda1bc54b19d2678a8266a3c4f3a6f86.png

这一步也点Next

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_9397b316abeea85b8c552f900a20907e.png

这一步点击Install

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_0133e65da48d639a0141f31688f08cd8.png

等待安装完成:

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_bd47fb8376b7525a984277e6617130f7.png

出现这一界面则表明安装完成,点击Finish即可结束:

Node.js安装界面8

Git

接下来安装GitGit是一个版本控制工具。

访问CNPM Binaries Mirror (npmmirror.com),将页面划到最下方,进入最后一个目录(版本号最大的),点进去后下载名称类似Git-x.xx.x.x-64-bit.exe(x代表任何数字),32位系统请将64改为32。下载后安装。

安装选项请看Git下载、安装和环境变量配置 - 简书 (jianshu.com),这里不再水字数。

这些账号按需注册即可,其中GitHub、Vercel账号是必须的,其他账号有需求再注册。

Github账号(源代码、图床)

访问Join GitHub · GitHub,准备注册账号,首先它会提示你输入你的邮箱地址,输入后按回车,接着输入密码,按回车,最后输入用户名,即可注册成功,看不懂可以用浏览器自带翻译:

注册Github账号

Vercel账号(托管)

Vercel账号无需另外注册,访问Sign Up – Vercel并使用Github账号登录即可,看不懂可以用浏览器自带翻译:

image-20230107123824898

Cloudflare账号(域名)

访问Cloudflare 中国官网 | 智能化云服务平台 | 免费CDN安全防护 | Cloudflare (cloudflare-cn.com),点击右上角注册即可,支持简体中文。

LeanCloud账号(评论)

进入注册 · LeanCloud注册,默认为国际版,无需备案、实名认证等,如果你喜欢中国版,可在左上角切换。

本章英文单词:

setup v. 安装 wizard n. 向导 custom adj. 自定义的 automatically adv. 自动地 requires v. 需要(三单形式)

feature n. 功能(常缩写为featsubfeatures n.子功能(复数形式,由subfeature组成,sub adj. 附属的)

mirror n. 镜像、镜子

Hexo

安装Hexo

接下来开始配置Hexo

Hexo无需手动下载,找个位置新建文件夹(路径中最好不要有中文和特殊字符,不推荐放C盘),进入文件夹后在空白位置按住Shift并单击鼠标右键,选择在此处打开 PowerShell 窗口 (S)

别把你的文件夹放到OneDrive里,要不然成千上万的小文件会让你的CPU炸掉~~,别问我怎么知道的。~~

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_b308409b48023766b011cc8726c98439.png

点击后,会弹出这样的窗口:

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_8895feb81e9393dc77e8e31471e27871.png

在里面输入如下:

1
npm i yarn hexo-cli -g --save

解释:

npm:一个包管理器,相当于手机里的软件商店。

yarn:另一个包管理器,为什么要再安一个?因为npm实在是太慢了,相信你在刚才安装时一定深有体会。

hexo-cil:我们的主角,hexo,是一个搭建网站的框架。

输出应当如下(以#开头表示注释):

1
2
3
4
5
6
7
PS E:\OneDrive - cookie987\WebSite\blog\1> npm i yarn hexo-cli -g --save # 这行是输入后的效果

changed 60 packages in 1m # 表示在一分钟里更改了60个包

15 packages are looking for funding # 这行是说15个包正在寻求赞助
run `npm fund` for details # 如果你要赞助,可以运行 npm fund 来查看详情
PS E:\OneDrive - cookie987\WebSite\blog\1>

初始化博客

接着,输入:

1
hexo init

当然了,这个过程也不是一帆风顺的,你可能会遇到以下报错:

禁止运行脚本报错

解决方法如下:

  1. 右键开始菜单图标,选择PowerShell (管理员)(A)

  2. 这会再次打开一个PowerShell,输入:

    1
    set-ExecutionPolicy RemoteSigned
  3. 此时输入Y然后按回车:

    https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_4c1fe2003c0737c9d690a3d14177a611.png

  4. 随后关闭即可。

这时,再次执行刚刚报错的命令:

要快速运行执行过的命令,可以按键盘上的以显示之前执行过的。

输出应如下:

1
2
3
4
5
6
7
PS E:\OneDrive - cookie987\WebSite\blog\1> hexo init # 刚刚输入的命令
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git # 开始下载模板
INFO Install dependencies # 开始安装依赖,这里开始使用 yarn 包管理器
warninging hexo-renderer-stylus > stylus > css > source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
[#################################################################] 456/456
INFO Start blogging with Hexo! # 开始用 Hexo 写博客吧!
PS E:\OneDrive - cookie987\WebSite\blog\1>

目录组成

Hexo的目录组成如下:

(部分文件、文件夹未列出)

1
2
3
4
5
6
7
8
9
10
11
12
├─.github # Github 平台的特殊目录,可以用来实现在线部署等操作
├─node_modules # 模块安装目录,相当于你手机里安装软件的文件夹
├─scaffolds # 模板,由于某些内容需要重复使用,便存放在这里
├─source
│ └─_posts # 以 _ 开头,是存放文章的目录
│ └─hello-word.md # 默认的文章
├─themes # 主题目录,下载的主题文件放在这里
├─.gitignore # 等使用在线部署时上传到云端所要忽略的文件列表
├─_config.landscape.yml # 默认主题的配置
├─_config.yml # Hexo的配置
├─package.json # 存包列表的文件
└─yarn.lock # yarn的锁文件,锁文件是锁定包版本的文件,以防重大更新

配置博客

使用你喜欢的编辑器打开_config.yml,这里以使用Vim为例,下面是默认配置:

这份配置文件使用YML语言编写,它是一门对缩进、空格要求严格的语言,在编辑时请注意!

以下内容仅列出默认配置,关于各项配置的说明等等请看文档 | Hexo,这里就不拿过来水了。

默认配置
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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en #语言设置
timezone: ''

# 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
permalink: :year/:month/:day/: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: landscape

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: ''

测试博客

在PowerShell中输入以下命令:

1
hexo clean; hexo g; hexo s

该命令被称为Hexo三连

输出应该如下:

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
PS G:\1> hexo clean; hexo g; hexo s
INFO Validating config # 表示验证配置中 validating v.验证 (validate的现在分词)
INFO Validating config
INFO Start processing
INFO Files loaded in 619 ms # 在 619 毫秒(ms)内载入了文件
INFO Generated: index.html # generated v.生成 (generate的过去分词和过去式)
INFO Generated: archives/2023/index.html
INFO Generated: archives/index.html
INFO Generated: fancybox/jquery.fancybox.min.css
INFO Generated: js/script.js
INFO Generated: css/style.css
INFO Generated: css/fonts/fontawesome-webfont.woff
INFO Generated: js/jquery-3.4.1.min.js
INFO Generated: fancybox/jquery.fancybox.min.js
INFO Generated: css/fonts/fontawesome-webfont.woff2
INFO Generated: archives/2023/01/index.html
INFO Generated: css/fonts/FontAwesome.otf
INFO Generated: css/fonts/fontawesome-webfont.eot
INFO Generated: css/images/banner.jpg
INFO Generated: css/fonts/fontawesome-webfont.ttf
INFO Generated: 2023/01/06/hello-world/index.html
INFO Generated: css/fonts/fontawesome-webfont.svg
INFO 17 files generated in 784 ms
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop. # Hexo 已经在 http://localhost:4000/ 运行,按下 Ctrl+C 停止

localhost表示你的电脑,和输入你电脑的ip地址作用相当。后面的:4000表示在端口4000上运行。

http://localhost:4000/ 粘贴到浏览器地址框即可访问。

下面是访问的画面:

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_4de72ab23887be3c1b3dd5ca8895b462.png

怎么样,是不是很好看?

Butterfly

接下来使用的Butterfly版本为4.5.1。

安装Butterfly

为了让它的美观程度进一步提升,我们接下来给它换个主题——Butterfly[^2]。

先按下Ctrl-C停止Hexo运行。输出如下(^C 表示Ctrl-C):

1
2
3
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop. ^C
INFO Have a nice day
PS G:\1>

在PowerShell输入:

1
cd .\themes\

cd表示跳转到指定的目录。

在Windows下,仅运行cd + [目录名]无法切换盘符。

输出如下:

1
2
PS G:\1>cd .\themes\
PS G:\1\themes>

接下来,输入:

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git # clone v.克隆

-b参数表示指定分支,如果你喜欢开发版(不稳定),请把master改为dev

输出如下:

1
2
3
4
5
6
7
8
9
10
PS G:\1\themes> git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git
Cloning into 'hexo-theme-butterfly'...
remote: Enumerating objects: 5659, done. # v.计数 (enumerate的现在分词)
remote: Counting objects: 100% (266/266), done.
remote: Compressing objects: 100% (200/200), done. # compressing v.压缩 (compress的现在分词)
remote: Total 5659 (delta 115), reused 189 (delta 66), pack-reused 5393 # remote n.远程
Receiving objects: 100% (5659/5659), 2.52 MiB | 3.76 MiB/s, done. # receiving v.接收 (receive的现在分词)

Resolving deltas: 100% (3683/3683), done.
PS G:\1\themes>

由于DNS污染和

中国大陆的防火墙

,如果提示:fatal: unable to access https://github.com/jerryc127/hexo-theme-butterfly.git,可采用以下解决方案:

将上一步中的https://github.com/jerryc127/hexo-theme-butterfly.git改为https://gitee.com/immyw/hexo-theme-butterfly.git 然后重新执行。

将上一步中的https://github.com/jerryc127/hexo-theme-butterfly.git改为https://ghproxy.com/https://github.com/jerryc127/hexo-theme-butterfly.git 然后重新执行。

安装dotnetcore/FastGithub: github加速神器,解决github打不开、用户头像无法加载、releases无法上传下载、git-clone、git-pull、git-push失败等问题(不过这个是在Github上的,你得抓准时机或使用 https://ghproxy.com
git操作提示SSL certificate problem需要关闭git的证书验证:git config --global http.sslverify false

如果输出如下,请重新配置环境变量:

1
2
3
4
5
6
git : 无法将“git”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
所在位置 行:1 字符: 1
+ git
+ ~
+ CategoryInfo : ObjectNotFound: (d:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException

执行完上面的命令后,请执行下面的命令以检查是否完成:

1
ls

输出中应包含hexo-theme-butterfly

1
2
3
4
5
6
7
8
9
10
11
12
13
PS G:\1\themes> ls


目录: G:\1\themes


Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2023/1/6 17:49 hexo-theme-butterfly # 看到这个就好
-a---- 2023/1/6 15:06 0 .gitkeep


PS G:\1\themes>

随后把hexo-theme-butterfly文件夹改名为butterfly

接着输入:

1
cd ..

..表示上级目录。

Butterfly需要一些依赖包,输入以下命令来安装:

1
yarn add hexo-renderer-pug hexo-renderer-stylus --save

此时编辑_config.yml,将:

1
theme: landspace

改成:

1
theme: butterfly

然后进行Hexo三连,如果配置没有问题,那么在启动过程中,你将会看到以下效果:

https://npm.elemecdn.com/cookie987-assets@1.7.0/img/Qexo/2023/1/image_e388abcec9c12a4a50fc6e4ab8949eea.png

访问效果如下:

image-20230107102240649

升级主题方法:在theme\butterfly目录执行git pull

配置Butterfly

在配置之前,我们需要把theme\butterfly\_config.yml复制到博客根目录并改名为_config.butterfly.yml,这样以至于升级博客不会丢失配置。

接下来我们配置一下Butterfly。下面是它的默认配置文件,如果配置错了可以来这里还原:

默认配置
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
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
# Main menu navigation (導航目錄)
# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單
# --------------------------------------

menu:
# Home: / || fas fa-home
# Archives: /archives/ || fas fa-archive
# Tags: /tags/ || fas fa-tags
# Categories: /categories/ || fas fa-folder-open
# List||fas fa-list:
# Music: /music/ || fas fa-music
# Movie: /movies/ || fas fa-video
# Link: /link/ || fas fa-link
# About: /about/ || fas fa-heart

# Code Blocks (代碼相關)
# --------------------------------------

highlight_theme: light # darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: false

# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
enable: true
copyright:
enable: false
limit_count: 50

# social settings (社交圖標設置)
# formal:
# icon: link || the description
social:
# fab fa-github: https://github.com/xxxxx || Github
# fas fa-envelope: mailto:xxxxxx@gmail.com || Email

# search (搜索)
# see https://butterfly.js.org/posts/ceeb73f/#搜索系統
# --------------------------------------

# Algolia search
algolia_search:
enable: false
hits:
per_page: 6

# Local search
local_search:
enable: false
preload: false
CDN:

# Math (數學)
# --------------------------------------
# About the per_page
# if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js)
# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter)
# (false 需要時加載,須在使用的 Markdown Front-matter 加上 mathjax: true)

# MathJax
mathjax:
enable: false
per_page: false

# KaTeX
katex:
enable: false
per_page: false
hide_scrollbar: true

# Image (圖片設置)
# --------------------------------------

# Favicon(網站圖標)
favicon: /img/favicon.png

# Avatar (頭像)
avatar:
img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png
effect: false

# Disable all banner image
disable_top_img: false

# The banner image of home page
index_img:

# If the banner of page not setting, it will show the top_img
default_top_img:

# The banner image of archive page
archive_img:

# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img:

# The banner image of tag page
# format:
# - tag name: xxxxx
tag_per_img:

# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img:

# The banner image of category page
# format:
# - category name: xxxxx
category_per_img:

cover:
# display the cover or not (是否顯示文章封面)
index_enable: true
aside_enable: true
archives_enable: true
# the position of cover in home page (封面顯示的位置)
# left/right/both
position: both
# When cover is not set, the default cover is displayed (當沒有設置cover時,默認的封面顯示)
default_cover:
# - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

# Replace Broken Images (替換無法顯示的圖片)
error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg

# A simple 404 page
error_404:
enable: false
subtitle: 'Page Not Found'
background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

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

# wordcount (字數統計)
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
wordcount:
enable: false
post_wordcount: true
min2read: true
total_wordcount: true

# Display the article introduction on homepage
# 1: description
# 2: both (if the description exists, it will show description, or show the auto_excerpt)
# 3: auto_excerpt (default)
# false: do not show the article introduction
index_post_content:
method: 3
length: 500 # if you set method to 2 or 3, the length need to config

# anchor
anchor:
button:
enable: false
always_show: false
icon: # the unicode value of Font Awesome icon, such as '\3423'
auto_update: false # when you scroll in post, the URL will update according to header id.

# Post
# --------------------------------------

# toc (目錄)
toc:
post: true
page: false
number: true
expand: false
style_simple: false # for post

post_copyright:
enable: true
decode: false
author_href:
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# Sponsor/reward
reward:
enable: false
QR_code:
# - img: /img/wechat.jpg
# link:
# text: wechat
# - img: /img/alipay.jpg
# link:
# text: alipay

# Post edit
# Easily browse and edit blog source code online.
post_edit:
enable: false
# url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
# For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
url:

# Related Articles
related_post:
enable: true
limit: 6 # Number of posts displayed
date_type: created # or created or updated 文章日期顯示創建日或者更新日

# figcaption (圖片描述文字)
photofigcaption: false

# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 1

# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
enable: false
style: flat # style: simple/flat
limit_day: 500 # When will it be shown
position: top # position: top/bottom
message_prev: It has been
message_next: days since the last update, the content of the article may be outdated.

# Share System (分享功能)
# --------------------------------------

# AddThis
# https://www.addthis.com/
addThis:
enable: false
pubid:

# Share.js
# https://github.com/overtrue/share.js
sharejs:
enable: true
sites: facebook,twitter,wechat,weibo,qq

# AddToAny
# https://www.addtoany.com/
addtoany:
enable: false
item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

# Comments System
# --------------------------------------

comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
use: # Valine,Disqus
text: true # Display the comment name next to the button
# lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: false
count: false # Display comment count in post's top_img
card_post_count: false # Display comment count in Home Page

# disqus
# https://disqus.com/
disqus:
shortname:
apikey: # For newest comments widget

# Alternative Disqus - Render comments with Disqus API
# DisqusJS 評論系統,可以實現在網路審查地區載入 Disqus 評論列表,兼容原版
# https://github.com/SukkaW/DisqusJS
disqusjs:
shortname:
apikey:
option:

# livere (來必力)
# https://www.livere.com/
livere:
uid:

# gitalk
# https://github.com/gitalk/gitalk
gitalk:
client_id:
client_secret:
repo:
owner:
admin:
option:

# valine
# https://valine.js.org
valine:
appId: # leancloud application app id
appKey: # leancloud application app key
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
bg: # valine background
visitor: false
option:

# waline - A simple comment system with backend support fork from Valine
# https://waline.js.org/
waline:
serverURL: # Waline server address url
bg: # waline background
pageview: false
option:

# utterances
# https://utteranc.es/
utterances:
repo:
# Issue Mapping: pathname/url/title/og:title
issue_term: pathname
# Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
light_theme: github-light
dark_theme: photon-dark

# Facebook Comments Plugin
# https://developers.facebook.com/docs/plugins/comments/
facebook_comments:
app_id:
user_id: # optional
pageSize: 10 # The number of comments to show
order_by: social # social/time/reverse_time
lang: zh_TW # Language en_US/zh_CN/zh_TW and so on

# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
envId:
region:
visitor: false
option:

# Giscus
# https://giscus.app/
giscus:
repo:
repo_id:
category_id:
theme:
light: light
dark: dark
option:

# Remark42
# https://remark42.com/docs/configuration/frontend/
remark42:
host: # Your Host URL
siteId: # Your Site ID
option:

# Artalk
# https://artalk.js.org/guide/frontend/config.html
artalk:
server:
site:
visitor: false
option:

# Chat Services
# --------------------------------------

# Chat Button [recommend]
# It will create a button in the bottom right corner of website, and hide the origin button
chat_btn: false

# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
chat_hide_show: false

# chatra
# https://chatra.io/
chatra:
enable: false
id:

# tidio
# https://www.tidio.com/
tidio:
enable: false
public_key:

# daovoice
# http://daovoice.io/
daovoice:
enable: false
app_id:

# gitter
# https://gitter.im/
gitter:
enable: false
room:

# crisp
# https://crisp.chat/en/
crisp:
enable: false
website_id:

# messenger
# https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/
messenger:
enable: false
pageID:
lang: zh_TW # Language en_US/zh_CN/zh_TW and so on

# Footer Settings
# --------------------------------------
footer:
owner:
enable: true
since: 2020
custom_text:
copyright: true # Copyright of theme and framework

# Analysis
# --------------------------------------

# Baidu Analytics
# https://tongji.baidu.com/web/welcome/login
baidu_analytics:

# Google Analytics
# https://analytics.google.com/analytics/web/
google_analytics:

# CNZZ Analytics
# https://www.umeng.com/
cnzz_analytics:

# Cloudflare Analytics
# https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics:

# Microsoft Clarity
# https://clarity.microsoft.com/
microsoft_clarity:

# Advertisement
# --------------------------------------

# Google Adsense (谷歌廣告)
google_adsense:
enable: false
auto_ads: true
js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
client:
enable_page_level_ads: true

# Insert ads manually (手動插入廣告)
# ad:
# index:
# aside:
# post:

# Verification (站長驗證)
# --------------------------------------

site_verification:
# - name: google-site-verification
# content: xxxxxx
# - name: baidu-site-verification
# content: xxxxxxx

# Beautify/Effect (美化/效果)
# --------------------------------------

# Theme color for customize
# Notice: color value must in double quotes like "#000" or may cause error!

# theme_color:
# enable: true
# main: "#49B1F5"
# paginator: "#00c4b6"
# button_hover: "#FF7242"
# text_selection: "#00c4b6"
# link_color: "#99a9bf"
# meta_color: "#858585"
# hr_color: "#A4D8FA"
# code_foreground: "#F47466"
# code_background: "rgba(27, 31, 35, .05)"
# toc_color: "#00c4b6"
# blockquote_padding_color: "#49b1f5"
# blockquote_background_color: "#49b1f5"
# scrollbar_color: "#49b1f5"
# meta_theme_color_light: "ffffff"
# meta_theme_color_dark: "#0d0d0d"

# The top_img settings of home page
# default: top img - full screen, site info - middle (默認top_img全屏,site_info在中間)
# The position of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離)
index_site_info_top:
# The height of top_img, eg: 300px/300em/300rem (主頁top_img高度)
index_top_img_height:

# The user interface setting of category and tag page (category和tag頁的UI設置)
# index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣)
# default - same as archives UI 默認跟archives頁面UI一樣
category_ui: # 留空或 index
tag_ui: # 留空或 index

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background:

# Footer Background
footer_bg: false

# the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)
rightside-bottom:

# Enter transitions (開啓網頁進入效果)
enter_transitions: true

# Background effects (背景特效)
# --------------------------------------

# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
enable: false
size: 150
alpha: 0.6
zIndex: -1
click_to_change: false
mobile: false

# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
enable: false
mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
enable: false
color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
opacity: 0.7 # the opacity of line (0~1), default: 0.5.
zIndex: -1 # z-index property of the background, default: -1.
count: 99 # the number of lines, default: 99.
mobile: false

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
enable: false
colorful: true # open particle animation (冒光特效)
shake: true # open shake (抖動特效)
mobile: false

# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
enable: false
zIndex: 9999 # -1 or 9999
mobile: false

# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
enable: false
mobile: false

# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
enable: false
text:
# - I
# - LOVE
# - YOU
fontSize: 15px
random: false
mobile: false

# Default display mode (網站默認的顯示模式)
# light (default) / dark
display_mode: light

# Beautify (美化頁面顯示)
beautify:
enable: false
field: post # site/post
title-prefix-icon: # '\f0c1'
title-prefix-icon-color: # '#F47466'

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
global-font-size:
code-font-size:
font-family:
code-font-family:

# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
font_link:
font-family:

# The setting of divider icon (水平分隔線圖標設置)
hr_icon:
enable: true
icon: # the unicode value of Font Awesome icon, such as '\3423'
icon-top:

# the subtitle on homepage (主頁subtitle)
subtitle:
enable: false
# Typewriter Effect (打字效果)
effect: true
# Effect Speed Options (打字效果速度參數)
startDelay: 300 # time before typing starts in milliseconds
typeSpeed: 150 # type speed in milliseconds
backSpeed: 50 # backspacing speed in milliseconds
# loop (循環打字)
loop: true
# source 調用第三方服務
# source: false 關閉調用
# source: 1 調用一言網的一句話(簡體) https://hitokoto.cn/
# source: 2 調用一句網(簡體) http://yijuzhan.com/
# source: 3 調用今日詩詞(簡體) https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果關閉打字效果,subtitle 只會顯示 sub 的第一行文字
sub:

# Loading Animation (加載動畫)
preloader:
enable: false
# source
# 1. fullpage-loading
# 2. pace (progress bar)
source: 1
# pace theme (see https://codebyzach.github.io/pace/)
pace_css_url:

# aside (側邊欄)
# --------------------------------------

aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: right # left or right
display:
archive: true
tag: true
category: true
card_author:
enable: true
description:
button:
enable: true
icon: fab fa-github
text: Follow Me
link: https://github.com/xxxxxx
card_announcement:
enable: true
content: This is my Blog
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
sort_order: # Don't modify the setting unless you know how it works

# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
site_uv: true
site_pv: true
page_pv: true

# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
enable: false
publish_date:

# Aside widget - Newest Comments
newest_comments:
enable: false
sort_order: # Don't modify the setting unless you know how it works
limit: 6
storage: 10 # unit: mins, save data to localStorage
avatar: true

# Bottom right button (右下角按鈕)
# --------------------------------------

# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
enable: false
# The text of a button
default:
# the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese)
defaultEncoding: 2
# Time delay
translateDelay: 0
# The text of the button when the language is Simplified Chinese
msgToTraditionalChinese: '繁'
# The text of the button when the language is Traditional Chinese
msgToSimplifiedChinese: '簡'

# Read Mode (閲讀模式)
readmode: true

# dark mode
darkmode:
enable: true
# Toggle Button to switch dark/light mode
button: true
# Switch dark/light mode automatically (自動切換 dark mode和 light mode)
# autoChangeMode: 1 Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
# autoChangeMode: 2 Switch dark mode between 6 pm to 6 am
# autoChangeMode: false
autoChangeMode: false

# Don't modify the following settings unless you know how they work (非必要請不要修改 )
# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
# Don't repeat 不要重複
rightside_item_order:
enable: false
hide: # readmode,translate,darkmode,hideAside
show: # toc,chat,comment

# Lightbox (圖片大圖查看模式)
# --------------------------------------
# You can only choose one, or neither (只能選擇一個 或者 兩個都不選)

# medium-zoom
# https://github.com/francoischalifour/medium-zoom
medium_zoom: false

# fancybox
# http://fancyapps.com/fancybox/3/
fancybox: true

# Tag Plugins settings (標籤外掛)
# --------------------------------------

# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
enable: false
# built-in themes: default/forest/dark/neutral
theme:
light: default
dark: dark

# Note (Bootstrap Callout)
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: flat
icons: true
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

# other
# --------------------------------------

# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
enable: false
exclude:
# - xxxx
# - xxxx

# Inject the css and script (aplayer/meting)
aplayerInject:
enable: false
per_page: true

# Snackbar (Toast Notification 彈窗)
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
enable: false
position: bottom-left
bg_light: '#49b1f5' # The background color of Toast Notification in light mode
bg_dark: '#1f1f1f' # The background color of Toast Notification in dark mode

# https://instant.page/
# prefetch (預加載)
instantpage: false

# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之間添加空格)
pangu:
enable: false
field: site # site/post

# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
enable: false
field: site # site/post
placeholder:
blur: false

# PWA
# See https://github.com/JLHwung/hexo-offline
# ---------------
# pwa:
# enable: false
# manifest: /pwa/manifest.json
# apple_touch_icon: /pwa/apple-touch-icon.png
# favicon_32_32: /pwa/32.png
# favicon_16_16: /pwa/16.png
# mask_icon: /pwa/safari-pinned-tab.svg

# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta:
enable: true
option:
# twitter_card:
# twitter_image:
# twitter_id:
# twitter_site:
# google_plus:
# fb_admins:
# fb_app_id:

# Add the vendor prefixes to ensure compatibility
css_prefix: true

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
bottom:
# - <script src="xxxx"></script>

# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
# The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
# option: local/jsdelivr/unpkg/cdnjs/custom
# Dev version can only choose. ( dev版的主題只能設置為 local )
internal_provider: local

# The CDN provider of third party scripts (第三方 js 的 cdn 配置)
# option: local/jsdelivr/unpkg/cdnjs/custom
# when set it to local, you need to install hexo-butterfly-extjs
third_party_provider: jsdelivr

# Add version number to CDN, true or false
version: false

# Custom format
# For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
custom_format:

option:
# main_css:
# main:
# utils:
# translate:
# local_search:
# algolia_js:
# algolia_search_v4:
# instantsearch_v4:
# pjax:
# gitalk:
# gitalk_css:
# blueimp_md5:
# valine:
# disqusjs:
# disqusjs_css:
# twikoo:
# waline_js:
# waline_css:
# sharejs:
# sharejs_css:
# mathjax:
# katex:
# katex_copytex:
# mermaid:
# canvas_ribbon:
# canvas_fluttering_ribbon:
# canvas_nest:
# lazyload:
# instantpage:
# typed:
# pangu:
# fancybox_css_v4:
# fancybox_v4:
# medium_zoom:
# snackbar_css:
# snackbar:
# activate_power_mode:
# fireworks:
# click_heart:
# ClickShowText:
# fontawesomeV6:
# flickr_justified_gallery_js:
# flickr_justified_gallery_css:
# aplayer_css:
# aplayer_js:
# meting_js:
# prismjs_js:
# prismjs_lineNumber_js:
# prismjs_autoloader:
# artalk_js:
# artalk_css:

由于Butterfly的配置大多带有文字说明且有Butterfly 安裝文檔(三) 主題配置-1 | Butterfly,这里不会详细地解释每一项。默认你已经完成了基础设置。

评论设置

进行完Butterfly的基础设置后,我们来稍作修改、美化一下,首先就是添加评论。

本篇教程以使用Waline作为评论系统。

先注册一个LeanCloud账号,请参阅环境准备章节。

接下来进行Waline的部署,参见快速上手 | Waline

部署完成后,打开_config.butterfly.yml,找到:

1
2
3
4
5
6
7
8
9
10
comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
use: # Valine,Disqus
text: true # Display the comment name next to the button
# lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: false
count: false # Display comment count in post's top_img
card_post_count: false # Display comment count in Home Page

改为:

1
2
3
4
5
6
7
8
9
10
comments:
# 支持两个评论系统,默认是第一个
# 选项:Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
use: Waline # Valine,Disqus
text: true # 在评论切换按钮后面显示名称
# 懒加载: 仅当看见评论区时才开始加载(可以略微提示网页加载速度)
# 如果你把它打开,那么将无法计数
lazyload: false # 按需开启
count: true # 在文章的头图上显示评论计数,按需开启
card_post_count: true # 在主页上显示评论计数,按需开启

接着,按照说明配置:

1
2
3
4
5
6
7
# waline - A simple comment system with backend support fork from Valine
# https://waline.js.org/
waline:
serverURL: # Waline 服务端 URl,按照以下格式填:https://xxx.xxx.xxx,末尾无需加“/”
bg: # waline 的背景
pageview: false # 分页
option: # 其他选项

此时再次Hexo三连,即可看到评论区效果:

image-20230107131515330

设置完成后,请立即点击登录注册账号,因为第一个账号默认是管理员!

那年今日

在根目录输入以安装插件:

1
yarn add hexo-history-calendar --save

然后编辑_config.yml,添加以下配置项:

1
2
3
4
5
6
7
8
9
history_calendar:
priority: 4
enable: true
enable_page: all
layout:
type: class
name: sticky_layout
index: 0
temple_html: '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>'
配置项 参数 含义
enable true/false 是否开启
enable_page all/[自定义] all:全局应用,或相对路径
priority 1 顺序,数字越大越靠前
layout type; (class&id)/name;index;(数字) 如果说 history_calendar 是一幅画,那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况,这时就需要使用 index,确定是哪一个。
最后墙的名字即是 name。
<div desc="我是墙" id="recent-posts"><!-- id=>type recent-posts=>name --><div desc="我是画框"><div desc="我是纸"><!--这里通过js挂载history_calendar,也就是画画--></div></div></div>
temple_html html 模板字段 包含挂载容器

效果如下:

image-20230107145035626

页脚美化

在根目录输入:

1
yarn add hexo-butterfly-footer-beautify --save

_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
# footer_beautify
# 页脚计时器:[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标:[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
enable:
timer: true # 计时器开关
bdage: true # 徽标开关
priority: 5 #过滤器优先权
enable_page: all # 应用页面
exclude: #屏蔽页面
# - /posts/
# - /about/
layout: # 挂载容器类型
type: id
name: footer-wrap
index: 0
# 计时器部分配置项
runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
# 徽标部分配置项
swiperpara: 3 #若非0,则开启轮播功能,每行徽标个数
bdageitem:
- link: https://hexo.io/ #徽标指向网站链接
shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
message: 博客框架为Hexo_v5.4.0 #徽标提示语
- link: https://butterfly.js.org/
shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
message: 主题版本Butterfly_v3.8.2
- link: https://www.jsdelivr.com/
shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
message: 本站使用JsDelivr为静态资源提供CDN加速
- link: https://vercel.com/
shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
message: 本站采用双线部署,默认线路托管于Vercel
- link: https://vercel.com/
shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
message: 本站采用双线部署,联通线路托管于Coding
- link: https://github.com/
shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
message: 本站项目由Github托管
- link: http://creativecommons.org/licenses/by-nc-sa/4.0/
shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

参数释义:

参数 备选值/类型 释义
priority number 【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enable.timer true/false 【必选】计时器控制开关
enable.bdage true/false 【必选】徽标控制开关
enable_page path 【可选】填写想要应用的页面,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填all,默认为all
exclude path 【可选】填写想要屏蔽的页面,可以多个。仅当enable_page为’all’时生效。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配,若当前路径包含任一屏蔽项,则不会挂载。
layout.type id/class 【可选】挂载容器类型,填写id或class,不填则默认为id
layout.name text 【必选】挂载容器名称
layout.index 0和正整数 【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
runtime_js url 【必选】页脚计时器脚本,可以下载上文填写示例的链接,参照注释和教程:Native JS Timer自行修改。
runtime_css url 【可选】自定义样式,预留开发者接口,可自行下载。
swiperpara number 【可选】若非零,则开启轮播功能,此项表示每行最多容纳徽标个数,用来应对徽标过多显得页脚拥挤的问题
bdageitem.link url 【可选】页脚徽标指向的网站链接
bdageitem.shields url 【必选】页脚徽标对应的API,API具体写法示例参照教程Add Github Badge
bdageitem.message text 【可选】页脚徽标悬停时显示的信息
swiper_css url 【可选】swiper的依赖
swiper_js url 【可选】swiper的依赖
swiperbdage_init_js url 【可选】swiper初始化方法

这是我自己修改的runtimejs,已经移除糖果屋标识,仅保留计时器,可把该项改为https://npm.elemecdn.com/cookie987-assets@1.3.0/js/runtime.js

效果如下:

image-20230107150225518

版权声明美化

进入themes\butterfly\layout\includes\post文件夹,将代码覆盖post-copyright.pug文件:

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
if theme.post_copyright.enable && page.copyright !== false
- let author = page.copyright_author ? page.copyright_author : config.author
- let url = page.copyright_url ? page.copyright_url : page.permalink
.post-copyright
.post-copyright__title
span.post-copyright-info
h #[=page.title]
.post-copyright__type
span.post-copyright-info
a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
.post-copyright-m
.post-copyright-m-info
.post-copyright-a(style="display: inline-block;width: 120px")
h 作者
.post-copyright-cc-info
h=author
.post-copyright-c(style="display: inline-block;width: 120px")
h 发布于
.post-copyright-cc-info
h=date(page.date, config.date_format)
.post-copyright-u(style="display: inline-block;width: 120px")
h 更新于
.post-copyright-cc-info
h=date(page.updated, config.date_format)
.post-copyright-c(style="display: inline-block;width: 120px")
h 许可协议
.post-copyright-cc-info
a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
i.fab.fa-creative-commons
a(rel='noopener' target='_blank' title='CC BY 4.0' href='https://creativecommons.org/licenses/by/4.0/deed.zh') CC BY 4.0

如果你的协议不是CC BY 4.0,可以将其替换,同样的,网址也可以替换,但请注意格式

接下来,打开themes\butterfly\source\css_layout文件夹,修改post.styl文件。

diff模式:

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
  .post-copyright
position: relative
margin: 2rem 0 .5rem
padding: .5rem .8rem
border: 1px solid var(--light-grey)
transition: box-shadow .3s ease-in-out
+ overflow: hidden
+ border-radius: 12px!important
+ background-color: rgb(239 241 243)

&:before
- @extend .fontawesomeIcon
- position: absolute
- top: .1rem
- right: .6rem
- color: $theme-color
- content: '\f1f9'
- font-size: 1rem
+ position absolute
+ right -26px
+ top -120px
+ content '\f25e'
+ font-size 200px
+ font-family 'Font Awesome 5 Brands'
+ opacity .2

&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

.post-copyright
&-meta
color: $light-blue
font-weight: bold

&-info
padding-left: .3rem

a
- text-decoration: underline
+ text-decoration: none
word-break: break-word

&:hover
text-decoration: none

+ .post-copyright-cc-info
+ color: $theme-color;

.post-outdate-notice
position: relative
margin: 0 0 1rem
padding: .5em 1.2em
border-radius: 15px
background-color: $noticeOutdate-bg
color: $noticeOutdate-color

diff格式中,+表示添加,-表示移除,其余的内容是为了辅助你判断位置的,保持不变即可。

修改时请注意缩进!

接着在_config.butterfly.yml中对比修改:

1
2
3
4
inject:
head
- <link rel="stylesheet" href="https://npm.elemecdn.com/cookie987-assets@1.7.0@1.4.12/css/copyright.css"> # 此处为提高速度使用饿了么CDN,要是不能用请换成 https://npm.elemecdn.com/cookie987-assets@1.4.12/css/copyright.css
bottom:

效果:

image-20230107153033562

提高访问速度

美化的多了,速度就落下来了(不过本地部署你也看不出来吧),教程请参阅Hexo异步加载方案 | Akilarの糖果屋

更多效果

更多美化效果请自行上网搜索,我以后也会陆续写文章,本篇教程重点不在此。

写文章

文章在source\_posts文件夹下,名字随意,采用markdown格式。markdown教程请自行搜索。

文章的开头是一些表明标题等的信息,称为Front-Matter,基本格式如下:

以下内容来自Front-matter | Hexo

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是参数的描述:

参数 描述 默认值
layout 布局 config.default_layout
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址
excerpt 纯文本的页面摘要。使用 该插件 来格式化文本
disableNunjucks 启用时禁用 Nunjucks 标签 {{ }}/{% %}标签插件 的渲染功能
lang 设置语言以覆盖 自动检测 继承自 _config.yml

布局

根据 _config.ymldefault_layout 的设置,默认布局是 post 。当文章中的布局被禁用(layout: false),它将不会使用主题处理。然而,它仍然会被任何可用的渲染引擎渲染:如果一篇文章是用 Markdown 写的,并且安装了 Markdown 渲染引擎(比如默认的 hexo-renderer-marked),它将被渲染成HTML。

标签插件 总是被处理,而会不考虑布局,除非被 disableNunjucks 设置或 渲染引擎 禁用。

分类和标签

只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。

Front-matter在文章的最开头,使用---与正文分隔。

1
2
3
4
5
categories:
- Diary
tags:
- PS3
- Games
分类方法的分歧

如果您有过使用 WordPress 的经验,就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类,而且这些分类可以是同级的,也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法:

1
2
3
categories:
- Diary
- Life

会使分类 Life 成为 Diary 的子分类,而不是并列分类。因此,有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类,可以尝试以下 list 中的方法。

1
2
3
4
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类: PlayStationGames 分别都是父分类 Diary 的子分类,同时 Life 是一个没有子分类的分类。

JSON Front-matter

除了 YAML 外,你也可以使用 JSON 来编写 Front-matter,只要将 --- 代换成 ;;; 即可。

1
2
3
"title": "Hello World",
"date": "2013/7/13 20:46:25"
;;;

发布网页

现在,我们已经有了一个网址,接下来的就是让任何人都能访问了。登录你的GitHub账号。如果提示:

image-20230107165019722

请遵循安装Butterfly章节中的解决方法3安装FastGithub解决。

新建仓库

进入GitHub主界面后,点击左上角的New 按钮新建仓库:

image-20230107165636095

将配置调整如下:

image-20230107170149926

接着点击最下方的Create repository按钮,出现以下界面则表明创建成功:

image-20230107170645627

上传文件

首先在根目录执行:

1
yarn add hexo-deployer-git --save

接着编辑_config.yml,找到:

1
2
deploy:
type: ''

改为:

1
2
3
4
deploy:
type: git
repo: <repository url> # 就是刚才创建成功的那行地址,例如我的是 git@github.com:Cookie987/Cookie987.github.io.git
branch: main

接着执行:

1
2
3
4
5
6
7
8
9
10
11
# 设置全局邮箱,这里的邮箱仅仅表明你的身份,与github、gitee上注册的邮箱可以不一样
git config --global user.email "你的邮箱"
# 设置全局用户名,可以随意填写
git config --global user.name "你的名字"


# 配置完后,可通过如下命令查看用户名、邮箱
git config user.name
git config user.emal

# 这两个命令在Git中唯一标识了你这台主机系统,因此可以在系统的任何地方进行git操作

然后执行:

1
cat ~\.ssh\id_rsa.pub

~表示用户的主目录。Windows下代表C:\Users\[你的用户名]\

如果输出的格式是以ssh-rsa开头的,请跳过此步骤,如果不是,请执行:

1
ssh-keygen -t rsa

执行这一步的目的是让我们使用更安全、方便的密钥登录。

执行过程中会问你几个问题,直接回车即可。

输出应如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
PS G:\1> ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\bilic/.ssh/id_rsa): G:\id_rsa # 这里我已经生成过了,所以换个路径生成,你应当直接回车。
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in G:\id_rsa.
Your public key has been saved in G:\id_rsa.pub.
The key fingerprint is:
SHA256:wcwU3tARok8RxY90aLkXr4hS454E/uQAl3j7YQ+tX0s bilic@Execute
The key's randomart image is:
+---[RSA 3072]----+
| B*+= |
| B =B o |
| ...Bo.= o |
| o =oo.o o . |
| = =S+ o . |
| = O o . |
| @ * E |
| B .o . |
| .. . |
+----[SHA256]-----+

此时,在你的~\.ssh\目录下,会生成两个文件:id_rsaid_rsa.pub

pubpublic adj.公开的 的缩写,表示它可以公开。

无论如何,请不要泄露id_rsa里的内容!

image-20230107172245347

完成后,用记事本打开id_rsa.pub,复制里面所有内容。

返回GitHub网页,按照图片操作:

image-20230107173807674

点击完成后会来到这个界面,按图片操作:

image-20230107174224915

继续按图片操作:

image-20230107181515729

随后运行:

1
ssh -T git@github.com

以检验是否生效,如果生效,输出应类似于:

1
2
3
4
PS G:\1> ssh -T git@github.com
Warning: Permanently added the ECDSA host key for IP address '20.205.243.166' to the list of known hosts.
Hi Cookie987! You've successfully authenticated, but GitHub does not provide shell access.
PS G:\1>

接下来,我们接触一个新命令:hexo d(可以写成 hexo deploy)

该命令与Hexo三连合称Hexo四连,最后运行。

接着运行:

1
hexo clean; hexo g; hexo d

输入之后,如果你的配置没有任何问题,输出应如下:

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
PS G:\1> hexo clean; hexo g; hexo d
INFO Validating config
INFO
===================================================================

##### # # ##### ##### ###### ##### ###### # # #
# # # # # # # # # # # # #
##### # # # # ##### # # ##### # #
# # # # # # # ##### # # #
# # # # # # # # # # # #
##### #### # # ###### # # # ###### #

4.5.1
===================================================================
INFO Deleted database.
INFO Deleted public folder.
INFO Validating config
INFO
===================================================================

##### # # ##### ##### ###### ##### ###### # # #
# # # # # # # # # # # # #
##### # # # # ##### # # ##### # #
# # # # # # # ##### # # #
# # # # # # # # # # # #
##### #### # # ###### # # # ###### #

4.5.1
===================================================================
INFO Start processing
INFO Files loaded in 4.05 s
INFO Generated: archives/index.html
INFO Generated: img/friend_404.gif
INFO Generated: index.html
INFO Generated: css/var.css
INFO Generated: img/favicon.png
INFO Generated: archives/2023/01/index.html
INFO Generated: img/404.jpg
INFO Generated: js/main.js
INFO Generated: css/index.css
INFO Generated: js/utils.js
INFO Generated: archives/2023/index.html
INFO Generated: js/tw_cn.js
INFO Generated: js/search/local-search.js
INFO Generated: 2023/01/06/hello-world/index.html
INFO Generated: js/search/algolia.js
INFO 15 files generated in 1.3 s
INFO Validating config
INFO
===================================================================

##### # # ##### ##### ###### ##### ###### # # #
# # # # # # # # # # # # #
##### # # # # ##### # # ##### # #
# # # # # # # ##### # # #
# # # # # # # # # # # #
##### #### # # ###### # # # ###### #

4.5.1
===================================================================
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
INFO Copying files from extend dirs...
warning: in the working copy of '2023/01/06/hello-world/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'archives/2023/01/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'archives/2023/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'archives/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'css/index.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/main.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/search/algolia.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/search/local-search.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/tw_cn.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/utils.js', LF will be replaced by CRLF the next time Git touches it
[master 095cf8e] Site updated: 2023-01-07 18:29:48
4 files changed, 8 insertions(+), 8 deletions(-)
Enumerating objects: 39, done.
Counting objects: 100% (39/39), done.
Delta compression using up to 4 threads
Compressing objects: 100% (31/31), done.
Writing objects: 100% (39/39), 113.25 KiB | 406.00 KiB/s, done.
Total 39 (delta 8), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (8/8), done.
To github.com:Cookie987/1114514.git
* [new branch] HEAD -> main
branch 'master' set up to track 'git@github.com:Cookie987/1114514.git/main'.
INFO Deploy done: git # 出现此行表明部署成功
PS G:\1>

随后,在浏览器输入https://[你的名字].github.io即可访问:

image-20230107205007293

但是访问速度一言难尽啊。

Vercel托管

接下来,我们需要提升访问速度,而速度极快的Vercel就是一个好选择,进入New Project – Vercel创建新项目,如图所示:

image-20230107210421986

配置完成后,会有满屏的烟花庆祝(没截到,悲):

image-20230107211951113

随后,点击右上角的Contiune to Dashboard进入仪表板,说明如下:

image-20230108092639259

此时我们会发现,网页访问的速度不仅没有变快,甚至连访问都访问不了了。

这是为什么?因为有很多人利用Vercel做黑产,导致它的默认域名.vercel.app在大陆内无法使用。

为了解决这个问题,我们需要拥有自己的域名,不用担心,这是完全免费的。

注册域名

有几种免费域名可选,一种是.eu.org,一种是.tk/.ml/.ga等。

注册时请不要挂梯子。

注册方法请看:[最新Freenom免费顶级域名申请(2022年1月更新) - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/109553641)。

eu.org是一个老牌提供商,值得信赖。

注册时请挂梯子,目前国内无法正常访问(2023.1.8)

注册方法请看:[教你注册欧盟域名——eu.org - 勿埋我心 - SkyQian](https://www.skyqian.com/archives/eu-org.html)。

注册完成后,接着注册Cloudflare账号(注册方法请看上文),随后登录,按图示操作:

image-20230108143322334

image-20230108145152993

image-20230108145321282

image-20230108145909592

接下来,将你域名的NS服务器改为:

1
damiete.ns.cloudflare.com

1
cortney.ns.cloudflare.com

为什么要改?可暂时理解为eu.org默认不提供把域名绑定网站的服务,同时Freenom的又太烂了,所有要转到Cloudflare上。

以下是Freenom迁移方法,eu.org在上面教程里有写,首先访问Client Area - Freenom,这里会列出你所有的域名,点击对应域名的Manager Domain,进入以下页面:

image-20230108172821512

接下来回到Vercel中你的项目:

image-20230108181625861

等待解析生效,此时再次访问你的新域名,即可生效。

在线部署

做了这么多,我们的博客还是只能打开电脑才能写博文,很不符合我对未来科技的想像(何不扩散条约)

使用在线部署意味着无法使用git pull更新Butterfly。

建立仓库

再在Github建立一个仓库,名字随意,建立完成后在你的博客目录下输入以下命令(一行一条,分开输):

Github仓库创建时一定选择Private即私人仓库!否则可能会泄露你在配置文件的个人密钥!

1
2
3
4
5
6
7
rm -Force .\themes\butterfly\.git\  #执行时如果询问请选择 a
git init
git add *
git commit -m "first commit"
git branch -M main
git remote add origin 【你仓库的地址】 # 把红色字替换成你仓库的地址,类似于 git@github.com:Cookie987/test.git
git push -u origin main

输出应如下:

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
PS G:\1> rm -Force .\themes\butterfly\.git\

确认
G:\1\themes\butterfly\.git\ 处的项具有子项,并且未指定 Recurse
参数。如果继续,所有子项均将随该项删除。是否确实要继续?
[Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暂停(S) [?] 帮助 (默认值为“Y”): a #此处输入a
PS G:\1> git init
Initialized empty Git repository in G:/1/.git/
PS G:\1> git add *
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it
PS G:\1> git commit -m "first commit"
[master (root-commit) 7199bdc] first commit
215 files changed, 17536 insertions(+)
create mode 100644 ._config.butterfly.yml.un~
create mode 100644 ._config.yml.un~
create mode 100644 .github/dependabot.yml
create mode 100644 .gitignore
create mode 100644 _config.butterfly.yml
create mode 100644 _config.butterfly.yml~
create mode 100644 _config.landscape.yml
create mode 100644 _config.yml
create mode 100644 _config.yml~
create mode 100644 package.json
create mode 100644 scaffolds/draft.md
create mode 100644 scaffolds/page.md
create mode 100644 scaffolds/post.md
create mode 100644 source/_posts/hello-world.md
create mode 100644 themes/.gitkeep
create mode 100644 themes/butterfly/.github/ISSUE_TEMPLATE/bug_report.yml
create mode 100644 themes/butterfly/.github/ISSUE_TEMPLATE/config.yml
create mode 100644 themes/butterfly/.github/ISSUE_TEMPLATE/feature_request.yml
create mode 100644 themes/butterfly/.github/workflows/publish.yml
create mode 100644 themes/butterfly/.github/workflows/stale.yml
create mode 100644 themes/butterfly/LICENSE
create mode 100644 themes/butterfly/README.md
create mode 100644 themes/butterfly/README_CN.md
create mode 100644 themes/butterfly/_config.yml
create mode 100644 themes/butterfly/languages/default.yml
create mode 100644 themes/butterfly/languages/en.yml
create mode 100644 themes/butterfly/languages/zh-CN.yml
create mode 100644 themes/butterfly/languages/zh-TW.yml
create mode 100644 themes/butterfly/layout/archive.pug
create mode 100644 themes/butterfly/layout/category.pug
create mode 100644 themes/butterfly/layout/includes/404.pug
create mode 100644 themes/butterfly/layout/includes/additional-js.pug
create mode 100644 themes/butterfly/layout/includes/footer.pug
create mode 100644 themes/butterfly/layout/includes/head.pug
create mode 100644 themes/butterfly/layout/includes/head/Open_Graph.pug
create mode 100644 themes/butterfly/layout/includes/head/analytics.pug
create mode 100644 themes/butterfly/layout/includes/head/config.pug
create mode 100644 themes/butterfly/layout/includes/head/config_site.pug
create mode 100644 themes/butterfly/layout/includes/head/google_adsense.pug
create mode 100644 themes/butterfly/layout/includes/head/noscript.pug
create mode 100644 themes/butterfly/layout/includes/head/preconnect.pug
create mode 100644 themes/butterfly/layout/includes/head/pwa.pug
create mode 100644 themes/butterfly/layout/includes/head/site_verification.pug
create mode 100644 themes/butterfly/layout/includes/header/index.pug
create mode 100644 themes/butterfly/layout/includes/header/menu_item.pug
create mode 100644 themes/butterfly/layout/includes/header/nav.pug
create mode 100644 themes/butterfly/layout/includes/header/post-info.pug
create mode 100644 themes/butterfly/layout/includes/header/social.pug
create mode 100644 themes/butterfly/layout/includes/layout.pug
create mode 100644 themes/butterfly/layout/includes/loading/fullpage-loading.pug
create mode 100644 themes/butterfly/layout/includes/loading/index.pug
create mode 100644 themes/butterfly/layout/includes/loading/pace.pug
create mode 100644 themes/butterfly/layout/includes/mixins/article-sort.pug
create mode 100644 themes/butterfly/layout/includes/mixins/post-ui.pug
create mode 100644 themes/butterfly/layout/includes/page/categories.pug
create mode 100644 themes/butterfly/layout/includes/page/default-page.pug
create mode 100644 themes/butterfly/layout/includes/page/flink.pug
create mode 100644 themes/butterfly/layout/includes/page/tags.pug
create mode 100644 themes/butterfly/layout/includes/pagination.pug
create mode 100644 themes/butterfly/layout/includes/post/post-copyright.pug
create mode 100644 themes/butterfly/layout/includes/post/reward.pug
create mode 100644 themes/butterfly/layout/includes/rightside.pug
create mode 100644 themes/butterfly/layout/includes/sidebar.pug
create mode 100644 themes/butterfly/layout/includes/third-party/aplayer.pug
create mode 100644 themes/butterfly/layout/includes/third-party/card-post-count/artalk.pug
create mode 100644 themes/butterfly/layout/includes/third-party/card-post-count/disqus.pug
create mode 100644 themes/butterfly/layout/includes/third-party/card-post-count/fb.pug
create mode 100644 themes/butterfly/layout/includes/third-party/card-post-count/index.pug
create mode 100644 themes/butterfly/layout/includes/third-party/card-post-count/remark42.pug
create mode 100644 themes/butterfly/layout/includes/third-party/card-post-count/twikoo.pug
create mode 100644 themes/butterfly/layout/includes/third-party/card-post-count/valine.pug
create mode 100644 themes/butterfly/layout/includes/third-party/card-post-count/waline.pug
create mode 100644 themes/butterfly/layout/includes/third-party/chat/chatra.pug
create mode 100644 themes/butterfly/layout/includes/third-party/chat/crisp.pug
create mode 100644 themes/butterfly/layout/includes/third-party/chat/daovoice.pug
create mode 100644 themes/butterfly/layout/includes/third-party/chat/gitter.pug
create mode 100644 themes/butterfly/layout/includes/third-party/chat/index.pug
create mode 100644 themes/butterfly/layout/includes/third-party/chat/messenger.pug
create mode 100644 themes/butterfly/layout/includes/third-party/chat/tidio.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/artalk.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/disqus.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/disqusjs.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/facebook_comments.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/giscus.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/gitalk.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/index.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/js.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/livere.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/remark42.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/twikoo.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/utterances.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/valine.pug
create mode 100644 themes/butterfly/layout/includes/third-party/comments/waline.pug
create mode 100644 themes/butterfly/layout/includes/third-party/effect.pug
create mode 100644 themes/butterfly/layout/includes/third-party/math/index.pug
create mode 100644 themes/butterfly/layout/includes/third-party/math/katex.pug
create mode 100644 themes/butterfly/layout/includes/third-party/math/mathjax.pug
create mode 100644 themes/butterfly/layout/includes/third-party/math/mermaid.pug
create mode 100644 themes/butterfly/layout/includes/third-party/newest-comments/artalk.pug
create mode 100644 themes/butterfly/layout/includes/third-party/newest-comments/disqus-comment.pug
create mode 100644 themes/butterfly/layout/includes/third-party/newest-comments/github-issues.pug
create mode 100644 themes/butterfly/layout/includes/third-party/newest-comments/index.pug
create mode 100644 themes/butterfly/layout/includes/third-party/newest-comments/remark42.pug
create mode 100644 themes/butterfly/layout/includes/third-party/newest-comments/twikoo-comment.pug
create mode 100644 themes/butterfly/layout/includes/third-party/newest-comments/valine.pug
create mode 100644 themes/butterfly/layout/includes/third-party/newest-comments/waline.pug
create mode 100644 themes/butterfly/layout/includes/third-party/pangu.pug
create mode 100644 themes/butterfly/layout/includes/third-party/pjax.pug
create mode 100644 themes/butterfly/layout/includes/third-party/prismjs.pug
create mode 100644 themes/butterfly/layout/includes/third-party/search/algolia.pug
create mode 100644 themes/butterfly/layout/includes/third-party/search/index.pug
create mode 100644 themes/butterfly/layout/includes/third-party/search/local-search.pug
create mode 100644 themes/butterfly/layout/includes/third-party/share/add-this.pug
create mode 100644 themes/butterfly/layout/includes/third-party/share/addtoany.pug
create mode 100644 themes/butterfly/layout/includes/third-party/share/index.pug
create mode 100644 themes/butterfly/layout/includes/third-party/share/share-js.pug
create mode 100644 themes/butterfly/layout/includes/third-party/subtitle.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_ad.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_announcement.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_archives.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_author.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_bottom_self.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_categories.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_newest_comment.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_post_toc.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_recent_post.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_tags.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_top_self.pug
create mode 100644 themes/butterfly/layout/includes/widget/card_webinfo.pug
create mode 100644 themes/butterfly/layout/includes/widget/index.pug
create mode 100644 themes/butterfly/layout/index.pug
create mode 100644 themes/butterfly/layout/page.pug
create mode 100644 themes/butterfly/layout/post.pug
create mode 100644 themes/butterfly/layout/tag.pug
create mode 100644 themes/butterfly/package.json
create mode 100644 themes/butterfly/plugins.yml
create mode 100644 themes/butterfly/scripts/events/404.js
create mode 100644 themes/butterfly/scripts/events/cdn.js
create mode 100644 themes/butterfly/scripts/events/comment.js
create mode 100644 themes/butterfly/scripts/events/init.js
create mode 100644 themes/butterfly/scripts/events/stylus.js
create mode 100644 themes/butterfly/scripts/events/welcome.js
create mode 100644 themes/butterfly/scripts/filters/post_lazyload.js
create mode 100644 themes/butterfly/scripts/filters/random_cover.js
create mode 100644 themes/butterfly/scripts/helpers/aside_archives.js
create mode 100644 themes/butterfly/scripts/helpers/aside_categories.js
create mode 100644 themes/butterfly/scripts/helpers/findArchiveLength.js
create mode 100644 themes/butterfly/scripts/helpers/inject_head_js.js
create mode 100644 themes/butterfly/scripts/helpers/page.js
create mode 100644 themes/butterfly/scripts/helpers/related_post.js
create mode 100644 themes/butterfly/scripts/tag/button.js
create mode 100644 themes/butterfly/scripts/tag/flink.js
create mode 100644 themes/butterfly/scripts/tag/gallery.js
create mode 100644 themes/butterfly/scripts/tag/hide.js
create mode 100644 themes/butterfly/scripts/tag/inlineImg.js
create mode 100644 themes/butterfly/scripts/tag/label.js
create mode 100644 themes/butterfly/scripts/tag/mermaid.js
create mode 100644 themes/butterfly/scripts/tag/note.js
create mode 100644 themes/butterfly/scripts/tag/tabs.js
create mode 100644 themes/butterfly/scripts/tag/timeline.js
create mode 100644 themes/butterfly/source/css/_global/function.styl
create mode 100644 themes/butterfly/source/css/_global/index.styl
create mode 100644 themes/butterfly/source/css/_highlight/highlight.styl
create mode 100644 themes/butterfly/source/css/_highlight/highlight/diff.styl
create mode 100644 themes/butterfly/source/css/_highlight/highlight/index.styl
create mode 100644 themes/butterfly/source/css/_highlight/prismjs/diff.styl
create mode 100644 themes/butterfly/source/css/_highlight/prismjs/index.styl
create mode 100644 themes/butterfly/source/css/_highlight/prismjs/line-number.styl
create mode 100644 themes/butterfly/source/css/_highlight/theme.styl
create mode 100644 themes/butterfly/source/css/_layout/aside.styl
create mode 100644 themes/butterfly/source/css/_layout/chat.styl
create mode 100644 themes/butterfly/source/css/_layout/comments.styl
create mode 100644 themes/butterfly/source/css/_layout/footer.styl
create mode 100644 themes/butterfly/source/css/_layout/head.styl
create mode 100644 themes/butterfly/source/css/_layout/loading.styl
create mode 100644 themes/butterfly/source/css/_layout/pagination.styl
create mode 100644 themes/butterfly/source/css/_layout/post.styl
create mode 100644 themes/butterfly/source/css/_layout/relatedposts.styl
create mode 100644 themes/butterfly/source/css/_layout/reward.styl
create mode 100644 themes/butterfly/source/css/_layout/rightside.styl
create mode 100644 themes/butterfly/source/css/_layout/sidebar.styl
create mode 100644 themes/butterfly/source/css/_layout/third-party.styl
create mode 100644 themes/butterfly/source/css/_mode/darkmode.styl
create mode 100644 themes/butterfly/source/css/_mode/readmode.styl
create mode 100644 themes/butterfly/source/css/_page/404.styl
create mode 100644 themes/butterfly/source/css/_page/archives.styl
create mode 100644 themes/butterfly/source/css/_page/categories.styl
create mode 100644 themes/butterfly/source/css/_page/common.styl
create mode 100644 themes/butterfly/source/css/_page/flink.styl
create mode 100644 themes/butterfly/source/css/_page/homepage.styl
create mode 100644 themes/butterfly/source/css/_page/tags.styl
create mode 100644 themes/butterfly/source/css/_search/algolia.styl
create mode 100644 themes/butterfly/source/css/_search/index.styl
create mode 100644 themes/butterfly/source/css/_search/local-search.styl
create mode 100644 themes/butterfly/source/css/_tags/button.styl
create mode 100644 themes/butterfly/source/css/_tags/gallery.styl
create mode 100644 themes/butterfly/source/css/_tags/hexo.styl
create mode 100644 themes/butterfly/source/css/_tags/hide.styl
create mode 100644 themes/butterfly/source/css/_tags/inlineImg.styl
create mode 100644 themes/butterfly/source/css/_tags/label.styl
create mode 100644 themes/butterfly/source/css/_tags/note.styl
create mode 100644 themes/butterfly/source/css/_tags/tabs.styl
create mode 100644 themes/butterfly/source/css/_tags/timeline.styl
create mode 100644 themes/butterfly/source/css/_third-party/normalize.min.css
create mode 100644 themes/butterfly/source/css/index.styl
create mode 100644 themes/butterfly/source/css/var.styl
create mode 100644 themes/butterfly/source/img/404.jpg
create mode 100644 themes/butterfly/source/img/favicon.png
create mode 100644 themes/butterfly/source/img/friend_404.gif
create mode 100644 themes/butterfly/source/js/main.js
create mode 100644 themes/butterfly/source/js/search/algolia.js
create mode 100644 themes/butterfly/source/js/search/local-search.js
create mode 100644 themes/butterfly/source/js/tw_cn.js
create mode 100644 themes/butterfly/source/js/utils.js
create mode 100644 yarn.lock
PS G:\1> git branch -M main
PS G:\1> git remote add origin git@github.com:Cookie987/test.git
PS G:\1> git push -u origin main
Enumerating objects: 263, done.
Counting objects: 100% (263/263), done.
Delta compression using up to 4 threads
Compressing objects: 100% (254/254), done.
Writing objects: 100% (263/263), 258.96 KiB | 953.00 KiB/s, done.
Total 263 (delta 11), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (11/11), done.
To github.com:Cookie987/test.git
* [new branch] main -> main # 出现此行表示成功
branch 'main' set up to track 'origin/main'.
PS G:\1>

完成后,进入刚刚创建的仓库,我们应该能够看到和在本地电脑上相当一样的布局:

image-20230110203443416

里面少几个文件、文件夹没事,这些文件夹会拖慢速度,这是.gitignore(匹配这个文件里的文件/文件夹将会被Git忽略)的效果。

生成密钥

此时你原来的密钥仍可以使用,但是为了安全起见,我们可以新建一个。

输入以下命令:

1
ssh-keygen -t rsa -b 4096 -C "Hexo Deploy Key" -f github-deploy-key

输出应为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
PS G:\1> ssh-keygen -t rsa -b 4096 -C "Hexo Deploy Key" -f github-deploy-key
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase): # 此处按回车
Enter same passphrase again: # 再次按回车
Your identification has been saved in github-deploy-key.
Your public key has been saved in github-deploy-key.pub.
The key fingerprint is:
SHA256:fFYP7dle118g4/53LNQcyJ+RFLWTzIppPZrq8Mxn19g Hexo Deploy Key
The key's randomart image is:
+---[RSA 4096]----+
| .+|
| .o.o|
| * =*.|
| . o+O.Bo|
| S o+.+=oX|
| o..o o+B|
| . o..+.o|
| = .o +.E+|
| .*o . .o.|
+----[SHA256]-----+
PS G:\1>

此时,你的博客目录下将会多出两个文件:

文件名 作用
github-deploy-key 私钥文件
github-deploy-key.pub 公钥文件
环境变量

经过刚刚的配置之后,我们返回到刚刚的仓库,按照图示操作:

image-20230110204938660

继续添加名为HEXO_DEPLOY_KEY的环境变量:

添加环境变量

添加完成后,接着返回到[你的用户名].github.io仓库,按照下图操作:

添加公钥

添加标题为HEXO_DEPLOY_PUB的公钥,当然你也可以自定义:

添加公钥

接着在博客文件夹里新建.github\workflows\deploy.yml,文件名可以自己取,但是必须放到.github\workflows\目录下,内容如下:

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
name: Hexo Deploy

on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
if: github.event.repository.owner.id == github.event.sender.id
steps:
- name: Checkout source
uses: actions/checkout@v2
with:
ref: main
- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: '14'
- name: Setup Hexo
env:
ACTION_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_KEY }}
run: |
mkdir -p ~/.ssh/
echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
chmod 700 ~/.ssh
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.email "[你的邮箱]"
git config --global user.name "[你的用户名]"
npm install -g yarn
npm install -g hexo-cli
yarn install
- name: Deploy
run: |
hexo clean
hexo g
hexo deploy

创建完成后,在博客根目录下输入以下命令:

1
2
3
git add *
git commit -m "Auto Deploy"
git push

输出如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
PS G:\1> git add *
warning: in the working copy of 'github-deploy-key', LF will be replaced by CRLF the next time Git touches it
PS G:\1> git commit -m "Auto Deploy"
[main 4b8e272] Auto Deploy
5 files changed, 89 insertions(+)
delete mode 100644 ._config.butterfly.yml.un~
delete mode 100644 ._config.yml.un~
create mode 100644 .github/workflows/deploy.yml
create mode 100644 github-deploy-key
create mode 100644 github-deploy-key.pub
PS G:\1> git push
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 4 threads
Compressing objects: 100% (6/6), done.
Writing objects: 100% (7/7), 3.54 KiB | 1.18 MiB/s, done.
Total 7 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 1 local object.
To github.com:Cookie987/test.git
7199bdc..4b8e272 main -> main
PS G:\1>

此时转到你的仓库,应该如下图所示:

Actions 成功

此时访问你的网站即可。

结语

到这里,基本的Hexo博客就已经完成了,进阶教程请关注我的后续作品或自行搜索。


  1. Windows一般选安装包而不是二进制文件。系统一般为64位。如果你不知道你的系统是多少位的,请搜索。 ↩︎