本文旨在帮助对搭建个人博客有兴趣的同学快速上手，省去了部分自己查询官方教程花费的时间（也算是懒人教程了），但还是希望你自己去查找更详细的教程阅读一下
一.安装 1.必需品 下载这两个↓https://git-scm.com/downloads/win 没的解释（no de j s🤣）：https://nodejs.org/zh-cn/download/
同时，为了方便后续编辑和修改代码，推荐下载vscode:https://code.visualstudio.com/Download
2.安装hexo ☀安装hexo CLI 在cmd中输入
等待安装完成
之后可以输入 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/
二.外观配置 如果你已经成功完成了上面的安装步骤，接下来就开始调教🥵自定义你自己的网站
如图，拿默然的补给站做一个例子
1.网站页面标题和logo _config.yml 中填写内容，根据位置对号入座，比如：
1 2 3 4 5 6 7 Site 网站整体设置 title: 默然的补给站 subtitle : '一个野生的互联网存档点'description : 'Ciallo ～ (∠・ω< )⌒★'keywords :language : zh -CN timezone : ''
2.网站左上角logo和名字
打开主题配置文件，修改下列内容
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.网站右上角几个小菜单
在cmd输入：
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.右上搜索框 本文只提供本地搜索功能的使用，其他搜索方式自己想办法（绝对不是我懒😤）
它长这样（本地搜索）
安装本地搜索插件（记得先执行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.副标题（可选）
在主题配置文件找到以下代码修改（翻来翻去找不到可以搜），比如：
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.网站右侧卡片
在主题配置文件找到以下代码修改，对号入座：
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.网站的底部
在主题配置文件找到下列代码修改，比如：
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.右下角功能按钮
在主题配置文件里找到下列代码修改，比如：
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即可应用
好，现在你已经基本完成网站的配置了。后续的懒人教程下期再说。
