从零开始搭建个人图床
750 字
4 分钟
从零开始搭建个人图床
- 1导航栏 UI 改造全记录：卡片边框、悬浮胶囊、三段收拢与 PC 收拢态快捷面板（附完整复现指南）
- 2博客性能优化全记录：Lighthouse 报告拆解到帧率根因排查（A–F 六项实战）
- 3Firefly 博客实战：从零搭建任意设备可用的发布台（Vercel + GitHub API）
- 4评论区回复时表情面板被截断：一次 overflow 裁剪排查实录
- 5Firefly 博客实战：给文章页加阅读进度条与圆环百分比
- 6Firefly 博客接入友链朋友圈：从零开始的完整部署教程
- 7从零开始搭建个人图床本文
- 8文章中添加音乐播放器
- 9基于Firefly主题的列表封面位置改造
- 10基于rehype的博客PDF嵌入组件实现
- 11Twikoo评论系统部署踩坑记录：Vercel域名无法访问的解决之路
- 12这是我的第一篇BLOG
利用CF和TG搭建个人图床
本文介绍方法基于Cloudflare Workers和Telegram，开始部署前请先确保有CF和TG账号，如果您想自行选取方法，请参考官方文档。
项目地址：CloudFlare-ImgBed官方文档：CloudFlare-ImgBed
前期准备
- 在 Telegram 中搜索 @BotFather并添加到列表
- 发送
/newbot命令 - 按提示输入 Bot 名称和用户名等信息
- 成功创建后将会获得 Bot Token（格式：
123456789:ABCdefGHIjklMNOpqrsTUVwxyz） - 创建一个全新的频道，选择频道管理，将刚才创建的Bot设为管理员。
- 设备Bot权限，除邀请新成员外其他权限全部开启
- 在频道中发送一条测试消息
- 向 @VersaToolsBot 转发这条消息
- 获得频道 ID（示例：
-1001234567890）
Cloudflare Workers部署
第一步：Fork 项目
- 访问 CloudFlare ImgBed
- 点击右上角的 “Fork” 按钮，如果您喜欢该项目，欢迎加入Star以支持
- 选择您的 GitHub 账户
- 确认 Fork 完成
第二步：准备 Cloudflare 资源
2.1 获取 API 令牌 和 Account ID
- 登录 Cloudflare Dashboard
- 点击右上角头像 → “配置文件” → “API 令牌”
- 点击 “创建令牌”
- 选择 “编辑 Cloudflare Workers” 模板
- 账户资源选择自己的账户，区域资源选择所有区域
- 确认权限并创建，记录生成的API令牌
- 返回账户主页，右侧三个点展开复制账户ID，如果找不到可以直接搜索”复制账户”，记录复制的账户ID
2.2 创建数据库
数据库用于存储文件元数据，本文选择KV
| 特点 | KV 数据库 |
|---|---|
| 读写性能 | 高 |
| 免费额度 | 少 |
KV 数据库
- 在 Dashboard 中选择 “存储和数据库” → “Workers KV”
- 点击 “创建实例”，名称填
img_url，请勿修改此名称 - 创建完成后返回，记录img_url ID
⚙️ 第三步：配置 GitHub Secrets
在 Fork 的仓库中，进入 Settings → Secrets and variables → Actions → Secrets，添加以下 Secrets：
| Secret 名称 | 说明 | 是否必填 |
|---|---|---|
CLOUDFLARE_API_TOKEN | Cloudflare API Token | ✅ 必填 |
CLOUDFLARE_ACCOUNT_ID | Cloudflare Account ID | ✅ 必填 |
KV_NAMESPACE_ID | KV 命名空间 ID |
创建完成后进入 Actions → I understand… →Deploy to Cloudflare Workers →Run workflow →Run workflow（注意此处默认的work name不要修改）
运行之后等待一段时间部署deploy
存储渠道配置
部署完成后访问您的域名，进入管理后台配置存储渠道。
访问管理后台
访问 https://你的域名/dashboard
管理后台默认无需密码，登录后请及时设置管理员用户名和密码。
配置 Telegram 渠道
- 左上角菜单栏进入 “系统设置” → “上传设置”
- 找到 “Telegram 渠道配置”
- 点击 “添加渠道”
- 填入准备好的 Token 和 Chat ID：
- 渠道名称：自定义名称（如：主渠道）
- Bot Token：从 @BotFather 获得的 Token
- Chat ID：频道 ID（有
-号时需要保留） - 代理 URL：（可选）自定义代理地址，用于代理 Telegram API 请求
- 启用状态：开启
- 点击 “保存设置”
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！
相关文章智能推荐
1
导航栏 UI 改造全记录：卡片边框、悬浮胶囊、三段收拢与 PC 收拢态快捷面板（附完整复现指南）
技术分享一次连续迭代的完整复盘——从卡片边框体系、悬浮胶囊导航，到三段结构拆分、下滑收拢动画，再到 PC 收拢态汉堡的控件快捷面板与"行点击原位弹卡"的两处根因修复，追加 PC 搜索控件图标化与收拢动画卡顿的逐帧诊断修复。每个批次改了哪些文件、为什么这么改、踩了哪些坑（CSS 层序、正圆公式、包含块、Vite 缓存、Playwright headless 动画冻结），附 git 重放与手工重做两条复现路径及验收清单
2
博客性能优化全记录：Lighthouse 报告拆解到帧率根因排查（A–F 六项实战）
技术分享从两份 Lighthouse 对比报告出发，完整记录六项性能优化的排查方法、根因定位与修复代码：字体子集化、封面图尺寸 API、CSS 内联、强制重排归零、以及"只有 Chrome 掉帧"的浏览器设置级根因，附全部可复现命令与工具脚本
3
Firefly 博客实战：从零搭建任意设备可用的发布台（Vercel + GitHub API）
技术分享静态博客只能守在电脑前发文章？本文完整复盘如何用 Vercel 无框架函数 + GitHub API 搭一套带登录的发布后台——发文、改稿、删除、预览全部在浏览器里完成，附我们真实踩过的五个部署坑与安全边界设计，照着做可以从零复刻。
4
Win11 资源管理器大小列只显示 KB？开启 KB / MB / GB 自适应显示完整教程
技术分享Win11 详细信息视图的大小列长期以来一律用 KB 显示，4 GB 的文件写成 4,194,304 KB 根本没法看。微软其实已经原生支持自适应单位了，本文给出先更新系统、再用 ViveTool 强制开启（功能 ID 61014711）的完整教程，含回滚方法与常见问题。
5
Codex 重装后三大故障修复全记录：CC Switch 报错、走官方通道、聊天记录丢失
技术分享一次「Codex 删了重装」引发三个环环相扣的故障：CC Switch 报 requireStack、Codex 打到 api.openai.com 401、历史聊天记录不显示。完整根因分析与修复过程。
随机文章随机推荐