使用hexo快速搭建个人博客

更多用法登录:[https://hexo.fluid-dev.com/docs/](https://hexo.fluid-dev.com/docs/)

参考预览:https://hexo.fluid-dev.com/

因公众号搜索功能太差,而且限制也多。近期想搭建个人博客,存放一些文章!作为一个实干派技术博主,一个博客那必须选择最炫酷而且搭建简单的!

本次我采用了hexo来搭建个人博客,接下来,我将手把手带大家完成个人博客搭建,有想要自己的个人博客的可以按照以下教程傻瓜式操作即可完成!

我搭建的博客体验地址:http://blog.quanyouhulian.com/
博客页面预览
image.png

接下来,开始详细安装教程!只需10分钟,即可快速完成搭建!

1、安装hexo

hexo简介

Hexo 是一个快速、简单且功能强大的博客框架,它基于 Node.js 构建。使用 Hexo,你可以轻松地生成静态网页,这些网页可以部署到如 GitHub Pages 这样的静态网站托管服务上。Hexo 提供了丰富的主题和插件,让你能够自定义和扩展你的博客。
Hexo 的主要特点包括:

  1. 快速生成: Hexo 利用 Node.js 的高性能,可以快速生成大量静态页面。
  2. Markdown 支持: Hexo 支持 Markdown 语法,让你能够以一种简洁的方式编写文章。
  3. 丰富的主题: Hexo 有一个活跃的社区,提供了许多免费的主题,你可以选择一个你喜欢的主题来美化你的博客。
  4. 插件系统: 你可以通过安装插件来扩展 Hexo 的功能,比如添加搜索功能、评论系统、统计分析等。
  5. 易于部署: Hexo 支持多种部署方式,包括 Git,这使得将你的博客部署到互联网上变得非常简单。

使用 Hexo,你可以专注于内容创作,而不需要过多地关注网站的技术细节。它是一个非常受欢迎的工具,尤其适合开发者和技术爱好者搭建个人博客。

2、hexo快速安装

由于ubuntu系统对权限管控较严格,我这里直接切到root账户!你也可以使用非root账户前面加sudo操作

1
npm install hexo-deployer-git --save

image.png

3、初始化文件夹存放博客文章页面

按照上一步安装完成后,系统会多出个hexo命令,我们先初始化一个文件夹用来存放个人博客的文章数据及页面,我这里把这些数据存放在/home/ubuntu/git/blog目录下,大家可以根据自己系统情况存储

1
hexo init blog

image.png

4、下载主题控制插件

hexo提供了上百种博客风格,我这里使用hexo-theme-fluid风格,也是当前大家比较喜欢的简约风(具体页面样子可以看文章开头截图),或者进入体验地址:https://hexo.fluid-dev.com/

1
npm install --save hexo-theme-fluid

image.png
如果想使用其余主题风格的,可以到主题列表里去选:https://hexo.io/themes/
image.png

5、修改hexo的主题风格及语言

5.1、修改blog下config配置文件

上一步使用npm命令安装完hexo-theme-fluid后,主题风格不会自动生效,需要再在blog目录下配置下它的config文件

1
2
# 编辑blog的配置文件
vim _config.yml

image.png
这里默认是en英语格式,这里我们改成zh-CN中文展示
image.png
theme主题默认是landscape,这里我们换成fluid主题风格
image.png

5.2、新增_config.fluid.yml配置文件

回到根目录cd /home/ubuntu/git/blog
新增_config.fluid.yml文件

1
vim _config.fluid.yml

拷贝以下配置内容到_config.fluid.yml文件内,后面要想调整页面的布局及新增配置只需要改_config.fluid.yml配置文件即可,无需再修改_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
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
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
#---------------------------
# 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 Analytics 4 的媒体资源 ID
# Google Analytics 4 MEASUREMENT_ID
# See: https://support.google.com/analytics/answer/9744165#zippy=%2Cin-this-article
google:
measurement_id:

# 腾讯统计的 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 | discuss
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
# 支持腾讯云、Vercel、Railway 等多种平台部署
# 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

# Discuss
# 多平台、多数据库、自托管、免费开源评论系统
# Self-hosted, small size, multi-platform, multi-database, free and open source commenting system
# See: https://discuss.js.org
discuss:
serverURLs:
path: window.location.pathname


#---------------------------
# 归档页
# 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 | discuss
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.4/

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.20.1/

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://cdn.staticfile.org/waline/2.15.5/

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/

discuss: https://lib.baomitu.com/discuss/1.2.1/

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

moment: https://lib.baomitu.com/moment.js/2.29.4/

6、安装blog相关依赖

1
2
3
4
# 切换到blog根目录,大家可以根据自己存放情况切换相应目录
cd /home/ubuntu/git/blog
# 安装相关依赖
npm install

image.png
提示:如果npm install安装很慢,可以配置下使用国内源,如何配置到我的AI工具:https://ai.quanyouhulian.com/#/chat/ 去问gpt

7、启动hexo服务

使用以下命令启动,也可以使用简易命令:hexo s

1
hexo server

image.png
注意:这里每次和云服务器断开ssh链接就会自动关闭,想一直打开可以使用pm2进行进程守护,让hexo在后台运行

8、使用pm2后台启动服务

8.1、安装pm2(已经安装了的可以忽略)

1
npm install -g pm2

8.2、后台运行hexo

使用以下命令把hexo在后台运行

1
pm2 start hexo -- server

image.png

8.3、博客页面效果验证

hexo默认端口是4000,使用ip+端口看是否可以打开!(注意:云服务器安全组把外网访问4000端口记得开下)
image.png

9、配置域名映射到云服务器的ip和端口

9.1、阿里云域名映射新增ip和端口映射

image.png

9.2、云服务器上nginx.conf新增代理配置

由于我nginx和hexo部署在同一台机器上,我这里proxy_pass可以直接指向本地4000端口,nginx.conf默认目录是在/etc/nginx文件夹下
vim nginx.conf 新增以下域名及代理配置解析
image.png

9.3、重启nginx

1
systemctl restart nginx

image.png

10、验证博客页面

使用域名:http://blog.quanyouhulian.com/打开,页面没问题,域名映射成功!
image.png

11、hexo博客使用方法

以下我将只讲下基础用法:如何新建文章,文章内容是markdown格式书写!具体内容怎么使用自己参考:https://hexo.fluid-dev.com/docs/,里面有非常完整的用法

11.1、新增关于页面

按上面步骤启动完的hexo博客,关于页面默认是空的,需要自己创建
image.png
这里使用hexo的命令直接新增about页面

1
hexo new page about

执行上面命令后,会自动在/home/ubuntu/git/blog/source文件夹下新增about文件夹,并自动存放index.md页面
image.png
这里我们可以修改下关于页面的内容

1
vim /home/ubuntu/git/blog/source/about/index.md

新增文字:这里写关于页的正文,支持 Markdown, HTML(注意:layout: about 必须存在,并且不能修改成其他值,否则不会显示头像等样式。)
image.png

重启hexo让新增页面生效

我这里使用了pm2进行进程守护,直接使用pm2进行重启即可

1
sudo pm2 restart hexo

image.png
打开页面查看关于页内容是否生效
image.png

11.2、修改首页

只需编辑_config.fluid.yml配置即可

1
vim _config.fluid.yml

image.png

重启hexo

1
sudo pm2 restart hexo

重新打开博客首页,可以看到博客首页信息已经变更了
image.png

11.3、新增分类及标签页

查看_config.fluid.yml可以看到,分类对应的链接是source目录下的categories,标签对应的是tags
image.png
和创建关于页面一样,继续创建categories分类页的页面

1
sudo hexo new page categories

创建tags标签页面

11.4、新增博客页面并设置分类和标签

我这创建一篇文章,标题“使用hexo快速搭建个人博客”

1
hexo n "使用hexo快速搭建个人博客"

执行完该命令会在/git/blog/source/_posts/下生成使用hexo快速搭建个人博客.md文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
title: 使用hexo快速搭建个人博客
date: 2024-07-15 15:50:28
categories:
- 博客搭建
tags:
- 博客搭建
- node
- git
- github
---
测试下显示情况

更多用法登录:https://hexo.fluid-dev.com/docs/

测试定时任务拉取

参考预览:https://hexo.fluid-dev.com/

我在文章内容加了categories和tags,页面会自动进行分类和打标签

重启hexo让文章页面生效

1
sudo pm2 restart hexo

11.5、修改背景图片

如果你不想使用fluid的默认图片,可以去以下三个网站查找高清背景图

image.png
查看_config.fluid.yml配置,可以看到博客背景图读取的是/home/ubuntu/git/blog/source/img/default.png
image.png
我们把上面网站的首页高清图片下载下来,并使用命令覆盖云服务器的default.png

1
scp default.png ubuntu@120.92.211.225:/home/ubuntu/git/blog/source/img

重启hexo

1
sudo pm2 restart hexo

重新打开博客首页,可以看到博客首页图片已经换成刚下载的那张了
image.png

12、把hexo的文章关联gitlab文件夹

通过上面可以发现,使用hexo n “文章标题”方式,实际上就是在/home/ubuntu/git/blog/source/_posts文件夹下创建了.md文件,再通过hexo g命令,把.md文件转成html存放在/home/ubuntu/git/blog/public下image.png
为了方便文章推送,我把_posts文件夹关联到gitlab上的文件夹,这样每次在_posts使用git pull就可以把远程文章拉取下来了!

12.1、把git工程克隆下来

1
git clone git@gitlab.quanyouhulian.com:chatgpt/blog-post.git temp-blog-post

12.2、把.git配置文件移到_posts文件夹下

1
mv /home/ubuntu/git/temp-blog-post/.git /home/ubuntu/git/blog/source/_posts/

这样就可以直接在_posts文件夹下使用git pull命令去拉取git文件了
image.png
把刚刚临时文件temp-blog-post删除

1
rm -rf /home/ubuntu/git/temp-blog-post

12.3、推送/home/ubuntu/git/blog/source/_posts底下文件到git

先切换到_posts目录下
cd /home/ubuntu/git/blog/source/_posts,使用git命令保持_posts数据和远程git仓库的一致

1
2
3
git add .
git commit -m "初始化"
git push

image.png

12.4、查询git仓库推送情况

进入到git仓库可以看到已经同步了,之后本地和hexo服务器就可以通过git实时同步了
image.png

12.5、让hexo自动拉取git并编译

为了不用每次本地提交文章到git后都登录到服务器去pull文章,这里写个自动拉取脚本,每次拉取到本地后再自动编译下
sudo vim /home/ubuntu/git/blog/update_posts.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#!/bin/bash

# 进入_posts目录
cd /home/ubuntu/git/blog/source/_posts

# 执行git pull并捕获输出
output=$(git pull origin master)

# 检查输出中是否包含 "Already up to date." 字符串
if echo "$output" | grep -q "Already up to date."; then
echo "No updates found."
else
echo "Repository updated, generating site..."
cd /home/ubuntu/git/blog
sudo pm2 restart hexo
fi

设置定时任务,让update_posts.sh每隔10分钟自动拉取一次
使用ubuntu系统自带定时脚本

1
crontab -e

image.png
设置每隔10分钟执行一次,设置完成后ctl+x保存退出
image.png
查询定时任务执行情况

1
tail -100f /var/log/syslog

从日志可以看到上面设定的定时任务有执行
image.png

13、hexo常用命令

1
2
3
4
5
6
# 清除缓存文件
hexo clean
# 生成静态文件 可简写为 hexo g
hexo generate
# 部署网站 可简写为 hexo d
hexo deploy

14、效果预览

http://blog.quanyouhulian.com/
image.png

15、安装遇到问题

图片跨域不显示问题

在公众号md文章内容开始加入可以解决跨域显示问题
alt text


使用hexo快速搭建个人博客
http://example.com/2024/07/15/使用hexo快速搭建个人博客/
作者
技术Z先生
发布于
2024年7月15日
许可协议