效果预览

我搭建的图片存储网站
o0w0b

前期准备

获取Telegram的TG_BOT_TOKEN和TG_CHAT_ID

首先需要拥有一个Telegram账户，然后按照以下步骤获取TG_BOT_TOKEN和TG_CHAT_ID

  1. 向@BotFather发送/newbot，按照提示输入bot的备注、用户名等信息成功创建后获得TG_BOT_TOKEN

  1. 创建一个新的频道（Channel），进入新建的频道，选择频道管理，将刚才创建的机器人设为频道管理员

  1. 在第2步新建频道中随便发一条消息，向@VersaToolsBot转发，获取TG_CHAT_ID（频道ID）

修改前端

  1. 将仓库MarSeventh/Sanyue-ImgHub下载到本地，npm install，修改环境变量.env中的VUE_APP_SITE_URL为自己图片存储网站的URL
  2. 修改下载的源码，可以将样式等修改成自己喜欢的样子，然后npm run build，编译后会生成/dist目录
  3. 将仓库MarSeventh/CloudFlare-ImgBed下载到本地，将刚刚编译生成的/dist目录中的所有内容复制到该项目的根目录（会存在部分同名的文件，要选择替换）
  4. 在Github新建仓库，将修改好的CloudFlare-ImgBed项目文件上传到该仓库

使用Cloudflare Pages部署网站

  1. 打开 Cloudflare Dashboard，进入 Pages 管理页面，选择创建项目，点击连接到 Git

  1. 按照页面提示输入项目名称，选择需要连接的 git 仓库，点击开始设置

  2. 填写项目名称，构建命令填写npm install，点击保存并部署

  1. 绑定KV数据库
  • 创建一个新的KV数据库

image-20250211234900408

  • 进入项目对应设置->绑定->添加->KV 命名空间->变量名称，填写img_url，KV命名空间选择刚才创建好的KV数据库

  1. 添加或修改环境变量

  1. 重试部署
  • 前往项目部署详细信息界面

  • 管理部署 -> 重试部署

  1. Cloudflare Page可以免费绑定自己的域名，绑定好后可以用自己的域名访问网站

更多内容

关于网站的使用以及更多内容请参考（通过API上传图片，随机图API，网站的使用说明）

CloudFlare-ImgBed | README
github@MarSeventh