前言

基于hexo的静态博客一般分为两部分——静态博客的前端资源，和生成这些资源的设置信息。这里为了管理方便，将这两部分放置在仓库管理的一个仓库的两个分支中。从而可以在任意主机上，通过拉取设置信息所在分支数据，构建编写博客的环境；而将编写好的博客推送到静态博客的前端资源所在的分支中，完成博客的更新。这样子，我们可以在任何主机上，快速同步之前的博客编写环境，并快速更新博客。

安装Git

我们需要通过git与仓库管理网站进行交互，点此镜像链接，进行下载并安装。

我们需要简单配置git，使用如下命令

1
2
git config --global user.name `user name`
git config --global user.email `user email`

这里可以通过教程链接，完成相关git的配置

安装Node.js

Hexo是基于Node.js，因此我们需要安装和配置。首先点此下载链接，下载并安装Node.js。
为了提高安装的效率，我们更换其按镜像源，使用如下命令

1
npm config set registry "https://registry.npm.taobao.org" && npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ && npm config set phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/ && npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/

安装Hexo

根据Hexo官网进行相关的安装。
执行如下命令，完成Hexo的安装

1
npm install hexo-cli -g

搭建博客生成环境

这里完成最终生成静态博客相关的前端资源的环境。相关的设置信息会被推送到仓库的develop分支，以方便在任何主机上同步该环境。

下面给出同步我的博客环境的命令, 从而快速恢复博客的生成环境，在working_dir目录下执行下列命令

1
git clone -b develop git@github.com:JiaweiHawk/jiaweihawk.github.io.git blog && (cd blog; npm install)

初始化工作目录

首先选定一个路径，在该路径下初始化工作目录，不妨记为working_dir，作为该环境的工作目录，命令如下所示

1
hexo.cmd init `working_dir`

前面已经介绍，这些设置会被同步到仓库中，因此这里完成仓库初始化，执行如下命令

1
git init

这里需要通过编辑working_dir/.gitignore文件，添加该工作目录中那些文件作为无关文件，不会被同步到仓库相关分支中，这里首先填写一部分，内容如下所示

1
2
3
4
5
6
7
8
DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
*-lock.json

设置博客配置

这里通过修改working_dir/_config.yml，完成博客的主要配置信息的设置，通过该链接查找大部分配置的可选参数和含义。

修改网站信息

1
2
3
4
5
6
7
8
# Site
title: "Jiawei Hawk's blog"
subtitle: "blog"
description: "This is Jiawei Hawk's blog"
keywords: "Jiawei Hawk"
author: "Jiawei Hawk"
language: "zh-CN"
timezone: "Asia/Shanghai"

这里分别设置了网站名称、网站子名称、网站描述、网站关键词、作者、网站语言和时间区域

修改网页URL信息

1
2
3
4
5
6
7
8
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://jiaweihawk.gitee.io
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

这里分别为网站url，网页的永久链接形式等

修改博客前端资源目录位置

1
2
3
4
5
6
7
8
9
# 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:

这里指定博客的资源最终的位置。前面已经说过，该仓库将博客前端资源和配置博客环境的设置分别进行存储，而这里博客前端资源最终会生成在public_dir对应的路径。因此我们通过在working_dir/.gitignore中添加该路径，避免最终同步设置时将生成的博客前端资源一并进行同步，working_dir/.gitignore中默认已经添加该路径。如果设置变化了，需要进行相关的更新。

设置博客主题

如果对于博客默认的主题不是很喜欢，可以按照官网教程，方便的更换博客主题

下载博客主题

这里选择Butterfly主题，其也有官方教程可以进行查看，这里给出本博客的设置。
在working_dir工作目录下，执行如下命令

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

这里由于我们会对主题进行相关的设置更改，因此需要避免嵌套git项目，即删除working_dir/themes/butterfly/.git文件即可

指定博客主题

由于Butterfly主题依赖一些第三方插件，因此需要在working_dir工作目录下执行命令安装依赖

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

修改working_dir/_config.yml中的theme设置的值

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

此时，已经完成了Butterfly主题的使用

修改博客主题细节

类似于前面博客的设置更改，可以通过修改working_dir/themes/butterfly/_config.yml文件，完成博客主题的主要配置信息的设置

设置菜单栏

1
2
3
4
5
6
7
8
9
10
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart

这里通过取消注释，选择菜单栏显示相关的菜单。这里可以参考这位大佬的博客，进行更多的外链的设置显示

该菜单栏引入了主页、归档、标签和分类。其中标签页和分类页需要手动创建，否则会显示无法打开。
首先在working_dir工作目录下，执行如下命令创建标签页

1
hexo new page tags

然后修改working_dir/source/tags/index.md文件的type字段

1
2
3
4
5
---
title: "标签"
date: 2021-05-26 22:04:20
type: "tags"
---

类似的，在working_dir工作目录下，执行如下命令创建分类页

1
hexo.cmd new page categories

然后同样修改working_dir/source/categories/index.md文件的type字段

1
2
3
4
5
---
title: "分类"
date: 2021-05-26 22:06:23
type: "categories"
---

设置博客背景图片

1
2
3
4
5
# The banner image of home page
index_img: https://picture.zwc365.com/getbing.jpg

# If the banner of page not setting, it will show the top_img
default_top_img: /img/background.jpg

这里修改了主页的默认背景图片，其中index_img为主页背景图片的外链；对于default_top_img，其使用本地的图片作为默认的顶部背景图片，该图片的地址为working_dir/themes/butterfly\source/img/background.jpg

设置主页描述

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

即这里根据注释说明，选择模式2，从而在浏览每一篇博客缩略界面时，展示相关信息。

设置代码显示

首先，修改working_dir/_config.yml中的hljs设置的值，将其关闭

1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

接着，修改working_dir/themes/butterfly/_config.yml中如下值，将代码主题设置为mac主题，其余皆为默认设置，使代码更加美观

1
2
3
4
5
6
7
8
9
# Code Blocks (代碼相關)
# --------------------------------------

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

设置文章meta显示

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: true # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

这里设置主页中文件显示标签信息，更方便获取文章信息

设置文章版权

1
2
3
4
5
post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

这里对于文章版权和许可协议，将其网址解码功能打开，从而正常显示中文网站

设置文章锚点

1
2
3
# anchor
# when you scroll in post, the URL will update according to header id.
anchor: true

即开启文章锚点功能，从而每次翻动文章时，其URL都会进行相应的更改，其会在网页中留下历史记录。

设置文章分页按钮

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

通过开启文章分页按钮，并设置为模式2，文章结束处会显示上一篇和下一篇文章的跳转信息

设置账户头像

1
2
3
4
# Avatar (頭像)
avatar:
  img: /img/profile.jpg
  effect: false

这里通过设置img的路径信息即可。这里的根目录为working_dir/themes/butterfly/source，将头像放置在该位置即可。

设置博客Footer

1
2
3
4
5
6
7
8
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2021
  custom_text: "Come to pwn me!!"
  copyright: false # Copyright of theme and framework

这里设置了博客角标的显示信息，关闭了copyright内容，并加入了自己的自定义信息

右下角按钮

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
# Change font size
change_font_size: true

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

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

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

# 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

这里关闭了简繁转换、阅读模式和夜间模式等按钮

设置侧边栏

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
# aside (側邊欄)
# --------------------------------------

aside:
  enable: true
  hide: false
  button: false
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description: "coder && ctfer"
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://gitee.com/jiaweihawk
  card_announcement:
    enable: false
    content: "This is hawk's blog"
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: false # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: true
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: false
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works

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

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

# Aside widget - Newest Comments
newest_comments:
  enable: false
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  valine: false
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false

这里关闭了隐藏主页的按钮，修改了主页的个人信息部分的设置，并且关闭了公告和网站信卡片，并关闭了诸如访问人数、运行时间和最新评论的无关信息。

设置数学支持

数学公式支持依赖第三方库，因此在 working_dir工作目录下执行如下命令，安装该依赖

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

然后修改working_dir/themes/butterfly/_config.yml中的设置信息

1
2
3
4
5
mathjax:
  enable: true
  # true 表示每一页都加载mathjax.js
  # false 需要时加载，须在使用的Markdown Front-matter 加上 mathjax: true
  per_page: true

最后，还需要修改 working_dir/_config.yml中的设置信息

1
2
3
4
5
6
7
8
9
# MathJax
kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

这里尝试使用如下语句测试其数学公式引用效果

1
2
这里引用变量`$a_i$`
$$\sigma = x_1 + y_1$$

结果如下所示

这里引用变量

设置置顶系统

置顶系统依赖第三方库，因此在working_dir工作目录下执行如下命令，安装该依赖

1
npm install hexo-generator-index --save

这里通过修改working_dir/_config.yml，完成置顶系统的设置，如下所示

1
2
3
4
5
6
7
8
9
# 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: 6
  order_by: -date
  pagination_dir: page

之后，如果需要置顶一篇博客，则在博客的Front-matter区域添加sticky字段即可——其值越大，对应的博客会被放在越前面，如下所示

1
2
3
4
5
6
7
---
title:
date:
tags:
categories:
sticky: 100
---

设置搜索系统

本地搜索依赖第三方库，因此在working_dir工作目录下执行如下命令，安装该依赖

1
npm install hexo-generator-search --save

直接修改博客中的主题设置，打开本地搜索

1
2
3
# Local search
local_search:
  enable: true

设置页面资源引用

修改博客中的相关设置，打开相对引用功能

1
post_asset_folder: true

之后，我们在README中使用如下语句测试其图片引用和文件引用的效果

1
2
![background](background.jpg)
[background](background.jpg)

则其会引用working_dir/source/_posts/filename/background.jpg的资源，效果如下图所示
效果图
文件链接

设置页面美化

1
2
3
4
5
6
# Beautify (美化頁面顯示)
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f024'
  title-prefix-icon-color: '#F47466'

这里开启页面美化，自动更改ol、ul和h1-h5的样式

设置页面字体

1
2
3
4
5
6
7
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: 13pt
  code-font-size: 11pt
  font-family:
  code-font-family:

这里修改了全局页面字体的大小设置

设置字数统计

文章字数统计依赖第三方库，因此在working_dir工作目录下执行如下命令，安装该依赖

1
npm install hexo-wordcount --save

直接修改博客中的主题设置，打开文章统计，并且关闭网站总字数统计即可

1
2
3
4
5
6
# wordcount (字數統計)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: false

设置博客部署配置

博客部署同样依赖第三方库，因此在working_dir工作目录下执行如下命令，安装该依赖

1
npm install hexo-deployer-git --save

然后，修改working_dir/_config.yml中的deploy配置

1
2
3
4
5
6
7
8
9
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
- type: 'git'
  repo: git@gitee.com:jiaweihawk/jiaweihawk.git 
  branch: "deploy"
- type: 'git'
  repo: git@github.com:JiaweiHawk/jiaweihawk.github.io.git
  branch: "deploy"

这里就完成了博客部署的设置，具体的部署操作在下面一起讲解

命令

根据最开始所说，仓库中会有两个分支：一个develop分支，用于存储博客环境的设置信息；另一个是deploy分支，其存储用于部署的博客前端资源。其中在设置github pages或其他服务器时，需要注意一下绑定的仓库分支即可

对于更新或拉取博客设置信息，从而快速恢复博客的生成环境，在working_dir目录下执行下列命令

1
git clone -b develop git@gitee.com:jiaweihawk/jiaweihawk.git blog && (cd blog; npm install)

对于有新的博客要推送，或更新已有的博客到远程服务器上，则在working_dir目录下执行下列命令

1
2
3
hexo.cmd clean
hexo.cmd generate
hexo.cmd deploy

这里最后在特别说明一下：在更新博客到远程服务器之前，可以在本地进行查看，执行如下命令，即可在http:\/\/localhost:4000网址进行查看。

1
2
3
hexo.cmd clean
hexo.cmd generate
hexo.cmd server