📸 告别图床烦恼：搭建免费、高速、稳定的Cloudflare高级图床！
你有没有遇到过这种情况：
好不容易写完一篇文章，配了几张图，过几天一看——图片全挂了。😩
传到别人的图床？怕泄露隐私，更怕跑路。
自己买服务器？速度慢还要花钱。💰
大家好。我是一万。
了解 Cloudflare 的同学一定知道。（以下简称 CF）
CF 号称赛博活佛。
它提供的一些服务在其他云厂商需要额外收费，而在 CF 全部免费。
所以我们经常戏称其为“大善人”、“赛博活佛” 😄
接下来我会以几期视频来聊聊这个“大善人”究竟在互联网时代为我们做什么么。
今天带你们来一期高级图床教程，不费钱、不耽误时间，还能稳、又快，可谓云端‘省心’三字经！✨
部署前，请确保你已拥有一个 CloudFlare 账号和 GitHub 账号，以及熟悉部署基础操作，不要慌，我会一步步带你走，就像带好孩子过马路那样，稳稳推进。🚶♂️
🚀 第一步：Fork开源项目到你的GitHub
打开 GitHub 仓库 MarSeventh/CloudFlare-ImgBed，点击 Fork。
相信看过上期使用Github打造IPTV直播源的同学一定对这里轻车熟路啦。
☁️ 第二步：通过Cloudflare Pages部署项目
接下来我们需要通过 CloudFlare Pages 进行部署。
- 创建项目：登录 CloudFlare →
Pages→新建项目→连接到您 fork 的 GitHub 仓库。 - 构建设置：输入构建命令
npm install，选择正确的分支。 - 点击
部署。
就这么简单，ImgBed图床项目就已经部署好了。✅
💾 第三步：创建R2存储桶和KV存储实例
我们还需要给这个项目创建一个存储桶，并配置 KV 存储绑定。
非常简单，跟着我一期做。🤝
3.1 创建R2存储桶
- 登录 Cloudflare Dashboard
- 选择
"R2 存储对象" - 点击
"创建存储桶" - 输入存储桶名称
- 选择存储区域
- 点击
"创建存储桶"
我们需要在设置中记住S3 API的这段地址。📝
这样存储桶就创建好了。
这里我贴上存储桶的免费额度。给大家参考。
基本上属于不被滥用就不会被反薅。
3.2 创建KV命名空间
接下来我们需要创建一个KV实例。
- 在 Cloudflare Dashboard 中选择
"Workers & Pages" - 点击
"KV" - 点击
"创建命名空间" - 输入命名空间名称：
img_url（建议使用此名称） - 点击
"添加"
🤝 第四步：Pages绑定R2和KV
最后一步我们需要将Cloudflare Pages 与 R2和KV 联动。
我们回到刚刚创建的Pages项目中。
选择
设置→绑定→添加→KV 命名空间。- 变量名称填写：
img_url - 实例选择我们创建的
KV实例。
- 变量名称填写：
接着再绑定存储桶。
- 选择
R2 存储桶。变量名称填写：img_r2 - 存储桶选择我们刚刚创建的。
- 选择
- 点击
保存。
绑定 KV 后需要重新部署以生效：
- 进入项目的
"部署"页面 - 找到最新的部署记录
- 点击右侧的
"..." 菜单 - 选择
"重试部署" - 等待部署完成
重新部署 ✅
这样。这个图床项目就部署完成了。🎉
🔐 第五步：管理端认证与存储配置
接下来我们进入后台修改管理端认证。
安全相关设置，在管理后台的 "系统设置" → "安全设置" 中配置。
也可以通过相应的变量在Cloudflare Pages中进行设置。
相关变量我会同步上传到我的博客供大家查阅。
博客地址是 blog.910501.xyz
配置参数速览：
基础认证配置
| 变量名 | 类型 | 必需 | 说明 | 示例值 |
|---|---|---|---|---|
BASIC_USER | string | 否 | 管理员用户名 | admin |
BASIC_PASS | string | 否 | 管理员密码 | your_secure_password |
AUTH_CODE | string | 否 | 上传认证码 | your_auth_code |
Telegram 渠道
| 变量名 | 类型 | 必需 | 说明 | 示例值 |
|---|---|---|---|---|
TG_BOT_TOKEN | string | 是 | Telegram Bot Token | 123456789:ABCdefGHI... |
TG_CHAT_ID | string | 是 | Telegram 频道 ID | -1001234567890 |
功能开关配置
| 变量名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
AllowRandom | boolean | false | 启用随机图 API |
WhiteList_Mode | boolean | false | 启用白名单模式 |
disable_telemetry | boolean | false | 禁用遥测数据 |
安全配置
| 变量名 | 类型 | 说明 | 示例值 |
|---|---|---|---|
ALLOWED_DOMAINS | string | 允许访问的域名列表 | domain1.com,domain2.com |
ModerateContentApiKey | string | 图像内容审查 API Key | your_api_key |
CDN 缓存配置
| 变量名 | 类型 | 说明 | 用途 |
|---|---|---|---|
CF_ZONE_ID | string | Cloudflare Zone ID | 自动清除 CDN 缓存 |
CF_EMAIL | string | Cloudflare 账户邮箱 | 自动清除 CDN 缓存 |
CF_API_KEY | string | Cloudflare Global API Key | 自动清除 CDN 缓存 |
管理后台操作
我们可以直接使用CF分配给我们的自定义域名。
也可以绑定我们自己的域名进行使用。
- 访问你的自定义域名
/dashboard - 第一次访问直接点登陆。（如果提示密码不正确请留言给我）
登陆之后首选在
系统设置-安全设置中。- 修改用户端认证和管理端认证。
再点击
上传设置-选择上传渠道为Cloudflare R2- 公开访问链接地址就填写我们刚才保存的
S3 API地址。 - 注意：地址只填写到
.com/结尾就好。 .com/后面的项目名称不用填写。
- 公开访问链接地址就填写我们刚才保存的
- 选择
保存设置。
有兴趣的同学可以在网页设置中给你的网站起一个响亮的名字。
并换一个你自己风格的Logo吧。🎨
✨ 成果展示：上传图片到你的专属图床
既然图床搭建好了。
那刚好让我来试试给博客中的这篇文章做一个封面截图吧。
它还贴心的给我们准备了。
- 原始链接
- Markdown
- HTML
- BBCode
四种链接方式供我们使用。
我现在需要的是原始链接。我点击复制。
在博客后台输入我刚刚复制的图片链接。
好了。成功了。🎯
好了，各位，今天教你们的是‘不会花钱、不占服务器、还好看又好用的’图床，让我们一起把图片搬上飞云端。🚀
想看更多 CloudFlare、Docker、自动化部署、奇葩前端特效？最重要的是，别忘了点一下 【关注】，让 UP 主继续带你嗨~ 🥳
谢谢各位的观看。我们下期视频再见。👋
评论 (0)