效果预览

我搭建的图片存储网站
o0w0b

前期准备

获取 TG_BOT_TOKEN

  • 在 Telegram 中搜索 @BotFather
  • 发送 /newbot 命令
  • 按提示输入 Bot 名称和用户名
  • 获得 Bot Token（格式：123456789:ABCdefGHIjklMNOpqrsTUVwxyz）

获取 TG_CHAT_ID

  • 创建一个新的 Telegram 频道（Channel）
  • 将创建的 Bot 添加为频道管理员
  • 给予 Bot 消息管理的权限

  • 在频道中发送一条测试消息
  • 向 @VersaToolsBot 转发这条消息
  • 获得频道 ID（示例：-1001234567890）

定制前端

  1. 将仓库MarSeventh/Sanyue-ImgHub拉取到本地，npm install安装依赖，npm run start启动项目（作为后端服务运行）
  2. 将仓库MarSeventh/CloudFlare-ImgBed拉取到本地，npm install，修改环境变量.env.development中的VUE_APP_BACKEND_URL为你本地后端服务的URL（默认无需修改）
  3. 修改下载的源码，然后npm run build，进入打包好的/dist目录，将里面的所有内容复制到CloudFlare-ImgBed项目的根目录（会存在部分同名的文件，要选择替换）
  4. 将修改好的CloudFlare-ImgBed项目部署到自己的github仓库即可

使用Cloudflare Pages部署网站

  1. 登录 Cloudflare Dashboard
  2. 选择左侧菜单的 “计算和AI” -> “Workers & Pages”
  3. 点击 “创建应用程序”
  4. 在最下方 Looking to deploy Pages? 选择 “Get started”
  5. 在 “导入现有 Git 存储库” 处点击 “开始使用”，选择对应的github仓库

  1. 点击 “开始设置”
配置项 值 说明
项目名称 cloudflare-imgbed（或自定义） 项目标识符
生产分支 main 生产环境分支
构建命令 npm install 重要：v2.0 新构建命令
构建输出目录 / 保持默认

  1. 点击 “保存并部署”
  2. 等待首次部署完成（约 2-3 分钟）

配置 KV 数据库

创建 KV 命名空间

  1. 在 Cloudflare Dashboard 中选择 “存储和数据库”
  2. 点击 “Workers KV”
  3. 点击 “创建实例”
  4. 输入命名空间名称：img_url（也可以输入别的，没有影响）
  5. 点击 “创建”

绑定 KV 到项目

  1. 返回您的 Pages 项目
  2. 选择 “设置” → “绑定”
  3. 点击 “添加” → “KV 命名空间”
  4. 填写绑定信息：
    • 变量名称：img_url（必须是这个名称，这是项目预设的变量名，填错会出现无法进入管理界面等情况）
    • KV 命名空间：选择刚创建的命名空间
  5. 点击 “保存”

也可以通过在项目的根目录添加wrangler.toml配置文件的方式进行绑定，了解更多

重新部署

绑定数据库后需要重新部署以生效：

  1. 进入项目的 “部署” 页面
  2. 找到最新的部署记录
  3. 点击右侧的 “…” 菜单
  4. 选择 “重试部署”
  5. 等待部署完成

配置 Telegram 渠道

部署完成后访问您的域名，进入管理后台配置存储渠道

管理后台默认无需密码，登录后请及时在管理后台设置管理员用户名和密码

  1. 左上角菜单栏进入 “系统设置” → “上传设置”
  2. 找到 “Telegram 渠道配置”
  3. 点击 “添加渠道”
  4. 填入准备好的 Token 和 Chat ID：
    • 渠道名称：自定义名称（如：主渠道）
    • Bot Token：从 @BotFather 获得的 Token
    • Chat ID：频道 ID（有-号时需要保留）
    • 启用状态：开启
  5. 点击 “保存设置”

更多内容

https://cfbed.sanyue.de/guide/quick-start.html