使用telegraph+cloudflare免费图片托管解决方案

原创 2023-08-08 19:17
文章的分类 教程分享

免费图片托管解决方案,Flickr/imgur替代品。使用Cloudflare Pages和Telegraph。

感谢

本次使用的程序是来自github上的二位大佬,我把拼合了一些
Telegraph-Image:https://github.com/cf-pages/Telegraph-Image
telegraph-Image:https://github.com/x-dr/telegraph-Image

本次使用的仓库地址:

隐藏内容,需要留言后方可查看

如何部署

提前准备

你唯一需要提前准备的就是一个Cloudflare账户 (如果需要在自己的服务器上部署,不依赖Cloudflare )

手把手教程
简单3步,即可部署本项目,拥有自己的图床

1.下载或Fork本仓库 (注意:目前请使用fork,在使用下载部署存在问题)

2.打开Cloudflare Dashboard,进入Pages管理页面,选择创建项目,如果在第一步中选择的是fork本仓库,则选择连接到 Git 提供程序,如果第一步中选择的是下载本仓库则选择直接上传

2023-08-08T11:10:24.png

按照页面提示输入项目名称,选择需要连接的git仓库(第一步选择的是fork)或是上传刚刚下载的仓库文件(第一步选择的是下载本仓库),点击部署站点即可完成部署

特性

1.无限图片储存数量,你可以上传不限数量的图片

2.无需购买服务器,托管于Cloudflare的网络上,当使用量不超过Cloudflare的免费额度时,完全免费

3.无需购买域名,可以使用Cloudflare Pages提供的*.pages.dev的免费二级域名,同时也支持绑定自定义域名

4.支持图片审查API,可根据需要开启,开启后不良图片将自动屏蔽,不再加载

5.支持后台图片管理,可以对上传的图片进行在线预览,添加白名单,黑名单等操作

绑定自定义域名

在pages的自定义域里面,绑定cloudflare中存在的域名,在cloudflare托管的域名,自动会修改dns记录

2023-08-08T11:11:12.png

在文件的asset/js/upload.js文件中的第218和220行建议修改为自己的加速域名!

开启图片审查

1.请前往https://moderatecontent.com/ 注册并获得一个免费的用于审查图像内容的API key

2.打开Cloudflare Pages的管理页面,依次点击设置,环境变量,添加环境变量

3.添加一个变量名称为ModerateContentApiKey,值为你刚刚第一步获得的API key,点击保存即可

注意:由于所做的更改将在下次部署时生效,你或许还需要进入部署页面,重新部署一下该本项目

开启图片审查后,因为审查需要时间,首次的图片加载将会变得缓慢,之后的图片加载由于存在缓存,并不会受到影响

2023-08-08T11:12:08.png

限制

1.由于图片文件实际存储于Telegraph,Telegraph限制上传的图片大小最大为5MB

2.由于使用Cloudflare的网络,图片的加载速度在某些地区可能得不到保证

3.Cloudflare Function免费版每日限制100,000个请求(即上传或是加载图片的总次数不能超过100,000次)如超过可能需要选择购买Cloudflare Function的付费套餐,如开启图片管理功能还会存在KV操作数量的限制,如超过需购买付费套餐

图片管理功能

1、支持图片管理功能,默认是关闭的,如需开启请部署完成后前往后台依次点击设置->函数->KV 命名空间绑定->编辑绑定->变量名称填写:img_url KV 命名空间 选择你提前创建好的KV储存空间,开启后访问http(s)://你的域名/admin 即可打开后台管理页面
变量名称 | KV命名空间
img_url | 选择提前创建好的KV储存空间

2023-08-08T11:13:42.png

2023-08-08T11:13:53.png

2、后台管理页面新增登录验证功能,默认也是关闭的,如需开启请部署完成后前往后台依次点击设置->环境变量->为生产环境定义变量->编辑变量 添加如下表格所示的变量即可开启登录验证
变量名称 值
BASIC_USER <后台管理页面登录用户名称>
BASIC_PASS <后台管理页面登录用户密码>

2023-08-08T11:16:15.png

创建完成后重新部署即可!
2023-08-08T11:16:55.png



THE END


分享
赞赏
精选留言 写留言
    1. mx 来自伊朗 访客 头像

      网站部署教程很详细

      5月21日
    1. jbls 来自贵州省移动 访客 头像

      谢谢大佬,受教了

      4月21日
    1. dede 来自美国Xerox 访客 头像

      学习一下大佬

      4月14日
    1. xx 来自瑞典 访客 头像

      xxxxx

      3月7日
    1. xxx 来自瑞典 访客 头像

      学习一下,网上大佬的方案各有千秋。看看大佬的方案能不能结合优点

      3月7日
    1. collin 来自中国江苏省无锡市梁溪区 访客 头像

      cloudflare世上最慢

      1月30日
    1. haha 来自美国Akamai科技公司CDN网络节点 访客 头像

      大佬,能不能自己修改cdn源呢,求告知修改位置

      2023年12月31日
    1. leo 来自美国加利福尼亚州洛杉矶Level3通信(DIA) 访客 头像

      之前这样做过,图片速度很慢

      2023年12月29日
    1. niu 来自欧洲和中东地区 访客 头像

      学习学习

      2023年12月27日
    1. 江歌 来自亚太地区 访客 头像

      学习学习

      2023年11月14日
      1. 七七 来自广东省深圳市电信 访客 头像
        @江歌

        mask

        2023年12月17日
    1. dalao 来自香港电讯盈科有限公司 访客 头像

      学习学习

      2023年11月12日
    1. 阳光 来自日本东京Oracle云计算数据中心 访客 头像

      学习学习

      2023年10月17日
    1. M 来自中国湖北省鄂州市华容区 访客 头像

      又来回顾了

      2023年09月15日
    1. standee 来自美国theplanet 访客 头像

      大佬您的图床的地址是什么呢?

      2023年08月16日
    1. 潜心学习的女孩 来自美国 访客 头像

      大佬求看

      2023年08月15日
    1. X 来自北京市昌平区联通 访客 头像

      来看看,正好用得上

      2023年08月15日
      1. 22 来自北京市电信 访客 头像
        @X

        232

        2023年12月01日
    1. 德德 来自新加坡Amazon数据中心 访客 头像

      设置了BASIC_USER 和BASIC_PASS ,使用分配的域名加/admin可以登陆管理,,但用自定义域可以上传,就是加/admin就提示
      An error occurred while synchronizing data with the server, please check the network connection
      然后就Invalid credentials.

      2023年08月13日
    1. 穷屌丝 来自香港电讯盈科有限公司 访客 头像

      看看仓库地址。

      2023年08月12日
    1. 哈哈 来自美国加州 访客 头像

      首页能设密码登录吗?只想自用,这样也不用加审核了

      2023年08月11日
    1. M 来自河南省移动 访客 头像

      非常感谢

      2023年08月11日
    1. mrjian 来自美国加利福尼亚州洛杉矶IT7网络 访客 头像

      我已经在CF里面创建和绑定了KV 空间 img_url ,但是打开连接想管理图片出现“Dashboard is disabled. Please bind a KV namespace to use this feature.”

      2023年08月11日
      1. 大佬博客 来自安徽省合肥市联通 访客 头像
        @mrjian

        你创建名称为img_url的kv了吗?

        2023年08月11日
        1. mrjian 来自美国加利福尼亚州洛杉矶IT7网络 访客 头像
          @大佬博客

          是的,变量名称 KV 命名空间

                     img_url         img_url
          
          2023年08月11日
          1. 山谷 来自安徽省合肥市联通 作者 头像
            @mrjian

            重新部署一下试试

            2023年08月11日
            1. mrjian 来自美国加利福尼亚州洛杉矶IT7网络 访客 头像
              @山谷

              好的,我试试

              2023年08月11日
    1. mrjian 来自美国加利福尼亚州洛杉矶IT7网络 访客 头像

      学习一下

      2023年08月11日
    1. 胡一派 来自美国 访客 头像

      域名啥的最好都用环境变量配置吧。这样就不用每人folk一个,也不好同步你上游的修改了。

      2023年08月10日
      1. 大佬博客 来自安徽省合肥市联通 访客 头像
        @胡一派

        有道理,我明天改一下

        2023年08月10日
    1. 彩虹彩虹 来自湖南省长沙市雨花区电信 访客 头像

      不错的教程

      2023年08月10日
      1. 彩虹彩虹 来自湖南省长沙市电信 访客 头像
        @彩虹彩虹

        218和220哪里直接删除也不行

        2023年08月11日
      1. 彩虹彩虹 来自湖南省长沙市电信 访客 头像
        @彩虹彩虹

        上传到你的没问题,自己的上传后,500报错

        2023年08月11日
        1. 大佬博客 来自安徽省合肥市联通 访客 头像
          @彩虹彩虹

          有时候会失败,多点几次上传试试

          2023年08月11日
    1. 123 来自新加坡Linode数据中心 访客 头像

      大佬 这个国内能访问么

      2023年08月10日
      1. 山谷 来自亚太地区 作者 头像
        @123

        可以,但是速度是cf的速度

        2023年08月10日
        1. 123 来自新加坡Linode数据中心 访客 头像
          @山谷

          那不错啊,先不管速度,能用就行,我试试,谢谢

          2023年08月10日
          1. 123 来自新加坡Linode数据中心 访客 头像
            @123

            牛逼,成功了,太强了,我兰空授权白买了

            2023年08月10日
    1. 大名鼎鼎的道士 来自四川省成都市电信 访客 头像

      webp写的是支持实际上传会报错啊.

      2023年08月10日
      1. 大佬博客 来自安徽省合肥市联通 访客 头像
        @大名鼎鼎的道士

        telegraph不支持

        2023年08月10日
        1. 大名鼎鼎的道士 来自四川省成都市电信 访客 头像
          @大佬博客

          了解.

          2023年08月10日
    1. didiaog 来自美国 访客 头像

      非常感谢

      2023年08月09日
    1. 支持大佬 来自中国广东省惠州市惠城区 访客 头像

      ヾ(≧∇≦*)ゝ

      2023年08月09日
    1. aa 来自日本东京都东京 访客 头像

      想问一下你的图床程序是什么

      2023年08月08日
      1. 大佬 来自安徽省合肥市联通 访客 头像
        @aa

        这篇文章你稍微看一眼也知道是什么程序

        2023年08月09日
    1. 穷屌丝 来自日本东京Sakura樱花云数据中心 访客 头像

      大佬网站背景动画气球咋搞的?

      2023年08月08日
      1. 山谷 来自安徽省合肥市联通 作者 头像
        @穷屌丝

        你右键查看一下源码

        2023年08月08日
    1. 穷屌丝 来自河南省安阳市电信 访客 头像

      大佬的博客搞得好卡哇伊。

      2023年08月08日
      1. 山谷 来自安徽省合肥市联通 作者 头像
        @穷屌丝

        我可不是大佬,我是穷屌丝

        2023年08月08日
        1. 穷屌丝 来自日本东京Sakura樱花云数据中心 访客 头像
          @山谷

          我才是穷屌丝

          2023年08月08日
    1. dasd 来自新加坡DigitalOcean数据中心 访客 头像

      学习一下

      2023年08月08日
      1. shenyin 来自德国 访客 头像
        @dasd

        过来观摩

        4月17日