标签: cloudflare

  • CloudFlare-ImgBed – 完全免费的无服务器私有图床方案,基于 Cloudflare Pages 和 Telegram

    CloudFlare-ImgBed – 完全免费的无服务器私有图床方案,基于 Cloudflare Pages 和 Telegram

    CloudFlare 图床,基于 CloudFlare Pages 的免费图片托管解决方案,支持多种存储方式:主要是 Telegram Bot 和 Cloudflare R2 等,也可以自托管!
    开源地址:https://github.com/MarSeventh/CloudFlare-ImgBed?tab=readme-ov-file

    一、简介

    免费图片托管解决方案(支持存储绝大多数常见格式的图片、视频、动图等),具有后台管理、图片审查登录鉴权页面自定义多种方式及多文件上传多文件及多格式链接复制等功能(详见第2章)。

    此外,拖拽上传的方式并没有严格限制文件类型,理论上你可以上传任何文件,但是暂时不会针对图片和视频外的文件进行特殊优化和适配。

    CloudFlare-ImgBed – 完全免费的无服务器私有图床方案,基于 Cloudflare Pages 和 Telegram

    二、主要特征

    • 开源
      • 前端开源(可自行修改、打包使用)
    • 炫酷的动效(
      • 流畅丝滑的过渡动画~
      • 上传文件实现呼吸灯效果
    • 人性化上传
      • 支持绝大多数常见图片、视频、动图
      • 支持 Telegram BotCloudflare R2 等多种存储渠道一键切换Telegram Bot渠道:上传文件大小限制为20MB,提供客户端和服务端压缩功能Cloudflare R2渠道:上传大小不限,但超过免费额度会扣费,详见Pricing | Cloudflare R2 docs
      • 支持多种上传方式(拖拽点击、粘贴
      • 粘贴上传支持文件URL
      • 支持批量上传(不限同时选择文件数量,但为了保证稳定性,同时处于上传状态的文件最多为10个)
      • 上传显示实时上传进度
      • 上传后图片无需手动点击,可直接展示在管理页面中
      • 过大图片在前端进行压缩,提升上传稳定性和加载性能
      • 支持自定义压缩质量,自定义开启前后端压缩功能
    • 多样化复制
      • 支持整体复制单独复制(整体复制即将所有链接通过换行串联起来后复制)
      • 支持MarkDown、HTML、BBCode和原始链接四种格式复制
      • 上传完成后直观展示四种格式链接
    • 支持身份认证、防滥用
      • 支持Web和API上传认证(感谢hl128k
      • 支持访问域名限制(感谢hl128k
      • 支持上传IP统计
    • 支持页面自定义
      • 页面背景支持单图自定义多图轮播bing随机图轮播等多种模式
      • 自定义图床名称和Logo
      • 自定义网站标题和Icon
    • 一些小功能
      • 支持随机图API,从图床中随机返回一张图片
    • 以及原版所有特性1.无限图片储存数量,你可以上传不限数量的图片2.无需购买服务器,托管于 Cloudflare 的网络上,当使用量不超过 Cloudflare 的免费额度时,完全免费3.无需购买域名,可以使用 Cloudflare Pages 提供的*.pages.dev的免费二级域名,同时也支持绑定自定义域名4.支持图片审查 API,可根据需要开启,开启后不良图片将自动屏蔽,不再加载5.支持后台图片管理,可以对上传的图片进行在线预览,添加白名单,黑名单等操作

    三、部署方式

    原文链接介绍的部署方式非常保姆级了,看原文就好了。

    四、本站部署项目时遇到的问题和解决方案。

    (一)Cloudflare后台页面改版了,Worker和Page合并在一起了

    (二)连接到GIT时,点击部署出错了。

    点击连接时,输入账号密码后,跳转到了github的网址页面,选择项目后,无论如何部署都是失败。

    需要Uninstall,再部署,如下

    (三)一张环境变量的设置案例图[作者提供]

    (四)一些变量的解释

    • BASIC_USER – 后台设置页面的登录用户名
    • BASIC_PASS – 后台设置页面的登录密码
    • TG_BOT_TOKEN – 创建好TG的Bot后出现的Token
    • TG_CHAT_ID – 创建好TG channel后,转发任意一条消息到@VersaToolsBot 后返回的群聊Channel ID
    • AUTH_CODE – 添加一个访问验证码
    • ALLOWED_DOMAINS – 添加访问域名限制
    • WhiteList_Mode – 白名单模式, 设置为true即可开启白名单模式,仅设置为白名单的图片可被访问。
    • disable_telemetry – 便于开发者进行bug的捕捉和定位,但是过程中可能收集到访问链接、域名等信息,如您不愿意泄露类似信息给项目开发者,可在环境变量中添加disable_telemetrytrue来退出遥测。
    • 设置AllowRandom环境变量,值为true, 开启随即图API,网址后缀+/random

    1、页面自定义(DIY接口),【这个没搞懂,有知道的留言告诉我一下】

    类型写text就好了,这个json格式我也没搞懂,写正常json一直报错 – 作者

    环境变量增加USER_CONFIGJSON格式 选择TXT格式,具体字段用途及内容规范见下表。

    字段名用途类型内容规范
    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网站图标字符串只支持字符串类型,设置为你自定义的网站图标链接
    footerLink页脚传送门链接字符串只支持字符串类型,设置为你自定义的传送地址(如个人博客链接)
  • 利用Cloudflare Zero Trust中的Access来对自己的站点或某个页面加上身份认证

    利用Cloudflare Zero Trust中的Access来对自己的站点或某个页面加上身份认证

    本站收藏当前文章,主要是为了以后的纯静态化做准备,目前本站中有些不适宜公开的文章,如果使用服务器那当然没有问题,但是如果转纯静态化,那么这些私密的文章要么公开要么失去,故此,计划使用cloudflare的当前功能来对这些私密文章提供支持!

    这种方法要求网站必须是经过Cloudflare的,裸奔的大伙们想要用这个功能的话就得好好考虑是否要用Cloudflare了🤔
    Zero Trust不得不说真是神器,以后也还要多多探索一下Zero Trust的更多玩法😋


    正题

    首先进入Cloudflare Zero Trust控制台,选择侧边栏中的Access,进入Applications子页面。

    利用Cloudflare Zero Trust中的Access来对自己的站点或某个页面加上身份认证

    点击Add an application按钮,类型选择Self-hosted,进入Configure application页面。

    Configure application

    利用Cloudflare Zero Trust中的Access来对自己的站点或某个页面加上身份认证

    以图中为例,Application name可以是自己喜欢的任意名字,Session Duration则可以理解为这一次身份认证的有效期。Application domain按自己的实际需求来填。如果你想要只对某个页面使用Access的话,就填上要保护的页面的路径即可。
    这里我以我自己的测试页面为例。
    在Application Appearance这一栏中开启Enable App in App Launcher开关,开关下方的域名一般选择Use default。Application logo可以选择Custom,需要的话可以在按钮点选之后的Custom application logo中填入想要自定义的图标链接。

    利用Cloudflare Zero Trust中的Access来对自己的站点或某个页面加上身份认证

    页面下方的Block pages用于设置验证失败之后的提示页,Identity providers在你没有设置其他认证方式的时候保持默认即可。认证方式默认情况下只有 One-time PIN 这一种,这些对于大多数用途来说都足够了。你也可以在Zero Trust中的Setting-Login methods添加其他验证方式,这些都可以按需设置。
    点击Next,进入Add policies页面,这是最重要的一步了。

    Add policies

    利用Cloudflare Zero Trust中的Access来对自己的站点或某个页面加上身份认证

    Policy name填你自己喜欢的任意名字,Action一般是保持默认的Allow,Session time保持Same as the session timeout即可。
    策略类型中Allow可以简单理解为白名单,即符合该策略规则的用户可以通过,而Block则为黑名单规则相反,此外还有Bypass和Service Auth。

    利用Cloudflare Zero Trust中的Access来对自己的站点或某个页面加上身份认证

    接下来在Config rules中配置自己需要的身份认证规则。规则类型中Include类规则可以理解为白名单,而Exclude则相反。规则匹配也可以使用邮箱后缀、IP、按国家验证等等。
    以图中为例,如果想要用你的邮箱来验证的话,在Include类规则中选择Email,Value输入你的邮箱,可以添加多条规则。注意:这里如果填入邮箱的话一定要全部填小写,我就在这里踩过坑🤧
    下方的Addtional settings中可以设置申请临时身份验证,如果不需要可以留空。这一点就不多说了,有需要的大伙可以自行设置。
    点击Next,进入Setup页面。Setup页面还提供了跨域、Cookie 等配置,其中设置对大多数用途来说都可以保持默认,可以直接点击右下角Add application即可,有需要也可以自行设置。

    大功告成!

    如果没有意外,点击Add application之后会提示Application successfully configured,这时等待几分钟再访问要保护的页面,就可以发现已经生效:

    利用Cloudflare Zero Trust中的Access来对自己的站点或某个页面加上身份认证

    输入先前在Include中设置的邮箱,如果在没有设置过其他Identity providers而是保持默认的话,邮箱中此时就已经发来了验证邮件。

    利用Cloudflare Zero Trust中的Access来对自己的站点或某个页面加上身份认证

    你可以选择复制验证码到刚刚的验证页面,也可以选择点击邮件链接直接登录。

  • 保姆级教程免费搭建私有无限空间图床:基于 Cloudflare Pages 和 telegra.ph

    保姆级教程免费搭建私有无限空间图床:基于 Cloudflare Pages 和 telegra.ph

    关于本项目

    项目仓库(点击跳转)

    前端仓库(点击跳转)

    作者博客(点击跳转)

    本项目是 Telegraph-Image 的重制版

    这个项目为你提供了一个不限容量不限数量的图床 + cdn 服务

    图片存储在 telegraph 的服务器上 由 cloudflare 提供全球 cdn 服务

    基于 cloudflare pages 完全免费(现在 page 不限制额度了 和 worker 分开了)

    支持图片审查 API,可自动屏蔽不良图片

    可以自定义域名(也可以使用 cf 分配的 *.page.dev 但好像墙了 可以用其他 dns 的域名)获取域名可以看

    该项目在原项目的基础上加以完善 特色功能如下

    前后端全部开源 整体部署简单;

    添加了身份认证(解决了原项目的一个大问题,防止滥用);

    突破 5mb 的上传限制(超过了会自动压缩);

    流畅丝滑的过渡动画;

    多种上传方式(拖拽,选择文件,粘贴等);

    多样化复制方式(可直接复制 html,BBCode,MarkDown 语句);

    可以自定义页面,网站名称与 logo,满足更多自定义需求;

    增加了随机图 api;

    更多的欢迎大家自行探索

    界面图

    图床速度体验(点击跳转)

    实操部署

    部署此项目首先需要拥有一个 GitHub 账号(点击跳转)和一个 cloudflare 账号(点击跳转)

    并且有一个域名 不需要必须绑定在 cf 中 没有的话可以看下面两篇

    2024 可用的免费域名 us.kg!审核极快,可托管 cloudflare 手把手带你避开所有坑点! – yunsen2025 的小窝

    2024 可用超低价顶级域名!可支付宝,绑定 cloudflare 第二年续费同价! – yunsen2025 的小窝

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

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

    成功创建 fork 后来到 cloudflare 登录你的账号并打开仪表盘 点击侧边栏中的 “Workers 和 Pages

    点击上方的 “创建

    选到 “Pages” 一栏,点击 “连接到 Git

    在打开的第一个页面 点击 “连接到 GitHub” 随后会跳转到 GitHub 进行授权 选到 “All repositories”(该选项是默认的 啥也不用动就好)

    完成授权后会回到 cf 的选择存储库的界面(如下图),选择刚才 fork 的仓库后点击 “开始设置

    下一个界面啥也不用动,直接划到下面点击 “保存并部署即可

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

    到此,最基本的已经部署好了,下面是设置认证码与后台管理的账号密码

    点击 “自定义域” 添加一个你自己的域名(域名不是必须在 cf 中 在其他的 dns 中也行 但是还要额外配置比较麻烦)

    点击左侧栏中的 “KV”(在 Workers 和 Pages 菜单下)

    点击 “创建命名空间

    名称为 “img_url” 点击 “添加

    完成添加后 回到 page 的界面 点击 “设置” 后点击 “函数

    划到下面找到 “KV 命名空间绑定” 点击 “添加绑定

    变量名称” 填写 “img_url

    KV 命名空间 “选择刚才创建的 KV “img_url” 完成后点击保存

    在 “设置” 下找到 “环境变量

    选择左侧的 “环境变量

    在这里有些常用环境变量可以添加 如下表

    变量名称作用是否推荐
    BASIC_USER后台管理的账户名推荐
    BASIC_PASS后台管理的密码推荐
    AUTH_CODE前台的认证码强烈推荐 防止他人滥用
    ModerateContentApiKey图片审查 api 怎么用后面会讲到 这里是填获取的 api 
    ALLOWED_DOMAINS防盗链 访问域名限制
    多个允许的域名用英文 , 分割,如:域名.com,域名2.top
    没必要 反正流量无限的速度也不受影响 还可能造成自己的不便
    AllowRandom随机图 api 的前置 后面会讲到 

    (还有关于界面自定义的变量 可以去 GitHub 看 个人不推荐界面大改 一是麻烦 二是还要动前端)

    下面是我的配置(值里面填你实际的)

    (觉得比较敏感的可以点击右侧的加密 这里就单纯的是以后看不到值的内容了 没其他实际作用)

    完成后点击保存 然后重新部署(所有关于环境变量的修改都要重新部署一遍)

    选到 “部署” 一栏 在 “所有部署” 下面找到你最新的部署(就是最上面的那一个),鼠标点击在右侧三个点 在弹出的菜单中选择 “重新部署

    等待部署完成后即可使用

    内容审查 api

    最近不知道官网怎么了 没有注册入口了 直接进以前的注册入口 moderatecontent.com/signin 会报 500 错误,不知道是跑路了还是服务器崩了 最近暂时用不了 需要的还是设前台认证码吧

    打开 moderatecontent 官网(点击跳转)

    注册账号后获取到你的 api 在环境变量中添加一条 “ModerateContentApiKey” 值就是你获取的 api

    保存后别忘了重新部署一遍

    随机图 api

    在设置好环境变量后访问 https://your.domain/random