使用cloudflare的pages部署hexo+butterfly

在package.json中加入

要安装 Wrangler ↗ ，请确保您已安装 Node.js ↗ 和 npm ↗，

先在目录下安装wranger，Wrangler 是一个命令行工具，用于使用 Cloudflare 开发人员产品进行构建。Wrangler 安装在本地每个项目中。这允许您和您的团队使用相同的 Wrangler 版本，控制每个项目的 Wrangler 版本，并在需要时回滚到早期版本的 Wrangler。

1
2
npm install wrangler --save-dev
npm install wrangler@latest

通过 wrangler login 命令登录

当您运行 wrangler login 时，Wrangler 会打开一个浏览器窗口，要求您登录到 Cloudflare。在终端中输入：

1
wrangler login

登录之后wranger就能在部署的时候知道要部署在哪个账号了。

在你创建的hexo博客目录下有个package.json，修改其中的：

1
2
3
4
5
6
7
8
{
  ...,
  "scripts": {
    "deploy": "wrangler deploy",
    "dev": "wrangler dev"
  }
  ...
}

最终如下：其中build是构建项目。clean清除构建数据。deploy是部署上传，dev是调试，运行wranger dev可以在本地调试修改，这样不必每次修改都上传。server是hexo自带的调试，也是在本地调试，可以注释掉也可以保留。

这里会踩坑!

因为wranger自动构建时候，会把根目录下端dist文件夹视为静态文件上传，而hexo构建的静态文件在public，因此需要把directory修改成./public。在根目录下新建一个wrangler.json,内容如下，

1
2
3
4
5
6
7
{
  "name": "yourblogname",
  "compatibility_date": "2025-03-29",
  "assets": {
    "directory": "./public"
  }
}
1
2
3
4
# 构建
npm run build
# 部署
npm run deploy

然后再命令行中会出现一个链接，点击这个链接就可以跳转到你的博客了。

登录你的cloudflare后台，在work and pages 中可以看到刚刚构建的博客，名字应该就是你的项目名字：

进去之后点击左上角的设置，然后在域名这里可以自定义修改你的域名。

然后输入你购买的域名或者二级域名就可以了

hexo-butterfly

pages和hexo