完全免费，图文教程使用cloudflare搭建一个无限空间的私人图床!

关于本项目


注意！！！如果你之前部署过此项目，现在一定要更新一下最新版本，新版本作者修复了部分问题。

非常感谢作者能够回复并解决我提出的需求

新版本新增页脚自定义传送门；管理端新增一键下载与全选功能

项目仓库（点击跳转）
前端仓库（点击跳转）
作者博客（点击跳转）
我参考的教程（点击跳转）
我的图床最终效果（点击跳转）
图床速度体验（点击跳转） 看看加载图片的速度能不能瞒住你的需求

本项目是 Telegraph-Image 的重制版
在找到这个图床项目以前，之前也使用的类似的免费图床。之前的项目应该是基于cloudflare，把图片存储到cloudflare上面，现在那个项目已经无法上传了，但是已经上传的图片还是可以正常使用
这个项目的逻辑（本人小白下面是我的理解不知道对不对）

  1. telegraph 由 telegram 推出的匿名图片托管平台，图片存储在telegram（就是我们平时说的电报）的服务器
  2. 在电报建立一个频道（可以理解是一个群），然后将图片发送到群里，通过一个电报的机器人获取图片的链接。所以可以到这个频道看到上传的所有图片
  3. 玩过电报的都应该知道，电报的服务器在国外，国内无法访问。所以就需要cloudflare的cdn服务来进行访问。

这个项目为你提供了一个不限容量不限数量的图床 + cdn 服务
图片存储在 telegram 的服务器上 cloudflare 提供全球 cdn 服务
基于 cloudflare pages 完全免费（现在 page 不限制额度了 和 worker 分开了）
支持图片审查 API，可自动屏蔽不良图片（我不会这个变量，或者说我没有这个需求所以无所谓了）
可以自定义域名（如果没有域名可以使用cloudflare分配的 *.page.dev 我看网上说这个域名被墙了，在我地区测试是没有问题）
最好还是绑定一个自己的域名（这样更加适合装逼）

实操部署

部署此项目首先需要拥有

小白教程，记录我自己的部署过程。大佬应该不会看到我的教程哈哈
GitHub 账号（点击跳转）
cloudflare 账号（点击跳转）
Telegram 账号（点击跳转）

关于账号的注册自己网上搜索，我默认已经完成三个账号的注册。

Telegram 配置

注册 telegram 后 包点此安装官方简体中文语言包点击Apply Language安装中文包。手机版本可能更加好操作（因为telegram默认是英文版本,本人英文基本靠翻译）

在电报需要获取TG_BOT_TOKEN和TG_CHAT_ID这两个值 后续使用（必须的！！）

  1. 获取TG_BOT_TOKEN
    • 搜索 “@BotFather” 注意看文字和图标不要点错了！我开始就在这一步翻车了！

      点击开始

      a发送/newbot 新建机器人
      b.给机器人起一个名字我这里用的imgbed(自己喜欢都可以的)
      c.给机器人起一个用户名结尾必须是_bot（我这里第一次使用imgbed_bot就提示重复了，就需要换一个名字imgbedrun_bot这个也是你自己喜欢）这个名字我觉得无所谓的后期基本不会使用的

      Use this token to access the HTTP API:下面这一串就是TG_BOT_TOKEN等一下需要使用
  1. 新增频道增加机器人获取 TG_CHAT_ID（频道 ID）
    1. 在 telegram 中 打开左侧的菜单（三道杠） 打开新建频道 注意是频道不是群组 名字根据自己喜欢来 我这里就叫在imgbed 然后跳过
    2. 进入创建的imgbed频道，点击三个点管理频道

      3.菜单中点击 “添加管理员”将刚才创建的机器人也设为管理员（注意搜索 @刚才设置的用户名 前面设置的机器人用户名是@imgbedrun_bot别填加错了 你填写你自己的哈 不要写我的哈）然后保存默认权限保存

      4.搜索@VersaToolsBot点击开始

      5.回到建立的频道imgbed 随便发一条消息然后转发这条消息给@VersaToolsBot

      点击 发送

      回到 VersaToolsBot机器人界面找到频道的ID

      注意频道ID”-1002430……”前面的-也要一起复制
      保留好TG_BOT_TOKEN和TG_CHAT_ID

github配置

首先打开该项目仓库（点击跳转）点击 “Fork”（如果你认可此项目 可以点击旁边的 starts 以支持作者）

此页面不用动任何设置 点击 “Create fork”

注意！！！如果你之前部署过此项目，现在一定要更新一下最新版本

cloudflare 配置

  1. cloudflare部署Pages项目
    cloudflare 登录你的账号并打开仪表盘 点击侧边栏中的 “Workers 和 Pages”点击上方的 “创建”

    选到 Pages 一栏，点击 连接到 Git

    在打开的第一个页面 点击 “连接到 GitHub” 随后会跳转到 GitHub 进行授权 选到 “All repositories”（默认即可）完成授权后会回到 cloudflare 的选择存储库的界面（如下图），选择刚才 fork 的仓库后点击 “开始设置”


    直接保持并部署即可（如果没有域名想要用pages.dev自带的这个域名，项目名称这里可以修改一下自己喜欢的名字 我这里就修改为imgbed (自动分配的域名就是 imgbed-enm.pages.dev)

    出现下图即部署完成，点击 “继续处理项目”

    点击 “自定义域” 添加一个你自己的域名（我只会托管到 cf 中的域名。没有托管cf域名网上有教程好像比较麻烦我也不会）
    我这里就用img作为二级域名来访问，如果托管cf的直接就好了

  2. 绑定KV数据库(其实我不明白这一步的用途，以前的项目创建这个KV空间库用来储存图片，这个我不明白了，不管了反正跟着教程抄就完了)
    点击左侧栏中的 KV（在 Workers 和 Pages 菜单下）点击 创建命名空间 名称为 imgbed 点击 添加

    完成添加后 回到 pages 的界面 imgbed项目 点击 设置 后点击 变量与机密
    image.png
    点击 绑定 添加

    变量名称 填写 img_url(这里的变量名称必须是img_url不可以自己乱写) KV 命名空间 选择刚才

    创建的 KV imgbed 完成后点击保存

添加 环境变量

常用用环境变量可以添加 如下表(全部变量参考项目说明)

变量名称 用途 推荐说明
TG_CHAT_ID telegram 频道 ID 必须
TG_BOT_TOKEN telegram 机器人 token 必须
BASIC_USER 后台管理员用户名 登录后台管理查看图片
BASIC_PASS 后台管理密码
AUTH_CODE 前台的认证码

只要有这些变量就可以正常使用了 图片审查 api 访问域名限制这些我用不到就没有去设置了

然后重新部署（所有关于环境变量和 kv 绑定的修改都要重新部署一遍）
选到 部署 一栏 最新的部署（就是最上面的那一个），鼠标点击在右侧三个点 在弹出的菜单中选择 重新部署


重新部署后，打开自己绑定的域名或者cf给的域名打开网页，随便上传一张图片测试一下

上传成功的同时电报频道也会收到消息，可以将频道改为免打扰。复制一下图片的URL测试一下访问速度。

添加 美化变量

页面自定义DIY环境变量增加USER_CONFIG，JSON格式，具体字段用途及内容规范见下表。

字段名 用途 类型 内容规范
loginBkImg 自定义登录页面背景 列表/字符串 1、当字段类型为列表时，列表中元素为需要添加到轮播列表中的图片链接（列表中只有一张图时即为固定背景），形如[“1.jpg”,”2.jpg”]2、当字段类型为字符串时，目前仅支持字符串值为bing，设置为该值时启用bing随机图片轮播模式。
uploadBkImg 自定义上传页面背景 列表/字符串 同上
bkInterval 轮播背景切换时间间隔 正整数 设置为背景图的轮播时间，默认3000，单位ms。例如你希望10s切换一次，设置为10000即可。
bkOpacity 背景图透明度 (0,1]的浮点数 展示的背景图透明度，默认为1。如果你觉得显示效果不佳，可以自定义，如0.8
ownerName 页内图床名称 字符串 只支持字符串类型，设置为你自定义的图床名称（默认为Sanyue）
logoUrl 页内图床Logo 字符串 只支持字符串类型，设置为你自定义的图床Logo链接
siteTitle 网站标题 字符串 只支持字符串类型，设置为你自定义的网站标题
siteIcon 网站图标 字符串 只支持字符串类型，设置为你自定义的网站图标链接


下面是我用的，可以更具需要自己进行复制修改

1
2
3
4
5
6
7
8
9
{
"uploadBkImg": ["https://imgbed.814925.xyz/file/1727336719764_spongebob_and_gary_snail-wallpaper-1920x1080.jpg","https://imgbed.814925.xyz/file/1727336723041_cat_sunset-wallpaper-1920x1080.jpg","https://imgbed.814925.xyz/file/1727336712385_spacecat-wallpaper-1920x1080.jpg"],
"loginBkImg":["https://imgbed.814925.xyz/file/1727336719764_spongebob_and_gary_snail-wallpaper-1920x1080.jpg","https://imgbed.814925.xyz/file/1727336723041_cat_sunset-wallpaper-1920x1080.jpg","https://imgbed.814925.xyz/file/1727336712385_spacecat-wallpaper-1920x1080.jpg"],
"ownerName": "Wangrun's",
"bkInterval": "10000",
"siteTitle": "Wangrun's-imgdeb",
"siteIcon": "https://imgbed.814925.xyz/file/1728092737975_%E9%80%8F%E6%98%8E.png",
"logoUrl": "https://imgbed.814925.xyz/file/1728092737975_%E9%80%8F%E6%98%8E.png"
}

自定义登录页面背景我改了没有反应不知道哪里错了

我遇到的问题

    1. 上传透明背景图片PNG背景变成白色。目前作者已经更新压缩设置按钮可以进行开启或者关闭
      image.png

      目前图片压缩设置项分为客户端压缩和服务端压缩两项，前者仅支持在web端上传时使用。
      以下是对该设置的几点说明：
      1.本设置仅针对图片文件，单位为MB
      2.客户端压缩指上传前压缩，服务端压缩指Telegram端压缩
      3.若图片大小>10MB，或压缩后图片大小>10MB，服务端压缩将自动失效
      4.若图片大小>20MB，将自动进行客户端压缩
      5.若想要存储的图片和原图完全一致，可以将两个压缩设置均设置为关闭
      6.若上传分辨率过大图片，或透明背景图片，建议关闭服务端压缩，否则可能出现上传失败、背景变白等问题

  • 2.点击头像和名字跳转的的作者的github仓库地址，希望可以加入变量进行修改。这里没有不尊重原作者的意思
  • 3.底部的Designed by SanyueQi for You!（叁月柒设计）跳转的作者博客。希望可以在底部右边在加一个按钮来进行自定义跳转，比如跳转回我的博客。这里没有不尊重原作者的意思
  • 4.佬能加个添加文件夹功能，方便管理图片