从零开始：如何在 Cloudflare Pages 上部署 Hexo 博客并解决常见错误

部署 Hexo 博客到 Cloudflare Pages

Hexo 是一个流行的静态博客框架，Cloudflare Pages 是一个高效的静态网站托管平台。本文将介绍三种将 Hexo 博客部署到 Cloudflare Pages 的方法。

Cloudflare Pages 免费版本部署限制

如果你需要部署，可能需要先了解一下Cloudflare的部署限制，Cloudflare Pages 有以下限制：

  • 每月构建数：500 次
  • 自定义域名：100 个
  • 每个 pages 最多包含 20,000 个文件
  • 单个文件最大限制：25MB
  • 每日限制函数请求数：100,000 次（和workers共用，超出后会访问失败）
  • 静态文件请求次数：无限

方法一：通过 GitHub 进行自动部署

这种方法适用于希望利用 GitHub 进行代码托管和版本控制的情况。Cloudflare Pages 会从你的 GitHub 仓库中提取代码并自动部署。

步骤

1. 准备工作

确保你已经在本地安装了 Node.js 和 Hexo：

1
npm install -g hexo-cli

创建 Hexo 项目并在本地进行设置和编辑：

1
hexo init my-blog
1
cd my-blog
1
npm install

2. 初始化 Git 仓库

在 Hexo 项目的根目录下，初始化 Git 仓库并提交代码：

1
git init
1
git add .
1
git commit -m "Initial commit"

3. 创建 GitHub 仓库

  • 登录 GitHub 并创建一个新的仓库。

4. 推送到 GitHub

将本地的 Hexo 项目推送到 GitHub 仓库：

1
git remote add origin https://github.com/你的用户名/你的仓库名.git
1
git push -u origin main

5. 配置 Cloudflare Pages

  • 登录到 Cloudflare 仪表盘。
  • 在账户主页选择左侧的“Workers 和 Pages”，点击“创建项目”。
  • 选择“Pages”选项，连接到你的 GitHub 账户，并选择刚刚推送代码的仓库。
  • 在构建设置中输入构建命令 npm run build 和发布目录 public。
  • 完成配置并开始构建和部署。

6.注意事项

  • Cloudflare Pages 有构建次数限制，次数到达上限可能会构建失败

方法二：通过 Fork 进行自动部署

这种方法适用于不希望使用自己的设备安装环境和项目，希望快速部署一个已经配置好的 Hexo 模板，并利用 Cloudflare Pages 进行自动部署。

步骤

1. Fork 仓库

  • 访问 我的hexo模板 并点击“Fork”按钮，将其复制到你的 GitHub 账户下。

2. 配置 Cloudflare Pages

  • 登录到 Cloudflare 仪表盘。
  • 在账户主页选择左侧的“Workers 和 Pages”，点击“创建项目”。
  • 选择“Pages”选项，连接到你的 GitHub 账户，并选择刚刚推送代码的仓库。
  • 在构建设置中输入构建命令 npm run build 和发布目录 public。
  • 完成配置并开始构建和部署。

3. 更新和维护

  • 你可以直接在 GitHub 上编辑文件、修改文章或配置，Cloudflare会监控仓库变化并自动更新和部署。

4.注意事项

  • Cloudflare Pages 有构建次数限制，次数到达上限可能会构建失败
  • 部分主题或插件可能仍需要本地编辑后才能使用该方法

方法三：直接上传静态文件到 Cloudflare Pages

这种方法适用于你已经在本地生成了静态文件，并希望直接将这些文件上传到 Cloudflare Pages，或者是你的构建次数到达上限等不希望Cloudflare构建的时候

步骤

1. 准备工作

  • 在本地安装并配置 Hexo。具体可以参考本文中方法一的步骤1。

2. 生成静态文件

  • 在 Hexo 项目的根目录下运行以下命令以生成静态文件：

    1
    hexo generate

  • 生成的静态文件将位于 public 文件夹中。

3. 手动上传到 Cloudflare Pages

  • 登录到 Cloudflare 仪表盘。
  • 在账户主页选择左侧的“Workers 和 Pages”，点击“创建项目”。
  • 选择“Pages”选项，并选择“手动上传”。
  • 选择 public 文件夹中的所有文件并上传。

4. 更新和维护

  • 每次更新 Hexo 博客内容后，都需要重新生成静态文件并手动上传到 Cloudflare Pages。

5.注意事项

  • 部分页面可能无法很好的重定向，如有需要请使用前面的方法

结论

  • 方法一 适合希望利用 GitHub 进行代码管理和自动部署的用户。
  • 方法二 适合希望快速启动并自动部署的用户，通过 Fork 的模板仓库简化部署流程。
  • 方法三 适合希望完全控制生成文件的用户，适合静态文件管理和不使用 GitHub 的情况。

报错解决

1.报错hexo: not found

解决办法：Cloudflare文档中提到部署命令使用 hexo generate ，但是该命令会导致这个报错，请使用npm run build部署命令后重试。

2.报错npm ERR! code EUSAGE

如果报错信息包含：

1
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.

根据翻译可得，只有当 package.json 和 package-lock.json 或 npm-shrinkwrap.json 同步时，npm ci 才能安装软件包。

解决办法：先用 npm install 更新package-lock.json，然后再继续。如果无法解决，检查 package.json 和 package-lock.json 内容是否同步。

资源