本文参照了Fomalhaut🥝大佬的魔改教程

如有侵权，联系删除

0x01前言

在我入坑butterfly的时候已经是更新到了4.13.0而网上很多大佬的文章是更适配4.5.0版本的。正如akilar大佬说的butterfly的作者Jerry经常直接修改源码，所以导致了很多魔改出现不适配的情况，但是我不学前端啊所以很多根本看不懂，期待有其他大佬能出最新教程吧！！！

0x02环境和工具

操作系统Windows11
一个域名
Git
Node
Hexo
VScode（编辑器）
对象存储（这里我用的是阿里云的OSS）
一颗耐心

0x03一个域名

由于OSS存储桶限制所以一定要先去申请一个域名，也不要多少钱，阿里云学生可以白嫖300抵扣卷，花多少抵扣多少，所以可以花很少的钱就搞下来一个域名（一块）

为什么不用github呢？因为访问起来有点慢😂

0x04.Git安装

1.由于官网下载太慢可以通过淘宝的开源镜像下载网址：https://registry.npmmirror.com/binary.html?path=git-for-windows/v2.36.1.windows.1/ ，下载版本根据自己的需求选择即可。

2.下载后傻瓜式安装Git即可，安装的目录可以使用默认目录【C:/Program Files/Git】，也可以自定义路径。

3.右键电脑空白，选择更多选项看到

就是安装成功了

0x05Node安装

1.打开nodejs的官网https://nodejs.org/en/download/prebuilt-installer这里需要挂科学上网访问的快，至于怎么挂懂的都懂。我个人的版本是 v12.22.12反正就是别选版本太高的，大佬都测试过了会出现很多不兼容问题。

node历史版本页面https://nodejs.org/en/download/releases/

2.目录建议直接安装c盘没多大，主要是安装c盘可以解决很多环境变量问题

3.安装完成后，检查是否安装成功。在键盘按下win + R键，输入cmd，然后回车，打开cmd窗口，执行node -v命令，看到版本信息，则说明安装成功。

4.修改npm源。npm下载各种模块，默认是从国处服务器下载，速度较慢，建议配置成淘宝镜像。打开cmd窗口，运行如下命令:

1	npm config set registry https://registry.npm.taobao.org

0x06安装Hexo

1.当你配置好node的时候可以鼠标右键，选显示更多选项

然后选Git Bash Here

输入如下命令安装

1	npm install -g hexo-cli

2.安装完后输入hexo -v验证是否安装成功。

0x07初始化 Hexo 项目

1.在目标路径（我这里选的路径为C:/Hexo-Blog）打开cmd命令窗口，执行hexo init初始化项目。

1	hexo init blog-demo(项目名)

2.进入blog-demo ，输入npm i安装相关依赖。

1 2	cd blog-demo //进入blog-demo文件夹 npm i

3.输入hexo server或者hexo s 启动项目

开浏览器，输入地址：http://127.0.0.1:4000/ ，看到下面的效果，说明你的博客已经构建成功了。

0x08配置OSS存储桶

1.创建Bucket

首先要做的事情就是去阿里云(https://aliyun.com)创建一个Bucket:

Bucket名称：随便起，只要不重复就行
地域：按你的需求，阿里云的节点国内访问速度都可以，如果你不打算使用CDN服务的话，可以选择华东节点，全国访问速度都能兼顾。如果使用CDN服务的话，那就没区别了，选哪都行。
存储冗余类型：一般选择本地冗余存储就可以了，博客而已访问量又不大没必要上同城冗余
版本控制：这里版本控制是没有必要的，不然等你清理历史版本的时候就老实了
读写权限：这里要注意，我们选择公共读，切记不能选择私有，一方面如果不开启CDN的话，私有权限无法在公网访问。另一方面，如果开启CDN，阿里云的CDN私有回源功能与OSS的静态页面功能冲突
服务端加密方式：无
实时日志查询：看需求，有免费7天的实时日志查询，但有900GB/天的限制
定时备份：不开通

2.开启静态页面功能

进入OSS存储页面，选择你刚创建的Bucket

在数据管理

按照图中的内容进行配置：

默认首页：index.html
默认404页：404.html（按照你实际的404页面地址填写）
子目录首页：开通，这里由于Hexo的分类、标签等页面，都是子目录的形式（例如：/links/），如果不开通这个功能，不会自动定位到对应目录的index.html
文件404规则：Index

3.创建AccessKey并授权

其实现在就可以在阿里云的管理页面上传文件部署网站了，但实在是太麻烦，我们希望的是一个自动化的方案。这里我们需要创建一个API的授权AccessKey：

阿里云现在开启了子账户授权的功能，因此我们可以选择跳转到子账户管理的页面：

首先创建一个子账户，这里注意，由于我们这个账户是给API使用的，所以必须开启OpenAPI 调用访问：

返回以后，点击刚创建的账户右侧的“添加权限”：

这里搜索“OSS”，选择添加AliyunOSSFullAccess权限：

返回列表，点击刚创建的账户名称，创建一个AccessKey，这里要注意，创建完AccessKey后，会显示一个AccessKey和一个SecretKey，一定要保存好，只会显示一次：

4.安装一键部署脚本

大佬编写了一个插件

我们直接在初始化好的博客目录下调用bash命令

1	npm i hexo-deployer-ali-oss-extend

在hexo项目配置文件_config.yml中添加如下配置：

deploy:
- type: ali-oss
  region: "<您的oss 区域代码>"
  accessKeyId: "<您的oss  accessKeyId>"
  accessKeySecret: "<您的oss accessKeySecret>"
  bucket: "<您的bucket name>"
  cacheControl:
    images: "<图片文件HTTP响应头Cache-Control>，留空为no-cache"
    css: "<CSS文件HTTP响应头Cache-Control>，留空为no-cache"
    js: "<JS文件HTTP响应头Cache-Control>，留空为no-cache"
    html: "<HTML文件HTTP响应头Cache-Control>，留空为no-cache"
    other: "<其它文件HTTP响应头Cache-Control>，留空为no-cache"

1 2	accessKeyId: "<您的oss accessKeyId>" accessKeySecret: "<您的oss accessKeySecret>"

还记得之前创建的那个accessKey吗？就是填那个

其中区域代码，可以在OSS的Bucket概览当中找到，如下图所示

选地域节点中的前半段

1	oss-cn-beijing

另外，这里增加Cache-Control功能，是由于OSS对象存储并没有针对常见的网页文件（如css、js、图片等）进行默认HTTP响应头的设置，这些不常更新的文件不缓存，会导致流量大量浪费，后面如果使用CDN的时候，CDN获取不到缓存配置也会进行不断的回源，产生回源流量浪费。

配置就这么简单，然后执行部署命令：

hexo d

5.相信看到这，你域名备案肯定完成了

如果你的域名已经进行了备案，可以添加自定义域名。

可以在“Bucket配置-域名管理”中配置域名：

根据上面的提示先绑定再去配置CNAME

如果你的域名不在阿里云解析的话，请根据页面提示手动设置域名解析。

这个CNAME就相当于是一个中转站我们需要告诉他把我们的OSS的外网访问域名和我们自定义的域名绑定在一起，这样就可以联系我们的网站内容和域名了。

0x09安装主题

由于大佬们魔改的主题主要集中在buttterfly4.5.0版本，所以这里也只展示适配4.5.0版本的方案。

本教程用的是github方式安装的，为什么不直接采用npm呢？因为那样会直接下载最新版本4.13.0。这里我建议是直接github安装接下来提供三种下载形式。

1.npm安装

注意：此方法只支持 Hexo 5.0.0以上版本!

在你的博客根目录里（我这里路径为【C:/Hexo-Blog/blog-demo】），打开Git Bash工具，执行下列命令。

1	npm i hexo-theme-butterfly

安装成功后可在【C:/Hexo-Blog/blog-demo/node_modules】文件夹下找到hexo-theme-butterfly文件夹。

2.Github安装（推荐）

在你的博客根目录里（我这里路径为【C:/Hexo-Blog/blog-demo】），打开Git Bash工具，执行下列命令。

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

3.Gitee安装

在你的博客根目录里（我这里路径为【C:/Hexo-Blog/blog-demo】），打开Git Bash工具，执行下列命令。

1	git clone -b 4.5.0 https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly

0x10应用主题

1.修改站点配置文件（也就是C:/Hexo-Blog/blog-demo下的）_config.yml，把主题改为butterfly。

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

2.如果你没有pug以及stylus的渲染器，请下载安装，这两个渲染器是Butterfly生成基础页面所需的依赖包：

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

3.在这为了方便魔改，我直接把自带的_config.landscape.yml改名为_config.butterfly.yml，魔改的东西我都放在这了，当然也可以直接把butterfly的那个_config.yml改名为_config.butterfly.yml然后移出来放在C:/Hexo-Blog/blog-demo下，反正看个人喜好，我比较喜欢把那些经常变动的设置放到C:/Hexo-Blog/blog-demo/theme/_config.yml，然后把经常会修改的数据放到新的C:/Hexo-Blog/blog-demo/_config.butterfly.yml中

后文说修改或者说添加，就看你个人想放在哪了（说到主题配置文件要想到C:/Hexo-Blog/blog-demo/theme/_config.yml）

切记！！！不要重复设置同一个设置

也就是不要在两个文件配置同一个东西

切记！！！不要重复设置同一个设置

0x11进行文件替换

在你替换完然后尝试运行主题的时候可能发现报错了

1 2	hexo cl hexo s

1
2
3

ERROR Script load failed: themes\butterfly\scripts\events\welcome.js

ERROR Script load failed: themes\butterfly\scripts\events\init.js

在这我是怎么解决的呢，我直接新建了一个文件夹，然后重新下载一个4.13.0版本的主题，去到C:/Hexo-Blog/blog-demo/node_modules/hexo-theme-butterfly/下去找这俩文件然后替换到我们最开始安装的4.5.0版本中C:/Hexo-Blog/blog-demo/theme/butterfly/，这样问题就解决了，重新运行发现不报错了。

不出意外的话就可以看到