抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

Mr.wang

Time flies and people come and go

博客

归档

如何搭建博客

Mr.wang
hexo

发布于：2021年4月12日
次浏览

讲述搭建博客的一切

Hexo 是一个快速、简洁且高效的博客框架。

作为一位前端开发者，我了解到的静态博客其实际是一份 html，hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

前端开发者都知开发会使用到脚手架编译，而 hexo 就是将我们平时写的笔记进行编译为 html，里面使用了主题可以优化编译效果，在此我将使用volantis作为主题

配置

环境

想要使用 hexo 那么你将要拥有前端的开发环境

Node Git

安装 Hexo

查看版本 hexo -v

1
npm install -g hexo-cli

初始化 Hexo 脚手架

1
2
3
hexo init <blog-name>
cd <blog-name>
npm install

初始化的结构

本地启动为 hexo server

1
2
3
4
5
6
7
8
├── _config.yml
├── package.json
├── node_modules
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

到此为止，如果你执行的命令没有报错，那么你的 hexo 已经初具规模，可以说是最初版，后续可以自定义主题的配置

自动部署

使用 hexo 推荐的自动部署的库可以连接 github gitee gitlab

安装hexo-deployer-git

1
npm install hexo-deployer-git --save
1
2
3
4
5
//在个人_config.yml中修改
deploy:
  type: git
  repository: git@gitee.com:wang-z/wang-z.git
  branch: master

注入脚本

可以在主题目录下 /scripts 编写 js 脚本在博客会自动注入进 html

网站图标

在 source/文件下加入名 favicon.ico 的图标会自动显示

修改博客文件下_config.yml

每个人想要部署的地方不同，这里提供 gitee 仓库的部署

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

# Site
title: Mr.wang'blog
subtitle: "Time flies and people come and go"
description: "一个人的自述"
keywords: gitee blog wang js
author: wangzhibiao
language: zh-CN
timezone: ""

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://wang-z.gitee.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ""
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ""
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ""
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: volantis

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@gitee.com:wang-z/wang-z.git
  branch: master

主题

博客的多样化，可以使用别人写好的主题模板进行编译，好看又好用

主题替换

在 blog 中 themes 添加博客文件，并修改个人_config.yml

在 hexo-V5 版本只需要安装主题包 npm i <主题包> 旧版本仍需 git clone URL themes/{主题名}

独立主题 yml 只需要在 blog 文件下创建_config.主题.yml 即可在这文件下配置主题的设置

根据每个主题的不同，请到主题网站内修改主题_config.yml

这里提供volantis

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: volantis

友链不在 index.md 中定义–》在 blog/source/_data/friends.yml 写入友链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- group: 个人博客 # 分组标题
  description: # 分组描述
  icon: fas fa-user-tie
  items:
    - title: wang’blog # 名称
      avatar: http://www.gx8899.com/uploads/allimg/2018010408/w0pewqfx4dz.jpg # 头像
      url: https://wang-zhibiao.github.io/ # 链接
      screenshot: # 截图
      keywords: [js, vue] # 关键词
      description: 一个人的博客 # 描述
    - title: gauhar’blog # 名称
      avatar: https://gauhar.gitee.io/css/images/logo.jpg # 头像
      url: https://gauhar.gitee.io/ # 链接
      screenshot: # 截图
      keywords: [js, vue，jQuery] # 关键词
      description: 华仔的博客 # 描述

修改博客主题 _config.yml / _config.valantis.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
use_cdn: false
navbar:
  logo: # choose [img] or [icon + title]
    img: #https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png
    icon:
    title: "Mr.wang"
  menu:
    - name: 博客
      icon: fas fa-rss
      url: /
    - name: 分类
      icon: fas fa-folder-open
      url: categories/
    - name: 标签
      icon: fas fa-tags
      url: tags/
    - name: 归档
      icon: fas fa-archive
      url: archives/
    - name: 友链
      icon: fas fa-link
      url: friends/
    - name: 关于
      icon: fas fa-info-circle
      url: about/
    - name: 暗黑模式
      icon: fas fa-moon
      toggle: darkmode
    - name: 背景音乐
      icon: fas fa-compact-disc
cover:
  height_scheme: full # full, half
  title: "Mr.wang"
  subtitle: "Time flies and people come and go"
  display:
    home: true
    archive: true
    others: true
  background: # https://bing.ioliu.cn/v1/rand?w=1920&h=1200
  features:
    - name: 博客
      img: https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f4f0.svg
      url: /

    # - name: 文档
    #   img: https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f516.svg
    #   url: /v5/getting-started/
    #   target: _self
    # - name: 示例
    #   img: https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f4af.svg
    #   url: /examples/
    # - name: 帮助
    #   img: https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f4ac.svg
    #   url: /faqs/
    # - name: 鸣谢
    #   img: https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f497.svg
    #   url: /contributors/
    - name: 归档
      img: https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f5c3.svg
      url: /archives/
    # - name: 源码
    #   img: https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f9ec.svg
    #   url: https://github.com/volantis-x/hexo-theme-volantis/
    #   target: _self
article:
  preview:
    scheme: landscape # landscape
    # pin icon for post
    pin_icon: # https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f4cc.svg
    # auto generate title if not exist
    auto_title: false # false, true
    # auto generate excerpt if not exist
    auto_excerpt: false # false, true
    author: true
    # show readmore button
    readmore: auto # auto, always
  body:
    meta_library:
      author:
        avatar: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png
        name: Volantis Team
        url: https://github.com/volantis-x/
      updated:
        title: "本页文档最后更新于："

comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: valine

pages:
  # 友链页面配置
  friends:
    layout_scheme: traditional

sidebar:
  # 主页、分类、归档等独立页面
  for_page: [blogger, category, tagcloud, qrcode]
  # layout: docs/post 这类文章页面
  for_post: [toc]
  # 侧边栏组件库
  widget_library:
    # ---------------------------------------
    # blogger info widget
    blogger:
      class: blogger
      display: [desktop, mobile] # [desktop, mobile]
      avatar: https://wang-z.gitee.io/img/author.jpg
      shape: rectangle # circle, rectangle
      url: /about/
      title:
      subtitle:
      jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails.
      social: true
    # ---------------------------------------
    # toc widget (valid only in articles)
    toc:
      class: toc
      display: [desktop, mobile] # [desktop, mobile]
      header:
        icon: fas fa-list
        title: 本文目录
      list_number: false
      min_depth: 2
      max_depth: 5
    # ---------------------------------------
    # category widget
    category:
      class: category
      display: [desktop] # [desktop, mobile]
      header:
        icon: fas fa-folder-open
        title: 文章分类
        url: /blog/categories/
    # ---------------------------------------
    # tagcloud widget
    tagcloud:
      class: tagcloud
      display: [desktop, mobile] # [desktop, mobile]
      header:
        icon: fas fa-tags
        title: 热门标签
        url: /blog/tags/
      min_font: 14
      max_font: 24
      color: true
      start_color: "#999"
      end_color: "#555"

    # ---------------------------------------
    # qrcode widget
    donate:
      class: qrcode
      display: [desktop, mobile] # [desktop, mobile]
      height: 64px # Automatic height if not set
      images:
        - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
        - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    # ---------------------------------------
    # webinfo widget
    webinfo:
      class: webinfo
      display: [desktop]
      header:
        icon: fas fa-award
        title: 站点信息
      type:
        article:
          enable: true
          text: "文章数目："
          unit: "篇"
        runtime:
          enable: true
          data: "2020/01/01" # 填写建站日期
          text: "已运行时间："
          unit: "天"
        wordcount:
          enable: true
          text: "本站总字数：" # 需要启用 wordcount
          unit: "字"
        siteuv:
          enable: true
          text: "本站访客数：" # 需要启用 busuanzi
          unit: "人"
        sitepv:
          enable: true
          text: "本站总访问量：" # 需要启用 busuanzi
          unit: "次"
        lastupd:
          enable: true
          friendlyShow: true # 更友好的时间显示
          text: "最后活动时间："
          unit: "日"

site_footer:
  layout: [aplayer, social, source, analytics, copyright]
  copyright: "[Copyright © 2017-2021 Volantis Team](https://github.com/volantis-x/)"
  social:
    - img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org@1.1/icon/1322024-social-media/020-rss.svg
      url: atom.xml
    - img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org@1.1/icon/1322024-social-media/029-github.svg
      url: https://github.com/volantis-x/
    - img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org@1.1/icon/1322024-social-media/010-facebook.svg
      url: /
    - img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org@1.1/icon/1322024-social-media/018-twitter.svg
      url: /
    - img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org@1.1/icon/1322024-social-media/045-telegram.svg
      url: /
    - img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org@1.1/icon/1322024-social-media/006-youtube.svg
      url: /

tag_plugins:
  # {% note text %}
  note: # style for default note:
    iconfont: "Font Awesome 5 Pro"

plugins:
  clipboard:
    enable: true
  fontawesome: https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css
  highlightjs:
    enable: true # Please set hexo.config.highlight.enable = false !!!
    js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js
    css: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/styles/solarized-light.min.css
  lazyload:
    enable: true
    js: https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js
    onlypost: false
    loadingImg: # https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@3/img/placeholder/c617bfd2497fcea598e621413e315c368f8d8e.svg
    blurIn: true # 模糊加载效果 （loadingImg为空时有效）
  backstretch:
    enable: true
    # position: cover # cover: sticky on the cover.   fixed: Fixed as background for the site.
    duration: 20000 # Duration (ms)
    fade: 1500 # fade duration (ms) (Not more than 1500)
    images: # For personal use only. At your own risk if used for commercial purposes !!!
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/056.jpg
  parallax:
    enable: true
    images:
      - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg
  aplayer:
    enable: true
    autoplay: false
    volume: 0.4
    order: random
    # id: 4917530132 # vol red
    # id: 4917524698 # vol blue
    # id: 76244489 # vol white
    # id: 5135845906 # for Volantis 3.0
    id: 5062959861 # TOP 30
  darkmodejs:
    enable: true

analytics:
  busuanzi: #https://cdn.jsdelivr.net/gh/volantis-x/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js
  leancloud:
    app_id: GCYDRKI6XRkyC7EuEhJv90ia-MdYXbMMI
    app_key: 4xKBXGBj6BgecU62vff5rJHs
    custom_api_server: # 一般不需要写，除非自定义了 API Server

custom_css:
  font_smoothing: true
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]
  body:
    effect: [shadow] # [shadow, floatable, blur]
  fontfamily:
    logofont:
      fontfamily: 'Dosis, "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: "Dosis"
      url: https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf
      weight: normal
      style: normal
    bodyfont:
      fontfamily: 'Dosis, "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: "Dosis"
      url: https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf
      weight: normal
      style: normal
# # 自定义右键菜单
# rightmenu:
#   enable: true
#   # hr: 分割线, music: 音乐控制器
#   layout: [home, hr, dark_mode, hr, music]

增加看板娘live2d插件(在主题yml修改)

使用第三方的库配置一个好看的右下角看板娘功能

需要下载一个基础live2d以及不同的看板娘

1
npm i hexo-helper-live2d

我使用的看板娘

vue-driverjs

1
npm i live2d-widget-model-koharu

网上的看板娘

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
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  enable: true
  #enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: true # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-koharu
    # use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 145
    height: 315
  mobile:
    show: false # 是否在移动设备上显示
    scale: 0.5 # 移动设备上的缩放       
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.8

记录当前主题的一些页面常用参数

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

字段 含义 值类型 默认值
layout 布局模版 String -
title 页面标题 String -
seo_title 网页标题 String page.title
short_title 页面标题（在 group 列表中显示） String page.title
date 创建时间 Date 文件创建时间
updated 更新日期 Date 文件修改时间
link 外部文章网址 String -
music 内部音乐控件 [Object] -
robots robots String -
keywords 页面关键词 String -
description 页面描述、摘要 String -
cover 是否显示封面 Bool true
top_meta 是否显示文章或页面顶部的 meta 信息 Bool true
bottom_meta 是否显示文章或页面底部的 meta 信息 Bool true
sidebar 页面侧边栏 Bool, Array theme.layout.*.sidebar
body 页面主体元素 Array theme.layout.on_page.body
mathjax 是否渲染公式 Bool, String false
thumbnail 缩略图 String false
icons 图标 Array []
pin 是否置顶 Bool false
headimg 文章头图 url -

layout:post 时特有的字段：

字段 含义 值类型 默认值
author 文章作者 [Object] config.author
categories 分类 String, Array -
tags 标签 String, Array -
toc 是否生成目录 Bool true

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://wang-z.gitee.io/2021/04/12/hexo-%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2/

本页文档最后更新于：2021年4月23日

hexo

评论