hexo+github+namesilo搭建个人博客

嗨!艾瑞巴蒂,今天没有继续学习《大数据原理与技术》,所以摘要还没有继续更新。但是今天早起了,所以找了下前段时间搭建这个博客所记录的文章,今天把它整理好放在这里供大家参考~

一、准备工作

1.Github账号

需要有一个GitHub账号,没有的话到 官网 申请一个。

2.安装git

在自己电脑上安装好Githexo部署到GitHub时要用。

3.安装NodeJS

在自己电脑上安装好NodeJSHexo是基于NodeJS编写的,所以需要安装NodeJSnpm工具。

二、创建仓库

1.填写仓库名,格式必须为<用户名>.github.io,然后点击Create repository

image-20230316065824096

2.点击creating a new file创建一个新文件,作为我们网站的主页。

image-20230316065907803

新文件的名字必须为index.html,内容先随便写一个简单的,内容示例如下,填写之后点击Commit new file提交。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gcoder</title>
</head>
<body>
<h1>gcoder的个人主页</h1>
<h1>Hello ~</h1>
</body>
</html>

3.访问github地址(https://[用户名].github.io/)

image-20230316065932482

三、安装hexo

我们采用Hexo来创建我们的博客网站,Hexo是一个基于NodeJS的静态博客网站生成器,使用Hexo不需开发,只要进行一些必要的配置即可生成一个个性化的博客网站,非常方便。点击进入 官网

1
2
3
4
5
6
7
8
9
10
11
# 安装Hexo
npm install -g hexo-cli
# 查看版本
hexo -v
# 创建一个hexo-blog并初始化
hexo init hexo-blog
cd hexo-blog
npm install
# 本地启动
hexo g
hexo server 或 hexo s

访问地址:http://localhost:4000

image-20230316070002415

四、更换主题

https://github.com/fluid-dev/hexo-theme-fluid

1.安装主题

1
npm install --save hexo-theme-fluid

然后在博客目录下创建_config.fluid.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
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
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
#---------------------------
# Hexo Theme Fluid
# Author: Fluid-dev
# Github: <https://github.com/fluid-dev/hexo-theme-fluid>
#
# 配置指南: <https://hexo.fluid-dev.com/docs/guide/>
# 你可以从指南中获得更详细的说明
#
# Guide: <https://hexo.fluid-dev.com/docs/en/guide/>
# You can get more detailed help from the guide
#---------------------------

#---------------------------
# 全局
# Global
#---------------------------

# 用于浏览器标签的图标
# Icon for browser tab
favicon: /img/fluid.png

# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: /img/fluid.png

# 浏览器标签页中的标题分隔符,效果: 文章名 - 站点名
# Title separator in browser tab, eg: article - site
tab_title_separator: " - "

# 强制所有链接升级为 HTTPS(适用于图片等资源出现 HTTP 混入报错)
# Force all links to be HTTPS (applicable to HTTP mixed error)
force_https: false

# 代码块的增强配置
# Enhancements to code blocks
code:
# 是否开启复制代码的按钮
# Enable copy code button
copy_btn: true

# 代码语言
# Code language
language:
enable: true
default: "TEXT"

# 代码高亮
# Code highlight
highlight:
enable: true

# 代码块是否显示行号
# If true, the code block display line numbers
line_number: true

# 实现高亮的库,对应下面的设置
# Highlight library
# Options: highlightjs | prismjs
lib: "highlightjs"

highlightjs:
# 在链接中挑选 style 填入
# Select a style in the link
# See: <https://highlightjs.org/static/demo/>
style: "github gist"
style_dark: "dark"

prismjs:
# 在下方链接页面右侧的圆形按钮挑选 style 填入,也可以直接填入 css 链接
# Select the style button on the right side of the link page, you can also set the CSS link
# See: <https://prismjs.com/>
style: "default"
style_dark: "tomorrow night"

# 设为 true 高亮将本地静态生成(但只支持部分 prismjs 插件),设为 false 高亮将在浏览器通过 js 生成
# If true, it will be generated locally (but some prismjs plugins are not supported). If false, it will be generated via JS in the browser
preprocess: true

# 一些好玩的功能
# Some fun features
fun_features:
# 为 subtitle 添加打字机效果
# Typing animation for subtitle
typing:
enable: true

# 打印速度,数字越大越慢
# Typing speed, the larger the number, the slower
typeSpeed: 70

# 游标字符
# Cursor character
cursorChar: "_"

# 是否循环播放效果
# If true, loop animation
loop: false

# 在指定页面开启,不填则在所有页面开启
# Enable in specified page, all pages by default
# Options: home | post | tag | category | about | links | page | 404
scope: []

# 为文章内容中的标题添加锚图标
# Add an anchor icon to the title on the post page
anchorjs:
enable: true
element: h1,h2,h3,h4,h5,h6
# Options: left | right
placement: left
# Options: hover | always | touch
visible: hover
# Options: § | # | ❡
icon: ""

# 加载进度条
# Progress bar when loading
progressbar:
enable: true
height_px: 3
color: "#29d"
# See: <https://github.com/rstacruz/nprogress>
options: { showSpinner: false, trickleSpeed: 100 }

# 主题暗色模式,开启后菜单中会出现切换按钮,用户浏览器会存储切换选项,并且会遵循 prefers-color-scheme 自动切换
# Theme dark mode. If enable, a switch button will appear on the menu, each of the visitor's browser will store his switch option
dark_mode:
enable: true
# 默认的选项(当用户手动切换后则不再按照默认模式),选择 `auto` 会优先遵循 prefers-color-scheme,其次按用户本地时间 18 点到次日 6 点之间进入暗色模式
# Default option (when the visitor switches manually, the default mode is no longer followed), choosing `auto` will give priority to prefers-color-scheme, and then enter the dark mode from 18:00 to 6:00 in the visitor’s local time
# Options: auto | light | dark
default: auto

# 主题颜色配置,其他不生效的地方请使用自定义 css 解决,配色可以在下方链接中获得启发
# Theme color, please use custom CSS to solve other colors, color schema can be inspired by the links below
# See: <https://www.webdesignrankings.com/resources/lolcolors/>
color:
# body 背景色
# Color of body background
body_bg_color: "#eee"
# 暗色模式下的 body 背景色,下同
# Color in dark mode, the same below
body_bg_color_dark: "#181c27"

# 顶部菜单背景色
# Color of navigation bar background
navbar_bg_color: "#2f4154"
navbar_bg_color_dark: "#1f3144"

# 顶部菜单字体色
# Color of navigation bar text
navbar_text_color: "#fff"
navbar_text_color_dark: "#d0d0d0"

# 副标题字体色
# Color of navigation bar text
subtitle_color: "#fff"
subtitle_color_dark: "#d0d0d0"

# 全局字体色
# Color of global text
text_color: "#3c4858"
text_color_dark: "#c4c6c9"

# 全局次级字体色(摘要、简介等位置)
# Color of global secondary text (excerpt, introduction, etc.)
sec_text_color: "#718096"
sec_text_color_dark: "#a7a9ad"

# 主面板背景色
# Color of main board
board_color: "#fff"
board_color_dark: "#252d38"

# 文章正文字体色
# Color of post text
post_text_color: "#2c3e50"
post_text_color_dark: "#c4c6c9"

# 文章正文字体色(h1 h2 h3...)
# Color of Article heading (h1 h2 h3...)
post_heading_color: "#1a202c"
post_heading_color_dark: "#c4c6c9"

# 文章超链接字体色
# Color of post link
post_link_color: "#0366d6"
post_link_color_dark: "#1589e9"

# 超链接悬浮时字体色
# Color of link when hovering
link_hover_color: "#30a9de"
link_hover_color_dark: "#30a9de"

# 超链接悬浮背景色
# Color of link background when hovering
link_hover_bg_color: "#f8f9fa"
link_hover_bg_color_dark: "#364151"

# 分隔线和表格边线的颜色
# Color of horizontal rule and table border
line_color: "#eaecef"
line_color_dark: "#435266"

# 滚动条颜色
# Color of scrollbar
scrollbar_color: "#c4c6c9"
scrollbar_color_dark: "#687582"
# 滚动条悬浮颜色
# Color of scrollbar when hovering
scrollbar_hover_color: "#a6a6a6"
scrollbar_hover_color_dark: "#9da8b3"

# 按钮背景色
# Color of button
button_bg_color: "transparent"
button_bg_color_dark: "transparent"
# 按钮悬浮背景色
# Color of button when hovering
button_hover_bg_color: "#f2f3f5"
button_hover_bg_color_dark: "#46647e"

# 主题字体配置
# Font
font:
font_size: 16px
font_family:
letter_spacing: 0.02em
code_font_size: 85%

# 指定自定义 .js 文件路径,支持列表;路径是相对 source 目录,如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js:

# 指定自定义 .css 文件路径,用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:

# 网页访问统计
# Analysis of website visitors
web_analytics: # 网页访问统计
enable: false

# 遵循访客浏览器"请勿追踪"的设置,如果开启则不统计其访问
# Follow the "Do Not Track" setting of the visitor's browser
# See: <https://www.w3.org/TR/tracking-dnt/>
follow_dnt: true

# 百度统计的 Key,值需要获取下方链接中 `hm.js?` 后边的字符串
# Baidu analytics, get the string behind `hm.js?`
# See: <https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376>
baidu:

# Google 统计的 Tracking ID
# Google analytics, set Tracking ID
# See: <https://developers.google.com/analytics/devguides/collection/analyticsjs>
google:

# Google gtag.js 的媒体资源 ID
# Google gtag.js GA_MEASUREMENT_ID
# See: <https://developers.google.com/analytics/devguides/collection/gtagjs/>
gtag:

# 腾讯统计的 H5 App ID,开启高级功能才有cid
# Tencent analytics, set APP ID
# See: <https://mta.qq.com/h5/manage/ctr_app_manage>
tencent:
sid:
cid:

# 51.la 站点统计 ID
# 51.la analytics
# See: <https://www.51.la/user/site/index>
woyaola: # 51.la 站点统计 ID,参见

# 友盟/cnzz 站点统计 web_id
# cnzz analytics
# See: <https://web.umeng.com/main.php?c=site&a=show>
cnzz:

# LeanCloud 计数统计,可用于 PV UV 展示,如果 `web_analytics: enable` 没有开启,PV UV 展示只会查询不会增加
# LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
leancloud:
app_id:
app_key:
# REST API 服务器地址,国际版不填
# Only the Chinese mainland users need to set
server_url:
# 统计页面时获取路径的属性
# Get the attribute of the page path during statistics
path: window.location.pathname
# 开启后不统计本地路径( localhost 与 127.0.0.1 )
# If true, ignore localhost & 127.0.0.1
ignore_local: false

# 对页面中的图片和评论插件进行懒加载处理,可见范围外的元素不会提前加载
# Lazy loading of images and comment plugin on the page
lazyload:
enable: true

# 加载时的占位图片
# The placeholder image when loading
loading_img: /img/loading.gif

# 开启后懒加载仅在文章页生效,如果自定义页面需要使用,可以在 Front-matter 里指定 `lazyload: true`
# If true, only enable lazyload on the post page. For custom pages, you can set 'lazyload: true' in front-matter
onlypost: false

# 触发加载的偏移倍数,基数是视窗高度,可根据部署环境的请求速度调节
# The factor of viewport height that triggers loading
offset_factor: 2

# 图标库,包含了大量社交类图标,主题依赖的不包含在内,因此可自行修改,详见 <https://hexo.fluid-dev.com/docs/icon/>
# Icon library, which includes many social icons, does not include those theme dependent, so your can modify link by yourself. See: <https://hexo.fluid-dev.com/docs/en/icon/>
iconfont: //at.alicdn.com/t/font_1736178_lbnruvf0jn.css

#---------------------------
# 页头
# Header
#---------------------------

# 导航栏的相关配置
# Navigation bar
navbar:
# 导航栏左侧的标题,为空则按 hexo config 中 `title` 显示
# The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config
blog_title: "Fluid"

# 导航栏毛玻璃特效,实验性功能,可能会造成页面滚动掉帧和抖动,部分浏览器不支持会自动不生效
# Navigation bar frosted glass special animation. It is an experimental feature
ground_glass:
enable: false

# 模糊像素,只能为数字,数字越大模糊度越高
# Number of blurred pixel. the larger the number, the higher the blur
px: 3

# 不透明度,数字越大透明度越低,注意透明过度可能看不清菜单字体
# Ratio of opacity, 1.0 is completely opaque
# available: 0 - 1.0
alpha: 0.7

# 导航栏菜单,可自行增减,key 用来关联 languages/*.yml,如不存在关联则显示 key 本身的值;icon 是 css class,可以省略;增加 name 可以强制显示指定名称
# Navigation bar menu. `key` is used to associate languages/*.yml. If there is no association, the value of `key` itself will be displayed; if `icon` is a css class, it can be omitted; adding `name` can force the display of the specified name
menu:
- { key: "home", link: "/", icon: "iconfont icon-home-fill" }
- { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
- { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" }
- { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
- { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
#- { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }

# 搜索功能,基于 hexo-generator-search 插件,若已安装其他搜索插件请关闭此功能,以避免生成多余的索引文件
# Search feature, based on hexo-generator-search. If you have installed other search plugins, please disable this feature to avoid generating redundant index files
search:
enable: true

# 搜索索引文件的路径,可以是相对路径或外站的绝对路径
# Path for search index file, it can be a relative path or an absolute path
path: /local-search.xml

# 文件生成在本地的位置,必须是相对路径
# The location where the index file is generated locally, it must be a relative location
generate_path: /local-search.xml

# 搜索的范围
# Search field
# Options: post | page | all
field: post

# 搜索是否扫描正文
# If true, search will scan the post content
content: true

# 首屏图片的相关配置
# Config of the big image on the first screen
banner:
# 视差滚动,图片与板块会随着屏幕滚动产生视差效果
# Scrolling parallax
parallax: true

# 图片最小的宽高比,以免图片两边被过度裁剪,适用于移动端竖屏时,如需关闭设为 0
# Minimum ratio of width to height, applicable to the vertical screen of mobile device, if you need to close it, set it to 0
width_height_ratio: 1.0

# 向下滚动的箭头
# Scroll down arrow
scroll_down_arrow:
enable: true

# 头图高度不小于指定比例,才显示箭头
# Only the height of the banner image is greater than the ratio, the arrow is displayed
# Available: 0 - 100
banner_height_limit: 80

# 翻页后自动滚动
# Auto scroll after page turning
scroll_after_turning_page: true

# 向顶部滚动的箭头
# Scroll top arrow
scroll_top_arrow:
enable: true

# Open Graph metadata
# See: <https://hexo.io/docs/helpers.html#open-graph>
open_graph:
enable: true
twitter_card: summary_large_image
twitter_id:
twitter_site:
google_plus:
fb_admins:
fb_app_id:

#---------------------------
# 页脚
# Footer
#---------------------------
footer:
# 页脚第一行文字的 HTML,建议保留 Fluid 的链接,用于向更多人推广本主题
# HTML of the first line of the footer, it is recommended to keep the Fluid link to promote this theme to more people
content: '
<a href="<https://hexo.io>" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
<i class="iconfont icon-love"></i>
<a href="<https://github.com/fluid-dev/hexo-theme-fluid>" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
'

# 展示网站的 PV、UV 统计数
# Display website PV and UV statistics
statistics:
enable: false

# 统计数据来源,使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数;使用 busuanzi 不需要额外设置,但是有时不稳定,另外本地运行时 busuanzi 显示统计数据很大属于正常现象,部署后会正常
# Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
# Options: busuanzi | leancloud
source: "busuanzi"

# 国内大陆服务器的备案信息
# For Chinese mainland website policy, other areas keep disable
beian:
enable: false
# ICP证号
icp_text: 京ICP证123456号
# 公安备案号,不填则只显示ICP
police_text: 京公网安备12345678号
# 公安备案的编号,用于URL跳转查询
police_code: 12345678
# 公安备案的图片. 为空时不显示备案图片
police_icon: /img/police_beian.png

#---------------------------
# 首页
# Home Page
#---------------------------
index:
# 首页 Banner 头图,可以是相对路径或绝对路径,以下相同
# Path of Banner image, can be a relative path or an absolute path, the same on other pages
banner_img: /img/default.png

# 头图高度,屏幕百分比
# Height ratio of banner image
# Available: 0 - 100
banner_img_height: 100

# 头图黑色蒙版的不透明度,available: 0 - 1.0, 1 是完全不透明
# Opacity of the banner mask, 1.0 is completely opaque
# Available: 0 - 1.0
banner_mask_alpha: 0.3

# 首页副标题的独立设置
# Independent config of home page subtitle
slogan:
enable: true

# 为空则按 hexo config.subtitle 显示
# If empty, text based on `subtitle` in hexo config
text: "An elegant Material-Design theme for Hexo"

# 通过 API 接口作为首页副标题的内容,必须返回的是 JSON 格式,如果请求失败则按 text 字段显示,该功能必须先开启 typing 打字机功能
# Subtitle of the homepage through the API, must be returned a JSON. If the request fails, it will be displayed in `text` value. This feature must first enable the typing animation
api:
enable: false

# 请求地址
# Request url
url: ""

# 请求方法
# Request method
# Available: GET | POST | PUT
method: "GET"

# 请求头
# Request headers
headers: {}

# 从请求结果获取字符串的取值字段,最终必须是一个字符串,例如返回结果为 {"data": {"author": "fluid", "content": "An elegant theme"}}, 则取值字段为 ['data', 'content'];如果返回是列表则自动选择第一项
# The value field of the string obtained from the response. For example, the response content is {"data": {"author": "fluid", "content": "An elegant theme"}}, the expected `keys: ['data','content']`; if the return is a list, the first item is automatically selected
keys: []

# 自动截取文章摘要
# Auto extract post
auto_excerpt:
enable: true

# 打开文章的标签方式
# The browser tag to open the post
# Available: _blank | _self
post_url_target: _self

# 是否显示文章信息(时间、分类、标签)
# Meta information of post
post_meta:
date: true
category: true
tag: true

# 文章通过 sticky 排序后,在首页文章标题前显示图标
# If the posts are sorted by `sticky`, an icon is displayed in front of the post title
post_sticky:
enable: true
icon: "iconfont icon-top"

#---------------------------
# 文章页
# Post Page
#---------------------------
post:
banner_img: /img/default.png
banner_img_height: 70
banner_mask_alpha: 0.3

# 文章在首页的默认封面图,当没有指定 index_img 时会使用该图片,若两者都为空则不显示任何图片
# Path of the default post cover when `index_img` is not set. If both are empty, no image will be displayed
default_index_img:

# 文章标题下方的元信息
# Meta information below title
meta:
# 作者,优先根据 front-matter 里 author 字段,其次是 hexo 配置中 author 值
# Author, based on `author` field in front-matter, if not set, based on `author` value in hexo config
author:
enable: false

# 文章日期,优先根据 front-matter 里 date 字段,其次是 md 文件日期
# Post date, based on `date` field in front-matter, if not set, based on create date of .md file
date:
enable: true
# 格式参照 ISO-8601 日期格式化
# ISO-8601 date format
# See: <http://momentjs.cn/docs/#/parsing/string-format/>
format: "LL a"

# 字数统计
# Word count
wordcount:
enable: true

# 估计阅读全文需要的时长
# Estimated reading time
min2read:
enable: true
# 每个字词的长度,建议:中文≈2,英文≈5,中英混合可自行调节
# Average word length (chars count in word), ZH ≈ 2, EN ≈ 5
awl: 2
# 每分钟阅读字数,如果大部分是技术文章可适度调低
# Words per minute
wpm: 60

# 浏览量计数
# Number of visits
views:
enable: false
# 统计数据来源
# Data Source
# Options: busuanzi | leancloud
source: "busuanzi"

# 在文章开头显示文章更新时间,该时间默认是 md 文件更新时间,可通过 front-matter 中 `updated` 手动指定(和 date 一样格式)
# Update date is displayed at the beginning of the post. The default date is the update date of the md file, which can be manually specified by `updated` in front-matter (same format as date)
updated:
enable: false

# 格式参照 ISO-8601 日期格式化
# ISO-8601 date format
# See: <http://momentjs.cn/docs/#/parsing/string-format/>
date_format: "LL a"

# 是否使用相对时间表示,比如:"3 天前"
# If true, it will be a relative time, such as: "3 days ago"
relative: false

# 提示标签类型
# Note class
# Options: default | primary | info | success | warning | danger | light
note_class: info

# 侧边栏展示当前分类下的文章
# Sidebar of category
category_bar:
enable: true

# 开启后,只有在文章 Front-matter 里指定 `category_bar: true` 才会展示分类,也可以通过 `category_bar: ["分类A"]` 来指定分类
# If true, only set `category_bar: true` in Front-matter will enable sidebar of category, also set `category_bar: ["CategoryA"]` to specify categories
specific: true

# 置于板块的左侧或右侧
# place in the board
# Options: left | right
placement: left

# 文章的排序字段,前面带减号是倒序,不带减号是正序
# Sort field for posts, with a minus sign is reverse order
# Options: date | title | or other field of front-matter
post_order_by: "title"

# 单个分类中折叠展示文章数的最大值,超过限制会显示 More,0 则不限制
# The maximum number of posts in a single category. If the limit is exceeded, it will be displayed More. If 0 no limit
post_limit: 0

# 侧边栏展示文章目录
# Table of contents (TOC) in the sidebar
toc:
enable: true

# 置于板块的左侧或右侧
# place in the board
# Options: left | right
placement: right

# 目录会选择这些节点作为标题
# TOC will select these nodes as headings
headingSelector: "h1,h2,h3,h4,h5,h6"

# 层级的折叠深度,0 是全部折叠,大于 0 后如果存在下级标题则默认展开
# Collapse depth. If 0, all headings collapsed. If greater than 0, it will be expanded by default if there are sub headings
collapseDepth: 0

# 版权声明,会显示在每篇文章的结尾
# Copyright, will be displayed at the end of each post
copyright:
enable: true

# CreativeCommons license
# Options: BY | BY-SA | BY-ND | BY-NC | BY-NC-SA | BY-NC-ND
license: 'BY'

# 显示作者
author:
enable: true

# 显示发布日期
# Show post date
post_date:
enable: true
format: "LL"

# 显示更新日期
# Show update date
update_date:
enable: false
format: "LL"

# 文章底部上一篇下一篇功能
# Link to previous/next post
prev_next:
enable: true

# 文章图片标题
# Image caption
image_caption:
enable: true

# 文章图片可点击放大
# Zoom feature of images
image_zoom:
enable: true
# 放大后图片链接替换规则,可用于将压缩图片链接替换为原图片链接,如 ['-slim', ''] 是将链接中 `-slim` 移除;如果想使用正则请使用 `re:` 前缀,如 ['re:\\\\d{3,4}\\\\/\\\\d{3,4}\\\\/', '']
# The image url replacement when zooming, the feature can be used to replace the compressed image to the original image, eg: ['-slim', ''] removes `-slim` from the image url when zooming; if you want to use regular, use prefix `re:`, eg: ['re:\\\\d{3,4}\\\\/\\\\d{3,4}\\\\/','']
img_url_replace: ['', '']

# 脚注语法,会在文章底部生成脚注,如果 Markdown 渲染器本身支持,则建议关闭,否则可能会冲突
# Support footnote syntax, footnotes will be generated at the bottom of the post page. If the Markdown renderer itself supports it, please disable it, otherwise it may conflict
footnote:
enable: true
# 脚注的节标题,也可以在 front-matter 中通过 `footnote: <h2>Reference</h2>` 这种形式修改单独页面的 header
# The section title of the footnote, you can also modify the header of a single page in the form of `footnote: <h2>Reference</h2>` in front-matter
header: ''

# 数学公式,开启之前需要更换 Markdown 渲染器,否则复杂公式会有兼容问题,具体请见:<https://hexo.fluid-dev.com/docs/guide/##latex-数学公式>
# Mathematical formula. If enable, you need to change the Markdown renderer, see: <https://hexo.fluid-dev.com/docs/en/guide/#math>
math:
# 开启后文章默认可用,自定义页面如需使用,需在 Front-matter 中指定 `math: true`
# If you want to use math on the custom page, you need to set `math: true` in Front-matter
enable: false

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

# Options: mathjax | katex
engine: mathjax

# 流程图,基于 mermaid-js,具体请见:<https://hexo.fluid-dev.com/docs/guide/#mermaid-流程图>
# Flow chart, based on mermaid-js, see: <https://hexo.fluid-dev.com/docs/en/guide/#mermaid>
mermaid:
# 开启后文章默认可用,自定义页面如需使用,需在 Front-matter 中指定 `mermaid: true`
# If you want to use mermaid on the custom page, you need to set `mermaid: true` in Front-matter
enable: false

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

# See: <http://mermaid-js.github.io/mermaid/>
options: { theme: 'default' }

# 评论插件
# Comment plugin
comments:
enable: false
# 指定的插件,需要同时设置对应插件的必要参数
# The specified plugin needs to set the necessary parameters at the same time
# Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
type: disqus

#---------------------------
# 评论插件
# Comment plugins
#
# 开启评论需要先设置上方 `post: comments: enable: true`,然后根据 `type` 设置下方对应的评论插件参数
# Enable comments need to be set `post: comments: enable: true`, then set the corresponding comment plugin parameters below according to `type`
#---------------------------

# Utterances
# 基于 GitHub Issues
# Based on GitHub Issues
# See: <https://utteranc.es>
utterances:
repo:
issue_term: pathname
label: utterances
theme: github-light
theme_dark: github-dark

# Disqus
# 基于第三方的服务,国内用户直接使用容易被墙,建议配合 Disqusjs
# Based on third-party service
# See: <https://disqus.com>
disqus:
shortname:
# 以下为 Disqusjs 支持, 国内用户如果想使用 Disqus 建议配合使用
# The following are Disqusjs configurations, please ignore if DisqusJS is not required
# See: <https://github.com/SukkaW/DisqusJS>
disqusjs: false
apikey:

# Gitalk
# 基于 GitHub Issues
# Based on GitHub Issues
# See: <https://github.com/gitalk/gitalk#options>
gitalk:
clientID:
clientSecret:
repo:
owner:
admin: ['name']
language: zh-CN
labels: ['Gitalk']
perPage: 10
pagerDirection: last
distractionFreeMode: false
createIssueManually: true
# 默认 proxy 可能会失效,解决方法请见下方链接
# The default proxy may be invalid, refer to the links for solutions
# <https://github.com/gitalk/gitalk/issues/429>
# <https://github.com/Zibri/cloudflare-cors-anywhere>
proxy: <https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token>

# Valine
# 基于 LeanCloud
# Based on LeanCloud
# See: <https://valine.js.org/>
valine:
appId:
appKey:
path: window.location.pathname
placeholder:
avatar: 'retro'
meta: ['nick', 'mail', 'link']
requiredFields: []
pageSize: 10
lang: 'zh-CN'
highlight: false
recordIP: false
serverURLs: ''
emojiCDN:
emojiMaps:
enableQQ: false

# Waline
# 从 Valine 衍生而来,额外增加了服务端和多种功能
# Derived from Valine, with self-hosted service and new features
# See: <https://waline.js.org/>
waline:
serverURL: ''
path: window.location.pathname
meta: ['nick', 'mail', 'link']
requiredMeta: ['nick']
lang: 'zh-CN'
emoji: ['<https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo>']
dark: 'html[data-user-color-scheme="dark"]'
wordLimit: 0
pageSize: 10

# 畅言 Changyan
# 基于第三方的服务
# Based on third-party service, insufficient support for regions outside China
# <http://changyan.kuaizhan.com>
changyan:
appid: ''
appkey: ''

# 来必力 Livere
# 基于第三方的服务
# Based on third-party service
# See: <https://www.livere.com>
livere:
uid: ''

# Remark42
# 需要自托管服务端
# Based on self-hosted service
# See: <https://remark42.com>
remark42:
host:
site_id:
max_shown_comments: 10
locale: zh
components: ['embed']

# Twikoo
# 基于腾讯云开发
# Based on Tencent CloudBase
# See: <https://twikoo.js.org>
twikoo:
envId:
region: ap-shanghai
path: window.location.pathname

# Cusdis
# 基于第三方服务或自托管服务
# Based on third-party or self-hosted service
# See <https://cusdis.com>
cusdis:
host:
app_id:
lang: zh-cn

# Giscus
# 基于 GitHub Discussions,类似于 Utterances
# Based on GitHub Discussions, similar to Utterances
# See: <https://giscus.app/>
giscus:
repo:
repo-id:
category:
category-id:
theme-light: light
theme-dark: dark
mapping: pathname
reactions-enabled: 1
emit-metadata: 0
input-position: top
lang: zh-CN

#---------------------------
# 归档页
# Archive Page
#---------------------------
archive:
banner_img: /img/default.png
banner_img_height: 60
banner_mask_alpha: 0.3

#---------------------------
# 分类页
# Category Page
#---------------------------
category:
enable: true
banner_img: /img/default.png
banner_img_height: 60
banner_mask_alpha: 0.3

# 分类的排序字段,前面带减号是倒序,不带减号是正序
# Sort field for categories, with a minus sign is reverse order
# Options: length | name
order_by: "-length"

# 层级的折叠深度,0 是全部折叠,大于 0 后如果存在子分类则默认展开
# Collapse depth. If 0, all posts collapsed. If greater than 0, it will be expanded by default if there are subcategories
collapse_depth: 0

# 文章的排序字段,前面带减号是倒序,不带减号是正序
# Sort field for posts, with a minus sign is reverse order
# Options: date | title | or other field of front-matter
post_order_by: "-date"

# 单个分类中折叠展示文章数的最大值,超过限制会显示 More,0 则不限制
# The maximum number of posts in a single category. If the limit is exceeded, it will be displayed More. If 0 no limit
post_limit: 10

#---------------------------
# 标签页
# Tag Page
#---------------------------
tag:
enable: true
banner_img: /img/default.png
banner_img_height: 80
banner_mask_alpha: 0.3
tagcloud:
min_font: 15
max_font: 30
unit: px
start_color: "#BBBBEE"
end_color: "#337ab7"

#---------------------------
# 关于页
# About Page
#---------------------------
about:
enable: true
banner_img: /img/default.png
banner_img_height: 60
banner_mask_alpha: 0.3
avatar: /img/avatar.png
name: "Fluid"
intro: "An elegant theme for Hexo"
# 更多图标可从 <https://hexo.fluid-dev.com/docs/icon/> 查找,`class` 代表图标的 css class,添加 `qrcode` 后,图标不再是链接而是悬浮二维码
# More icons can be found from <https://hexo.fluid-dev.com/docs/en/icon/> `class` is the css class of the icon. If adding `qrcode`, The icon is no longer a link, but a hovering QR code
icons:
- { class: "iconfont icon-github-fill", link: "<https://github.com>", tip: "GitHub" }
- { class: "iconfont icon-douban-fill", link: "<https://douban.com>", tip: "豆瓣" }
- { class: "iconfont icon-wechat-fill", qrcode: "/img/favicon.png" }

#---------------------------
# 自定义页
# Custom Page
#
# 通过 hexo new page 命令创建的页面
# Custom Page through `hexo new page`
#---------------------------
page:
banner_img: /img/default.png
banner_img_height: 60
banner_mask_alpha: 0.3

#---------------------------
# 404页
# 404 Page
#---------------------------
page404:
enable: true
banner_img: /img/default.png
banner_img_height: 85
banner_mask_alpha: 0.3
# 重定向到首页的延迟(毫秒)
# Delay in redirecting to home page (milliseconds)
redirect_delay: 5000

#---------------------------
# 友链页
# Links Page
#---------------------------
links:
enable: true
banner_img: /img/default.png
banner_img_height: 60
banner_mask_alpha: 0.3
# 友链的成员项
# Member item of page
items:
- {
title: "Fluid Blog",
intro: "主题博客",
link: "<https://hexo.fluid-dev.com/>",
avatar: "/img/favicon.png"
}
- {
title: "Fluid Docs",
intro: "主题使用指南",
link: "<https://hexo.fluid-dev.com/docs/>",
avatar: "/img/favicon.png"
}
- {
title: "Fluid Repo",
intro: "主题 GitHub 仓库",
link: "<https://github.com/fluid-dev/hexo-theme-fluid>",
avatar: "/img/favicon.png"
}

# 当成员头像加载失败时,替换为指定图片
# When the member avatar fails to load, replace the specified image
onerror_avatar: /img/avatar.png

# 友链下方自定义区域,支持 HTML,可插入例如申请友链的文字
# Custom content at the bottom of the links
custom:
enable: false
content: '<hr><p>在下方留言申请加入我的友链,按如下格式提供信息:</p><ul><li>博客名:Fluid</li><li>简介:Fluid 主题官方博客</li><li>链接:<https://hexo.fluid-dev.com></li><li>图片:<https://hexo.fluid-dev.com/img/favicon.png></li></ul>'

# 评论插件
# Comment plugin
comments:
enable: false
# 指定的插件,需要同时设置对应插件的必要参数
# The specified plugin needs to set the necessary parameters at the same time
# Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
type: disqus

#---------------------------
# 以下是配置 JS CSS 等静态资源的 URL 前缀,可以自定义成 CDN 地址,
# 如果需要修改,最好使用与默认配置相同的版本,以避免潜在的问题,
# ** 如果你不知道如何设置,请不要做任何改动 **
#
# Here is the url prefix to configure the static assets. Set CDN addresses you want to customize.
# Be aware that you would better use the same version as default ones to avoid potential problems.
# DO NOT EDIT THE FOLLOWING SETTINGS UNLESS YOU KNOW WHAT YOU ARE DOING
#---------------------------

static_prefix:
# 内部静态
# Internal static
internal_js: /js
internal_css: /css
internal_img: /img

anchor: <https://lib.baomitu.com/anchor-js/4.3.1/>

github_markdown: <https://lib.baomitu.com/github-markdown-css/4.0.0/>

jquery: <https://lib.baomitu.com/jquery/3.6.0/>

bootstrap: <https://lib.baomitu.com/twitter-bootstrap/4.6.1/>

prismjs: <https://lib.baomitu.com/prism/1.29.0/>

tocbot: <https://lib.baomitu.com/tocbot/4.18.2/>

typed: <https://lib.baomitu.com/typed.js/2.0.12/>

fancybox: <https://lib.baomitu.com/fancybox/3.5.7/>

nprogress: <https://lib.baomitu.com/nprogress/0.2.0/>

mathjax: <https://lib.baomitu.com/mathjax/3.2.2/>

katex: <https://lib.baomitu.com/KaTeX/0.16.2/>

busuanzi: <https://busuanzi.ibruce.info/busuanzi/2.3/>

clipboard: <https://lib.baomitu.com/clipboard.js/2.0.11/>

mermaid: <https://lib.baomitu.com/mermaid/8.14.0/>

valine: <https://lib.baomitu.com/valine/1.5.1/>

waline: <https://lib.baomitu.com/waline/2.14.1/>

gitalk: <https://lib.baomitu.com/gitalk/1.8.0/>

disqusjs: <https://lib.baomitu.com/disqusjs/1.3.0/>

twikoo: <https://lib.baomitu.com/twikoo/1.6.8/>

hint: <https://lib.baomitu.com/hint.css/2.7.0/>

2.创建【关于页】

1
hexo new page about

创建成功后,编辑博客目录下的/source/about/index.md,添加 layout属性。

1
2
3
4
5
6
---
title: about
layout: about
---

这里写关于页的正文,支持 Markdown, HTML

本地启动

1
2
hexo g -d 
hexo s

image-20230316070056912

五、创建文章

如下修改 Hexo 博客目录中的 _config.yml,打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。

1
post_asset_folder: true

执行如下命令创建一篇新文章,名为《测试文章》

1
hexo new post 测试文章

执行完成后在source\\_posts目录下生成了一个md文件和一个同名的资源目录(用于存放图片)

在资源目录测试文章中放一张图片 test.png

image-20230316070132877

测试文章.md中添加内容如下,演示了图片的三种引用方式。第一种为官方推荐用法,第二种为markdown语法,第三种和前两种图片存放位置不一样,是将图片放在\\source\\images目录下。这三种写法在md文件中图片是无法显示的,但是在页面上能正常显示。

图片的引入方式可参考官方文档 https://hexo.io/zh-cn/docs/asset-folders.html,有详细介绍。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: 测试文章
date: 2021-06-10 16:35:20
tags:
- 原创
categories:
- Java
---

这是一篇测试文章

{% asset_img test.png 图片引用方法一 %}

![图片引用方法二](test.png)

![图片引用方法三](/images/test.png)

本地启动

1
2
hexo g -d
hexo s

六、个性化功能配置

1.修改浏览器tab页名称

1
2
# 修改根目录下_config.yml中的title字段
title: 'gcoder blog'

2.修改博客标题

1
2
# 修改根目录下_config.fluid.yml中的blog_title字段
blog_title: 'gcoder blog'

3.修改博客主页正中间的文字

1
2
# 修改根目录下_config.fluid.yml中的text字段
text: '开心编码'

4.配置文章模板

配置模板是为了把一些文章固定的参数给确定下来,避免每次文章都要重复的设置,模板存放在scaffolds文件夹下面,有三个md文件,就是我们的模板。根据以上的插件,以及主题文件,我将post.md和draft.md都修改成了以下内容

1
2
3
4
5
6
7
8
9
10
11
---
title: {{ title }}
date: {{ date }}
tags:
categories:
excerpt: # 文章的摘要
toc: true # 是否开启目录,还要配合theme的配置一起使用
cover: # cover图片
updated: # 最后更新时间
password: # 访问时需要的密码
---

5.添加阅读量统计

Fluid主题写好了统计阅读量的代码,但是缺少相应配置所以没有开启,需要借助三方服务来统计阅读量,这里是有 Leancloud的免费服务来进行统计。

*1. 申请LeanCloud账号并创建应用*

进入 官网注册账号

image-20230316070203756

需实名认证,完成后才能使用各项服务

image-20230316070229882

验证邮箱

image-20230316070253329

创建应用,选择开发版即可,免费的

image-20230316070308378

进入该应用的 设置->应用凭证,找到 AppIDAppKey,记录下来后面配置要用

image-20230316070323776

*2. 修改Fluid配置*

修改根目录下_config.fluid.yml中的配置

  1. *单篇文章阅读量计数*

    打开统计开关

    image-20230316070354583

    配置 leancloudapp_idapp_key

    image-20230316070408837

    打开计数功能,统计来源改为 leancloud

    image-20230316070427032

    页面效果

    image-20230316070440323

  2. *页面底部展示网站的 PV、UV 统计数*

    image-20230316070458998

    页面效果

    image-20230316070510832

6.*添加评论功能*

评论功能的代码已经写好了,只不过没有开启,需要修改一些配置.

修改博客目录下_config.fluid.yml的配置文件

  1. 启用评论插件

    image-20230316070525251

  2. 配置LeanCloudappIdappkey

    image-20230316070539273

  3. 重新部署后,查看页面效果,评论功能已开启

    image-20230316070552652

七、发布到github(可选)

方式一

安装hexo-deployer-git

1
npm install hexo-deployer-git --save

修改根目录下的 _config.yml,配置 GitHub相关信息

1
2
3
4
5
6
7
deploy:
type: git
repo:
github:
url: <https://github.com/aaaa/bbb.git>
branch: main
token: '' #

其中 tokenGitHubPersonal access tokens,获取方式如下图

image-20230316070655190

部署到GitHub

1
hexo g -d 

浏览器访问 https://gcoder.github.io/,部署成功

image-20230316070711419

方式二

直接将 public目录中的文件和目录推送至 GitHub仓库和分支中。

image-20230316070749773

八、发布到自己服务器,Nginx代理(可选)

如果自己有服务器的话,也可以不使用 GitHub Pages,直接部署的自己的服务器上,通过 Nginx 进行代理,我这里有一个阿里云上的 CentOS 7 版的 Linux 服务器,演示下如何部署,步骤如下。

打开 hexo-blog 根目录下的 _config.yml,增加如下配置,这是因为把网站存放在了子目录中,要和 Nginx 配置中的 location /blog 路径一致。

1
root: /blog

hexo-blog根目录下执行打包命令,打包好的文件在 public目录下

1
hexo g

public目录下的文件复制到 Linux服务器上的某个目录下,我的存放目录为

1
/opt/rkyao/fronted/hexo-blog

修改 Nginx配置文件,我的 Nginx安装路径为 /usr/local,大家根据自己实际情况调整

1
2
3
4
5
6
7
cd /usr/local/nginx/conf
vim nginx.conf
# server节点下添加如下配置
location /blog {
alias /opt/rkyao/fronted/hexo-blog;
index index.html index.htm;
}

重启 Nginx

1
2
cd /usr/local/nginx/sbin
./nginx -s reload

访问博客

1
<http://ip/blog/>

九、绑定域名(域名厂商namesilo+DNS解析cloudflare)

这块内容因为在我最早的搭建博客搞的了,没有记录文档。等找天有时间了我再补充下~

写在最后

参考文章

以下为参考文章,如有侵权,请联系删除!

https://blog.csdn.net/yaorongke/article/details/119089190

https://ayase.moe/2023/02/12/deploy-hexo-in-2023/


hexo+github+namesilo搭建个人博客
https://gcoder5.com/2023/03/16/hexo-github-namesilo搭建个人博客/
作者
Gcoder
发布于
2023年3月16日
许可协议