本文旨在帮助对搭建个人博客有兴趣的同学快速上手，省去了部分自己查询官方教程花费的时间（也算是懒人教程了），但还是希望你自己去查找更详细的教程阅读一下

前提是需要会windows系统以及电脑的基础知识和基本操作，如果遇到一些比如“命令提示符（cmd）是什么，怎么打开”的问题，请自行搜索或者询问AI

还有，里面的示例代码仅供参考！一些由于篇幅过长没有展示全部，请勿盲目复制！

一.安装

1.必需品

下载这两个↓
git：https://git-scm.com/downloads/win
nodejs 没的解释（no de j s🤣）：https://nodejs.org/zh-cn/download/

同时，为了方便后续编辑和修改代码，推荐下载vscode：https://code.visualstudio.com/Download

2.安装hexo

☀安装hexo CLI

在cmd中输入

1
npm install -g hexo-cli

等待安装完成

之后可以输入 hexo -v 查看版本号，确认是否安装成功

☀初始化

选择你想放博客文件的位置，比如D盘，然后在cmd中输入：

1
2
3
4
D:             #或者你想放的其他位置
hexo init my-blog
cd my-blog
npm install

这样你的博客就会安装在D:/my-blog/

☀预览

在cmd中输入以下命令运行本地服务器：

1
hexo clean && hexo g && hexo s          #清理+创建页面+运行本地服务器

然后在浏览器访问localhost:4000，就可以看到一个默认的hexo博客页面啦

3.安装butterfly

继续在cmd里（你不会给关上了吧？注意cmd路径要在你的博客位置，比如D:/my-blog）输入：

1
2
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly      #下载butterfly主题
npm install hexo-renderer-pug hexo-renderer-stylus --save         #安装渲染器（方便后续加一些有意思的东西）

☀推荐的基本设置

为了后续方便修改主题设置，需要把/my-blog/themes/butterfly/中的_config.yml复制一份，重命名为_config.butterfly.yml，放在博客的根目录，这样以后直接修改此文件里的内容就可以了，它的优先级高于/themes/中的config文件。

注意：根目录的_config.yml是hexo的配置文件，而这里转移过来的是butterfly主题的配置文件。

☀自定义主题内容，让它变成你的形状

在这里放一个butterfly的官方教程，很详细，基本的问题在这里都能解决

https://butterfly.js.org/posts/4aa8abbe/

还有更多比如播放器、live2d、特效等也可以在这里找到答案

如果你真的懒得看那就向下阅读，尽可能的快速帮助你实现配置

二.外观配置

如果你已经成功完成了上面的安装步骤，接下来就开始调教🥵自定义你自己的网站

让我们根据“位置”来一点点完成修改

如图，拿默然的补给站做一个例子
mainpage

webname
在_config.yml中填写内容，根据位置对号入座，比如：

1
2
3
4
5
6
7
Site 网站整体设置
title: 默然的补给站
subtitle: '一个野生的互联网存档点'
description: 'Ciallo～ (∠・ω< )⌒★'
keywords:
language: zh-CN
timezone: ''

2.网站左上角logo和名字

leadname

打开主题配置文件，修改下列内容

1
2
3
4
5
6
7
8
9
10
#--------------------------------------
 #Navigation Settings 右上角导航栏
 #--------------------------------------
nav:
 #Navigation bar logo image
 logo: /img/mortis.ico        #把你想要的图标(推荐.ico)放在这个路径/themes/butterfly/source/img/
 display_title: true          #是否显示网站名称，填true或者false
 display_post_title: true     #是否显示文章名称（这个是选择在打开的文章界面左上角显示）
 #Whether to fix navigation bar
 fixed: false                 #固定导航栏

3.网站右上角几个小菜单

rightpage

在cmd输入：

1
hexo new page about

page是“页面”，about是文件名，比如我想做一个“关于我”的个人介绍界面

这样就会在/source/创建对应的页面文件，默认是单独的.md文件，你可以在此目录下创建单独的文件夹把它放进去（或者修改设置里有关创建文件夹的配置，这个后续再讲），并改名为index.md

打开文件，在title一行写下标题，它将作为展示在网站右上角的栏目名称

然后在主题配置文件，找到以下代码修改，比如：

1
2
3
4
5
menu:
 首页: / || fas fa-home
 默然的日记: /diarymain/ ||fas fa-book
 关于我: /about/ ||fas fa-user
 友情链接: /friends/ ||fas fa-link

“//”中填你刚刚创建的页面所在的单独的文件夹的名称

“||”后面是图标，可以从https://fontawesome.com/icons 或者https://fontawesome.p2hp.com/faicons.html（中文站） 找到你想要的

4.右上搜索框

本文只提供本地搜索功能的使用，其他搜索方式自己想办法（绝对不是我懒😤）

它长这样（本地搜索）
search

安装本地搜索插件（记得先执行hexo clean）

1
npm install hexo-generator-searchdb --save

创建搜索栏的page界面，方法参考上面，创建文件夹，title记得写好。

在hexo配置文件里添加这几行代码：

1
2
3
4
search:
 path: search.xml
 field: post
 format: html

在主题配置文件里找到并修改：

1
2
3
4
5
6
7
#--------------------------------------
#Search
#--------------------------------------
search:
 #Choose: algolia_search / local_search / docsearch
 use: local_search         #如果你不想要搜索框就不填
 placeholder: 搜点什么呢   #显示在搜索栏的默认文字

5.副标题（可选）

subtitle

在主题配置文件找到以下代码修改（翻来翻去找不到可以搜），比如：

1
2
3
4
5
6
7
8
9
10
11
#The subtitle on homepage 副标题
subtitle:
 enable: true    #开启或关闭
 effect: true    #打字效果
 typed_option:
 source: false   #可以选择来源（这里我给省略了，你自己的配置文件里有注释写着的），如果是false则启用下面自己写的
 sub:            #自己想写什么写什么，多行文字就照着这个格式

- "你曾经来过的地方"
- "哇，真的是你诶🥰"
- "欢迎来到默然的空间"

6.网站右侧卡片

rightcard

在主题配置文件找到以下代码修改，对号入座：

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
#--------------------------------------
#Aside Settings 侧边栏
#--------------------------------------
aside:
 enable: true #是否开启卡片
 hide: false #是否显示卡片
 button: true #是否显示网站右下角“隐藏卡片”按钮
 mobile: true #手机端网页是否显示
 position: right #位置 left/right
 display: #是否显示
 archive: true #归档
 tag: true #标签
 category: true #类别
 card_author: #作者（就是你）
 enable: true #开关
 description: #随便写点描述，不写就套用上面_config.yml的description，，，，，，，Ciallo～ (∠・ω< )⌒★
 button: #关注按钮的配置
 enable: true
 icon: fab fa-twitter
 text: Follow Me On Twitter!🥰
 link: https://x.com/moran_neko
 card_announcement: #公告，写在content里
 enable: true #开关
 content: 欢迎来到默然补给站2.0~ <br>旧网站请前往moranneko.vercel.app <br>数据转移中  
 card_recent_post: #懒得写了后面的一大串自己在配置文件里看吧
 enable: true #反正只要会英文就能看得懂
 # If set 0 will show all
 limit: 5
 # Sort: date / updated
 sort: date
......
......

7.网站的底部

bottom

在主题配置文件找到下列代码修改，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
#--------------------------------------
#Footer Settings
#--------------------------------------
footer:
 nav:
 owner:
 enable: true
 since: 2025                        #网站创建的年代
 #Copyright of theme and framework
 copyright:
 enable: true
 version: true
 custom_text: 恭喜你发现了一个存档点    #这还可以写行字

8.右下角功能按钮

button

在主题配置文件里找到下列代码修改，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#--------------------------------------
#Bottom right button
#--------------------------------------
translate:
 enable: true #简繁转换按钮
 default: 繁
 defaultEncoding: 2 #1是繁体2是简体
readmode: true #阅读模式
darkmode:
 enable: true #深色模式
 button: true #深色模式按钮开关
 autoChangeMode: false #自动深色模式
 #Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18
 start: 7 #自定义夜间模式开关时间
 end: 19
rightside_scroll_percent: true #滑动进度百分比
rightside_config_animation: true #按钮动画

3.好好好

完成各项修改之后，执行hexo clean && hexo g && hexo s即可应用

好，现在你已经基本完成网站的配置了。后续的懒人教程下期再说。