Hexo:A fast, simple & powerful blog framework, powered by Node.js.
特点:

  • 不可思议的快速 ─ 只要一眨眼静态文件即生成完成
  • 支持 Markdown
  • 高扩展性、自订性
  • 仅需一道指令即可部署到GitHub或Gitee

在开始前确保本地已经安装了 Node.js,若您想将博客部署到GitHub或Gitee上还需要安装Git

开始

安装Hexo

在终端输入如下命令

1
2
3
4
5
## 安装hexo
npm install -g hexo

## 安装hexo-cli
npm install -g hexo-cli

稍等一会儿等待安装完成后输入hexo -v,若出现如下界面则安装成功

初始化hexo

首先创建一个文件夹,如hexo,然后在终端输入如下命令

1
2
cd hexo  ## 进入hexo目录
hexo init ## 初始化hexo

稍等一会儿,若没有报错的情况下理应看到如下输出字样及hexo目录下应生成以下文件结构

image-20200717200037772

配置hexo主题

hexo提供了大量的主题供我们使用, 截至笔者写该教程时主题列表已有314款主题.这里我教大家如何安装并配置我博客所使用的Butterfly主题,其他主题也是类似的

首先下载主题

1
2
## 从GitHub仓库上克隆Butterfly主题项目至hexo目录下的themes目录下,并重命名为butterfly
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
image-20200717200814977

如果你没有 pug 以及 stylus 的渲染器,请下载安装:

1
2
## 安装 pug 以及 stylus 的渲染器
npm install hexo-renderer-pug hexo-renderer-stylus --save

配置hexo主题

打开hexo目录下的_config.yml文件,将theme配置项的值改为刚才重命名的主题名butterfly

⚠️ 需要注意的是, 上面所说的_config.yml是hexo目录下的,而不是themes/butterfly目录下的那个

image-20200717201342279

Butterfly作者建议

为了主题的平滑升级, Butterfly 使用了data files特性。

推荐把主题默认的配置文件themes/butterfly/_config.yml复制到 hexo 工作目录下的source/_data目录下,并重命名为butterfly.yml,如果source/_data的目录不存在那就自己手动创建一个。

本地预览博客

在终端输入如下命令

1
2
## 生成html静态页面并启动服务器
hexo g && hexo s
image-20200718013230926

看到以上界面并且没有报错则说明我们的博客已经搭建好了,接下来打开浏览器访问http://localhost:4000

image-20200718013513367

到这里, 我们的博客的骨架已经搭建完成了. 若想继续深度定制自己的博客,还需要更多的配置.

配置hexo & butterfly主题

配置 butterfly主题

打开hexo/source/_data/butterfly.yml,由于里面的注释是英文和繁体中文,看不懂的同学可以参考的我下面的注释完成配置。 当然,我这里的配置是不完整的,仅供大家配置时参考,切勿盲目复制粘贴!! 想要看详细配置教程可以参考Butterfly主题作者的完整教程
如果你不是用的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
# Main menu navigation (导航目录)
# --------------------------------------

# format: name: link || icon
# sub-menu
# name || icon:
# name || link || icon

menu: #配置顶部导航菜单
首页: / || fas fa-home
时间轴: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
清单||fas fa-list:
- Music || /music/ || fas fa-music
- Movie || /movies/ || fas fa-video
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heart

# Code Blocks (代码相关设置)
# --------------------------------------

highlight_theme: mac #代码高亮主题
highlight_copy: true #复制代码的按钮
highlight_lang: true #是否显示代码的语言类型
highlight_shrink: false #是否展开代码
code_word_wrap: false

# copy settings
# copyright: Add the copyright information after copied content (复制的内容后面自动加上版权信息)
copy:
enable: true # 是否允许他人复制你贴出的代码
copyright: false # 是否开启在复制的内容后面自动加上版权信息

# social settings (社交图标设置)
# formal:
# icon: link || the description
social:
fab fa-github: https://github.com/xxx || Github # github链接
fas fa-envelope: xxx:xxx@gmail.com || Email # 邮箱

# search (搜索) 开启会报错,需要额外插件
# --------------------------------------

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

labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
hits_stats: '${hits} results found in ${time} ms'

# Local search
local_search:
enable: false
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

# 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: /img/avatar.png #头像路径
effect: 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: https://i.loli.net/2020/05/01/IuWi8QbHvzjlOPw.jpg

# the banner image of archive page
archive_img:

# the banner image of tag page
# tag page, look like https://xxxxxxxxx.com/tags/butterfly
tag_img:

# the banner image of category page
# category page, look like https://xxxxxxxxx.com/categories/butterfly
category_img:

# If you are using hexo-douban, you can configure it (如果你有使用豆瓣 hexo-douban,可配置这个)
# douban:
# meta: false
# movies_img:
# books_img:
# games_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 (当没有设置封面时,展示默认封面)
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 简单的404页
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: both # created or updated or both 主页文章日期是创建日或者更新日或都展示
categories: true # true or false 主页是否显示分类
tags: false # true or false 主页是否展示标签
post:
date_type: both # created or updated or both 文章日期是创建日或者更新日或都展示
categories: true # true or false 文章页是否显示分类
tags: true # true or false 文章页是否展示标签

# wordcount (字数统计) 开启会报错,需额外安装插件 npm install hexo-wordcount --save
wordcount:
enable: true
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)
index_post_content:
method: 3
length: 500 # if you set method to 2 or 3, the length need to config

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

# toc (目录)
toc:
enable: true
number: true
auto_open: true # auto open the sidebar

post_copyright:
enable: true
decode: false
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

# Related Articles 相关文章设置
related_post:
enable: true
limit: 6 # Number of posts displayed 展示数量
date_type: created # or created or updated 文章日期展示创建日还是更新日

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

# anchor
# when you scroll in post, the URL will update according to header id.
anchor: false

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


# Share.js 分析功能
# https://github.com/overtrue/share.js
sharejs:
enable: true
sites: facebook,twitter,wechat,weibo,qq # 分享的平台

# Comments System 需付费购买服务 详情见https://demo.jerryc.me/posts/ceeb73f
# --------------------------------------


# Footer Settings 页脚设置
# --------------------------------------

since: 2020

footer_custom_text:

footer_copyright: true

ICP:
enable: false
url:
text:
icon: /img/icp.png

# Website Background (网站背景)
# can set it to color or image (可设置图片 或者 颜色)
# The formal of color: '#49B202'
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
# 默认背景为白色
background: /img/background.jpg

# Show the footer background image (same as top_img)
footer_bg: false

# the position of bottom right button/default unit: px (右下角按钮距离底部的距离 单位px)
rightside-bottom:

# 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

# Dynamic ribbon (动态彩带)
canvas_ribbon_piao:
enable: false
mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
enable: true
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 (抖動特效)

# Mouse click effects: fireworks (鼠标点击效果: 烟火特效)
fireworks:
enable: false
zIndex: 9999 # -1 or 9999

# Mouse click effects: Heart symbol (鼠标点击效果: 爱心)
click_heart: true

# Mouse click effects: words (鼠标点击效果: 文字)
ClickShowText:
enable: false
text:
- I
- LOVE
- YOU
fontSize: 15px

# 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:
font-family:
code-font:

# Font settings for the site title and site subtitle
# 左上角网站名字
blog_title_font:
font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', Microsoft YaHei', sans-serif

# The setting of divider icon (水平分隔新图标設置)
hr_icon:
enable: true
icon: # the unicode value of Font Awesome icon
icon-top:

# the subtitle on homepage (主页subtitle)
subtitle:
enable: true
# Typewriter Effect (打字效果)
effect: true
# loop (循环打字)
loop: true
# source调用第三方服务
# source: false 關閉調用
# source: 1 调用搏天api的随机语录(简体) https://api.btstu.cn/
# source: 2 调用一句网的一句話(简体) https://hitokoto.cn/
# source: 3 调用一句网(简体) http://yijuzhan.com/
# source: 4 调用今日诗词(简体) https://www.jinrishici.com/
# subtitle 会先展示 source , 再展示 sub 的內容
source: false
# 如果有英文逗号' , ',请使用转义字符 ,
# 如果有英文双引号' " ',请使用转义字符 "
# 开头不允许使用转义字符,如需要,请把整个句子用双引号包裹住
# 如果关闭打字效果,subtitle只会展示sub的第一行文字
sub:
- 在哪摔倒的,换个优美的姿势,接着躺下去
- Where did you fall, change a beautiful posture, and then lie down

# Loading Animation (加载动画)
preloader: true

# aside (侧边栏)
# --------------------------------------

aside: #侧边栏
enable: true
mobile: true # display on mobile
position: right # left or right
card_author:
enable: true
description:
card_announcement: #公告卡片
enable: true
content: 这里是JRabbit的博客,用于记录学习过程中的笔记及遇到的一些问题。
card_recent_post: # 最近发布卡片
enable: true
limit: 5 # if set 0 will show all
card_categories: #分类卡片
enable: true
limit: 8 # if set 0 will show all
expand: none # none/true/false
card_tags: # 标签卡片
enable: true
limit: 40 # if set 0 will show all
color: false
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
card_webinfo: true

# 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: true #是否开启该功能
publish_date: 2020/7/17 #网页发布的时间

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

# Conversion between Traditional and Simplified Chinese (简体与繁体字的相互转换)
translate:
enable: true
# The text of a button
default:
# the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese)
defaultEncoding: 2
# Time delay
translateDelay: 0
# 语言为简体中文时的按钮文本内容
msgToTraditionalChinese: '繁'
# 语言为繁体中文时的按钮文本内容
msgToSimplifiedChinese: '簡'

# Read Mode (阅读模式)
readmode: true

# dark mode
darkmode:
enable: true
# Toggle Button to switch dark/light mode
button: true
# Switch dark/light mode automatically (自动切换 暗黑模式 和 白天模式)
# 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

# 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/knsv/mermaid
#使用mermaid标签可以绘制Flowchart(流程图)、Sequence diagram(时序图)、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和Pie Chart(圆形图)
mermaid:
enable: false
# built-in themes: default/forest/dark/neutral
theme: default

# 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
# --------------------------------------

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

# Baidu Push (百度推送)
baidu_push: false

# https://instant.page/
# prefetch (预加载)
instantpage: true

# 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/lazyload
lazyload:
enable: true
post: /img/loading.gif # 加载gif动画图片

# Disable Baidu transformation on mobile devices (禁止百度转码)
disable_baidu_transformation: true

# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta: true

# Caches the contents in a fragment, speed up the generation (开启hexo自带的缓存,加快生成速度)
fragment_cache: 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
# 非必要请不要修改,除非你懂得他们是如何工作的

配置hexo

主题配置完成后我们会发现还有一部分的内容始终是默认的,例如作者名称等。这时需要配置hexo目录下的_confiig.yml

1
2
3
4
5
6
7
8
# Site
title: JRabbit'Blog # 博客主页标题
subtitle: ''
description: ''
keywords:
author: JRabbit # 作者名称
language: zh-CN # 语言
timezone: 'UTC' # 时区

只需要配置这几个就行了, 因为其他的都在主题配置文件中修改了.

部署到Gitee

之前我们一直都是在本地运行,这样只能我们自己看见,他人是看不见的。所以我们可以将我们的博客部署到Gitee或者GitHub上, 有服务器的同学也可以部署到自己的服务器上 。这里我们以Gitee为例, 因为其在国内访问较快。

创建码云账户

首先去码云注册一个账户

image-20200718121409362

注册登录后点击右上角+新建仓库

image-20200718121532997

填写仓库信息 仓库名以及仓库描述

image-20200718125355851

配置hexo

打开hexo目录下的_config.yml文件,在结尾处deploy配置项处配置你的Gitee仓库地址信息

image-20200718125432762

⚠️ 配置项:[空格]配置值 配置项: 与 值之间有个空格!!!

上传至仓库

首先安装自动部署发布工具hexo-deployer-git

1
npm install hexo-deployer-git --save

然后输入命令发布博客

1
hexo clean && hexo g && hexo d
image-20200718130102675

若没有报错并显示如上信息则说明上传博客成功了. 首次上传需要输入Gitee账号密码

配置Gitee Pages

Gitee Pages 服务 一个支持Jekyll、Hugo、Hexo静态网站的服务

回到我们的博客仓库, 点击右上方的服务, 并选择Gitee Pages

image-20200718130537415

点击启动即可

image-20200718130803278

稍等一会儿, 等出现 已开启Gitee Pages服务后,就可以看到我们博客的url啦

image-20200718130959084

复制我们博客的URL 去浏览器访问试试

image-20200718131148835

咦, 发现博客的样式不对劲. 还需要在hexo目录下的_config.yml配置文件中加点料

image-20200718131411652

再次使用发布命令hexo clean && hexo g && hexo d上传至仓库试试

再次访问我们的博客地址 可以看到博客的样式已经正常了

image-20200718131847309

发布新的博文

hexo发布新的博文

可以使用hexo提供的命令进行创建, 他会在hexo目录下的source/_posts/创建指定标题的markdown文件

1
hexo new CSS选择器

image-20200718132516064

创建完成后我们就可以使用各种markdown编辑器进行编辑我们的博文啦. 我个人比较喜欢的是Typora编辑完成后执行一遍发布命令hexo clean && hexo g && hexo d即可同步到我们的博客啦.

自己创建md文档

如果不想使用hexo自带的命令进行创建博文的话, 我们也可以自己创建md文档, 编辑完成后将文件拖至source/_posts目录下即可.

切记将自己创建的md文档拖至source/_posts目录下, 文档放错位置将无法正常发布博文,甚至导致hexo报错

易错点总结

  1. 打开hexo目录下的_config.yml文件,将theme配置项的值改为刚才重命名的主题名butterfly
  2. 推荐把主题默认配置文件(即hexo/themes/butterfly下的)_config.yml复制到 hexo/source/_data目录下, 并重命名为butterfly.yml
  3. yml文件中的配置项:[空格]配置值 配置项: 与 值之间有个空格!!!
  4. 创建仓库是是否开源一定要选择公开
  5. 上述教程中所有的命令都是在hexo目录下执行
  6. 配置项中所用到的图片都是在主题目录下的butterfly/source/img/

结语

hexo这款博客框架还是非常好用的, 搭建和部署都非常简单, 非常适合新手搭建属于自己的博客。而且其支持300多款各式各样的主题, 相信总一款符合你的审美。Butterfly主题还提供了其他很多功能插件,比如搜索, 评论, 在线聊天, 统计分析,文章置顶, 广告, 数学公式,PWA等等, 详细的教程请查看主题作者的教程