前置

• GitHub 账号、Cloudflare 账号，绑定信用卡开通 R2（仅验证，不扣费）

1.Fork 源码

1. 打开：github.com/MarSeventh/CloudFlare-I...
2. 右上角 Fork，复制到你自己 GitHub 账号。

2.Cloudflare 创建 R2 存储桶

1. 控制台 → R2 对象存储 → 创建存储桶
2. 桶名英文小写，例如 my‑img‑bed，全部默认，创建。记住桶名字。

3. 创建 KV 命名空间

存储图片索引元数据 存储和数据库 → KV → 创建实例，名字例如 imgbed‑kv。

4.Cloudflare Pages 导入仓库

1. Workers 和 Pages → 创建应用程序 → Pages → 导入现有 Git 存储库
2. 授权 GitHub，选中你 fork 的 CloudFlare‑ImgBed
3. 关键配置（新版本，不要照搬旧教程）
   • 项目名称：自定义
   • 生产分支：main
   • 框架预设：无
   • 构建命令：npm install
   • ✅输出目录：frontend-dist（新版本必填！！旧教程留空会构建白屏）
4. 保存并部署，第一次构建会报错，属于正常，还没绑定资源。

5. 绑定资源绑定（变量名大小写严格，不能错）

进入 Pages 项目 → 设置 → 绑定 → 添加资源绑定 1）绑定 KV 命名空间

• 绑定类型：KV 命名空间
• 变量名：img_url
• 选择刚刚创建的 KV 实例，保存

2）绑定 R2 存储桶

• 绑定类型：R2 存储桶
• 变量名：img_r2
• 选择 R2 桶，保存

6. 设置管理员账号密码（环境变量，生产环境）

Pages 项目 → 设置 → 环境变量 → 为生产环境定义变量

表格

不设置，任何人都能访问后台上传图片，不安全。

7. 重新触发部署

部署 → 所有部署 → 找到最近部署，右侧三个点 → 重试部署 等待构建完成（2‑4 分钟）。

访问地址：https://你的pages域名/admin，输入账号密码登录后台。

8. 后台开启 R2 存储渠道

1. 系统设置 → 存储渠道
2. 只打开 Cloudflare R2，其余渠道全部关闭。保存。
3. 首页拖拽图片测试上传，获取 Markdown 链接。

9.PicGo 对接（可选）

1. PicGo 安装插件：picgo‑plugin‑cloudflare‑imgbed‑uploader
2. 参数：
   • 站点地址：你的 pages 域名（不带/admin）
   • 认证码：后台系统设置‑安全设置生成
   • 上传渠道：cfr2

10. 自定义域名（可选）

Pages 项目 → 设置 → 自定义域，填入托管在 CF 的域名，如 img.xxx.com，按提示解析。

高频踩坑清单

1. 部署完页面空白：输出目录没有填 frontend‑dist，这是新版本最常见错误。
2. /admin 500 报错：检查绑定变量名 img_url、img_r2，绑定后必须重试部署。
3. 登录成功但是上传失败：后台确认 R2 渠道已经开启；R2 桶不要手动开启公开访问，项目内部代理访问。
4. 图片上传成功打不开：不要手动修改 R2 桶权限，项目自带代理。

本作品采用《CC 协议》，转载必须注明作者和本文链接