这里我会教你从零开始一步步搭建，基本所有的命令都已经写好了，你只需要按照这篇说明书操作（基本都是复制、粘贴、按 Enter）就行了，整个过程大概半个小时，还是很方便的，是当之无愧的保姆级教程，草履虫看了都会。那么，开始吧

极简版

只包含所有安装命令，更详细的指引请看后文

  1. 新建文件夹（根目录）用于存放博客文件（建议不要放在C盘）
  2. 把搭建压缩包里的 install.ps1 复制到根目录下
  3. 安装依赖
1
./install.ps1
  1. 换源
1
npm config set registry https://registry.npmmirror.com
  1. 安装hexo
1
npm install hexo-cli -g
1
hexo init
  1. 安装插件
1
npm install hexo-deployer-git --save
1
npm install hexo-deployer-git --save
1
npm install hexo-theme-butterfly --save
1
npm install hexo-renderer-pug hexo-renderer-stylus --save
1
npm install https://github.com/CodeFalling/hexo-asset-image --save
  1. 在GitHub上创建一个名为 用户名.github.io 的仓库，修改 根目录\_config.yml 最底下的deploy部分
1
2
3
4
5
6
7
8
# 站点部署到github要配置Deployment
## Docs: https://zespia.tw/hexo/docs/deploy.html
deploy:
  type: git
  repo:
    github:
      url: git@github.com:username/username.github.io.git  # 记得把username替换为自己的用户名
      branch: main
  1. 执行hexo三连
1
hexo clean
1
hexo g
1
hexo d
  1. 修改 根目录\_config.yml ，直接复制粘贴下面的内容覆盖原有内容即可。注意修改16行的用户名为你自己的用户名，同时最后的deploy部分按第7步写，不要看我这里的
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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: fxr的专属博客
# subtitle: "听风正轻轻拂过"
description: "将时光定格在此处"
keywords:
author: Dr. Fengxr
language: zh-CN
timezone: ""

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://WantrapreneurYxy.github.io
# permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink.html
## abbrlink config
abbrlink:
  alg: crc32 #support crc16(default) and crc32 进制
  rep: hex #support dec(default) and hex  算法
  drafts: false #(true)Process draft,(false)Do not process draft. false(default)
  ## Generate categories from directory-tree
  ## depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
    enable: true #true(default)
    depth: #3(default)
    over_write: false
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink.
# 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: true
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ""
  wrap: true
  hljs: false
  exclude_languages: ["mermaid"]
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ""
  exclude_languages: ["mermaid"]

# 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
## updated_option supports 'mtime', 'date', 'empty'
updated_option: "mtime"

# 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: butterfly
markdown:
  plugins:
    - "@renbaoshuo/markdown-it-katex"

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo:
    github:
      url: git@github-wantyxy:WantrapreneurYxy/WantrapreneurYxy.github.io.git
      branch: main



  1. 修改主题配置文件 根目录\themes\butterfly\_config.yml，这个极简不了了，可以直接跳到

安装依赖

配环境是世界上最困难的事情之一 —— yxy

但是好在我已经把所有配环境的操作都写成了一个脚本，可以一键执行安装，下面请按步骤操作：

  1. 首先创建一个空文件夹，用于放置整个博客项目，哪里都可以，博客网站不会很大的。例如 .../hexo，后面我会把这个文件夹简称为 根目录
  2. 把压缩包里的 install.ps1 脚本复制到根目录下
  3. 在根目录单击鼠标右键 - 在终端中打开，打开 powershell 窗口
  4. 执行下面的命令一键安装所有依赖，包括git、nodejs和npm
1
./install.ps1

执行下面命令测试git是否安装成功：

1
git --version

如果安装成功则会输出类似下面的版本号

1
2
C:\Users\Dr.Yang>git --version
git version 2.48.1.windows.1

如果你从来没有使用过Github和Git，可以参考 这篇文章 创建Github账号并配置ssh连接，使用下面的命令测试ssh连接是否正常：

1
ssh -T git@github.com

如果ssh连接正常，则示例输出如下：

1
2
C:\Users\Dr.Yang>ssh -T git@github.com
Hi Prof-yxy! You've successfully authenticated, but GitHub does not provide shell access.

然后，执行下面的命令测试nodejs是否成功安装：

1
node -v

安装成功则输出类似下面的版本号：

1
2
C:\Users\Dr.Yang>node -v
v22.14.0

执行下面命令测试npm是否正常安装：

1
npm -v

安装成功则输出版本号：

1
2
C:\Users\Dr.Yang>npm -v
10.9.2

如果上述三个依赖都成功安装，那么恭喜你成功完成了最难.的部分——配环境

也恭喜我第一次成功写了一个一键配环境的脚本(bushi

安装hexo

安装完依赖(主要是git、scoop和nodejs)后，就可以正式开始安装hexo了。

hexo是一个博客框架，相当于一个博客网站的模板，安装之后就已经得到了一个可运行的博客网站，然后自己再次基础上进行自定义就行

首先在你的电脑上找一个地方新建文件夹，用于存放博客网站的所有文件，例如 D:\hexo。哪里都可以，因为博客网站很小，不会超过2个G。

后面我会简称这个文件夹为 根目录

安装hexo的操作极其简单，也是一行命令就行。

在根目录中 右键 - Git Bash Here，先换源加快下载和安装速度：

1
npm config set registry https://registry.npmmirror.com

然后一键安装hexo：

1
npm install hexo-cli -g

然后就可以初始化hexo博客了：

1
hexo init

执行完上面的init命令后，你就会发现根目录下已经有了不少文件，这说明到这一步为止都非常顺利

安装插件

上面安装的只是最基础的hexo框架，有很多功能需要靠安装插件来实现，下面是几个必要的插件，安装命令同样在根目录下打开终端执行

  1. github部署插件：用于将博客网站部署到github上
1
npm install hexo-deployer-git --save

如果不部署在github只部署在本地，你的电脑就是服务器，只要你的电脑关机，别人就无法访问你的博客了

  1. 主题插件butterfly
1
npm install hexo-theme-butterfly --save

主题可以理解为博客网站的皮肤，这款 butterfly 主题还是很漂亮很高大上的，当然需要后面进行一点配置

  1. 安装渲染插件
1
npm install hexo-renderer-pug hexo-renderer-stylus --save

这些是 butterfly 主题需要的插件，用于网站特效的渲染和显示

  1. 安装图片处理插件
1
npm install https://github.com/CodeFalling/hexo-asset-image --save

在hexo博客上显示图片是一个非常非常麻烦的问题，后面我会再介绍，现在先把插件装上先

上面所有插件安装时，如果遇到网络错误安装失败，可以试试用一点点魔法

安装完之后可以执行下面三个命令生成网站并预览：

1
2
3
hexo clean
hexo g
hexo s

注意执行完hexo s后不要关掉命令行窗口也不要停止命令，不然就访问不了了

然后在浏览器上输入 localhost:4000，回车，就能看到一个模板博客网站

1757466190319

如果能够成功显示网站，那么说明到此为止的所有操作都成功执行，可以继续往下

部署到github上

可以注意到上面我们访问博客网站的网址是 localhost:4000 说明目前的博客其实是部署在本地的

说人话就是，这个博客网站就像一个软件，通过 hexo s 这个命令运行。所以一旦运行 hexo s 的命令行关闭了或停止执行了，就相当于这个软件关闭了，就无法访问网站了

这就是说，如果想要你的网站保持开放，就需要24小时不关电脑并且挂一个软件在后台，非常麻烦。所以需要部署到Github上，博客服务就由Github Page提供而不依赖于本地了

注册Github账号并创建仓库

如果你从来没用过Github，先注册一个账号

然后创建一个仓库，仓库名必须为 用户名.github.io

例如假如我的GitHub用户名是Fengxr，那么创建的仓库名就必须为 Fengxr.github.io

修改配置文件

打开配置文件 根目录/_config.yml ，修改最底下的deploy配置为下面内容：

1
2
3
4
5
6
7
8
# 站点部署到github要配置Deployment
## Docs: https://zespia.tw/hexo/docs/deploy.html
deploy:
  type: git
  repo:
    github:
      url: git@github.com:username/username.github.io.git  # 记得把username替换为自己的用户名
      branch: main

把本地hexo提交到GitHub仓库

完成上述配置后，在根目录下 右键 - 在终端中打开，然后输入下面三个命令：

1
hexo clean
1
hexo g
1
hexo d

后面我会把这三个命令简称为 “hexo三连” ，因为所有的设置或配置都需要执行 hexo三连 才能保存生效

执行后，本地的博客文件就上传到GitHub上了。

现在就可以通过 https://username.github.io 访问你的博客了，注意把 username 换成自己的用户名

配置外观和功能

首先说明一下，自定义配置过程会用到两个文件：

  1. 根目录下的 _config.yml：用于配置网站的全局设置，打个比方，对人物本身（脸型、身材……）做调整
  2. 根目录\themes\butterfly\_config.yml：对主题进行设置，打比方就是，对人物的皮肤/衣服穿搭做调整

然后，我们需要做一点点前置准备

前置准备

其实这部分就一步——新建一个文件夹。

具体来说，新建用于存放图片的文件夹 根目录\source\img ，之后所有的图片都放在这里

全局配置

打开 根目录下的 _config.yml 需要进行全局配置的部分很少，看我下面讲就好

作者

下面的部分用于设置网站名title、作者信息author和语言language

1
2
3
4
5
6
7
8
# Site
title: fxr的专属博客
# subtitle: "听风正轻轻拂过"
description: "将时光定格在此处"
keywords:
author: Dr. Fengxr
language: zh-CN
timezone: ""

生成永久链接

Hexo 文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。

这样的话，生成的链接非常长长长长长，而且如果我们的 Markdown 使用中文标题，那就更惨了，URL 一转码，将是一场灾难。所以下面的设置是让你的博客的链接变得简洁好看

把原本的内容：

1
2
3
4
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

替换成我下面的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://WantrapreneurYxy.github.io
# permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink.html
## abbrlink config
abbrlink:
  alg: crc32 #support crc16(default) and crc32 进制
  rep: hex #support dec(default) and hex  算法
  drafts: false #(true)Process draft,(false)Do not process draft. false(default)
  ## Generate categories from directory-tree
  ## depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
    enable: true #true(default)
    depth: #3(default)
    over_write: false
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink.

启用主题

然后下面很长一段都不用改，直接下拉到倒数第二部分、deploy前面一个部分

这里把theme选项设置为butterfly，然后后面加一个插件，用于显示latex数学公式。如果不加这个插件，你在网站上看到的就不是渲染后的公式 12gt2\frac{1}{2}gt^2 而是 $\frac{1}{2}gt^2$

1
2
3
4
5
6
7
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly
markdown:
  plugins:
    - "@renbaoshuo/markdown-it-katex"

github部署

最后就是修改deploy部分（之前已经讲过了），如果你忘记改了这里记得改成你的Github账号

1
2
3
4
5
6
7
8
9
# 站点部署到github要配置Deployment
## Docs: https://zespia.tw/hexo/docs/deploy.html
deploy:
  type: git
  repo:
    github:
      url: git@github.com:username/username.github.io.git  # 记得把username替换为自己的用户名
      branch: main

全局设置就这么多，接下来我们来到最立竿见影的主题设置

主题配置