从零开始搭建个人图床
750 字
4 分钟
从零开始搭建个人图床
- 1备案通过后的图床重生记：把 CloudFlare-ImgBed 从 Telegram 渠道搬回境内服务器的完整复刻手册
- 2全站动效补完与 anime.js 数字滚动：五项动效计划的落地、四轮实测踩坑与复刻清单
- 3全站视觉移植复刻：把 Firefly 改造成 animal-island-ui 风格的七期工程（含复刻清单与踩坑全录）
- 4导航栏 UI 改造全记录：卡片边框、悬浮胶囊、三段收拢与 PC 收拢态快捷面板（附完整复现指南）
- 5博客性能优化全记录：Lighthouse 报告拆解到帧率根因排查（A–F 六项实战）
- 6Firefly 博客实战：从零搭建任意设备可用的发布台（Vercel + GitHub API）
- 7评论区回复时表情面板被截断：一次 overflow 裁剪排查实录
- 8Firefly 博客实战：给文章页加阅读进度条与圆环百分比
- 9Firefly 博客接入友链朋友圈：从零开始的完整部署教程
- 10从零开始搭建个人图床本文
- 11文章中添加音乐播放器
- 12基于Firefly主题的列表封面位置改造
- 13基于rehype的博客PDF嵌入组件实现
- 14Twikoo评论系统部署踩坑记录：Vercel域名无法访问的解决之路
- 15这是我的第一篇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
备案通过后的图床重生记：把 CloudFlare-ImgBed 从 Telegram 渠道搬回境内服务器的完整复刻手册
技术分享ICP 备案下证后，本站完成从 Cloudflare 全家桶到腾讯云生态的整体迁移。本文以图床为主线：为什么 CloudFlare-ImgBed 在国内必死（Telegram 渠道、workers.dev 污染、EO 反代 522、CF 封死子域 zone 四重死因），如何无损导出数据，并在轻量服务器上用 Docker 原版程序 + Nginx + rclone WebDAV 重建出「网页上传 + 后台设置」的完整体验，附全部踩坑与可照抄的复刻步骤
2
全站动效补完与 anime.js 数字滚动：五项动效计划的落地、四轮实测踩坑与复刻清单
技术分享完整记录 Firefly 博客一次「按门禁筛出来的动效改造」：五项动效计划（浮层开合/模态进出场/公告折叠/翻页桥接/切标签）的病灶定位、精确参数与四个实测才现形的 bug，以及用 anime.js 给侧栏统计做数字滚动的选型决策、v4 API 与零面积 IntersectionObserver 抢跑坑，附可照做的复刻清单
3
全站视觉移植复刻：把 Firefly 改造成 animal-island-ui 风格的七期工程（含复刻清单与踩坑全录）
技术分享完整记录如何把一个 Astro + Svelte 博客移植成 animal-island-ui 的治愈系海岛风格：决策依据（为什么不引库、不重写）、规范获取方式、七期改造的逐文件实录与精确色值、Tailwind 层序覆盖等关键机制、Nunito 字体接入、验证三件套，附他人可照做的复刻清单与未尽事项
4
导航栏 UI 改造全记录：卡片边框、悬浮胶囊、三段收拢与 PC 收拢态快捷面板（附完整复现指南）
技术分享一次连续迭代的完整复盘——从卡片边框体系、悬浮胶囊导航，到三段结构拆分、下滑收拢动画，再到 PC 收拢态汉堡的控件快捷面板与"行点击原位弹卡"的两处根因修复，追加 PC 搜索控件图标化与收拢动画卡顿的逐帧诊断修复。每个批次改了哪些文件、为什么这么改、踩了哪些坑（CSS 层序、正圆公式、包含块、Vite 缓存、Playwright headless 动画冻结），附 git 重放与手工重做两条复现路径及验收清单
5
博客性能优化全记录：Lighthouse 报告拆解到帧率根因排查（A–F 六项实战）
技术分享从两份 Lighthouse 对比报告出发，完整记录六项性能优化的排查方法、根因定位与修复代码：字体子集化、封面图尺寸 API、CSS 内联、强制重排归零、以及"只有 Chrome 掉帧"的浏览器设置级根因，附全部可复现命令与工具脚本
随机文章随机推荐