跳至主要内容

零成本!无需服务器,使用 CloudFlare R2 + Pages 搭建永久免费图床 WordPress果酱

 我们之前做 CloudFlare R2 的教程: Cloudflare R2 对象存储白嫖指南:10G存储+免流量费,打造免费图床 ,但是还是需要自备服务器,但是群里面小伙伴就来问,可否连自备服务器也省了,直接白嫖到底呢?

 

  CloudFlare-ImgBed  

  对于 CloudFlare 赛博大善人来说,还真的可以!没错,还真有个叫做 CloudFlare ImgBed 的开源程序就可以实现大家的愿望。��

 CloudFlare ImgBed 是一个基于 Cloudflare Pages 的开源文件托管解决方案,为用户提供免费、稳定、高效的文件存储服务。项目支持多种存储渠道,支持无服务器和有服务器部署方式,满足不同用户的需求。看一下它的技术架构:

 组件

 技术方案

 前端

 基于 Vue.js 开发,支持响应式设计

 后端API

 基于 Cloudflare Workers 构建的无服务器架构

 存储

 支持多种存储后端(Telegram、R2、S3

 数据库

 使用 Cloudflare KV 存储元数据

 

 下面看一下截图:

  

  

  

  

  项目地址:  https://github.com/MarSeventh/CloudFlare-ImgBed  

  演示站点:  https://cfbed.1314883.xyz/  访问密码:    cfbed  

  准备工作  


  1个域名托管到CF(作为图片直链、图床程序的访问域名)

  1个Github账户(用于复刻和快速启动图床项目)

  1个CloudFlare账号(用于白嫖下面的服务��)

 

  R2 对象存储(10G空间内免费,不限出口流量)

  Pages 静态托管(运行图床程序)

  KV 数据库(存储图床设置)

 R2对象存储需要绑卡激活外,其余的CF服务都可以白嫖(每天10万次请求,达到暂停)。对象存储空间在10G内也不会产生费用,具体可以看下 R2的介绍 

  Fork 项目  


 打开Github项目地址:  https://github.com/MarSeventh/CloudFlare-ImgBed  

 点击 Fork 复刻一份到你的仓库,什么都不用改动。

  

  创建 Pages 项目  


 登录CloudFlare -【计算 Workers】-【Workers 和 Pages】-【创建】

  

 Pages】-【导入现有 Git 存储库】,添加你的Github账户,并选择 Fork 的 CloudFlare-ImgBed -【开始设置】

  

  名称:    cloudflare-imgbed    (随意,可不改)

  产生分支:    main    (默认)

  框架预设:无

  构建命令:    npm install  

  输出目录:不用填(默认根目录)

  

 等待几分钟,就可以通过分配的域名访问了(国内pages.dev域名会打不开,稍后再设置)

  绑定 KV 数据库和 R2 对象存储  


 【存储与数据】-【KV】-【Create Instance】

  

 命名空间名称:    img_url    (建议用这个,创建后什么都不用做)

  

  Pages 里面绑定:KV 数据库、R2 对象存储

  

  变量名:    img_url    ,选择创建的 KV数据库

  变量名:    img_r2    ,选择你之前设置的R2桶

 之后【重新部署】,让其生效

  

 顺便绑定个图床程序的域名

  

 到此 CloudFlare-ImgBed 部署完毕,访问设置的域名即可!

  推荐设置  


 访问图床程序域名,右下角进入【设置】

  

 左上角切换到【系统设置】-【上传设置】,设置并开启CF R2存储

  

 【安全设置】里面可以设置上传密码和管理员账户密码

 

 如果要图片链接与R2那边的域名   完全一致   ,【网页设置】-【默认URL前缀】设置为R2域名(有后斜杠)!

 (方便于以后迁移别的程序,或者是直接后台管理)

  

 

评论

此博客中的热门博文

用了 Claude Code 之后,我不再续费 Cursor 了!国内使用 Claude Code 教程 原创 周星星 摆烂工程师

最近深度使用了一段时间的Claude Code,总体感觉: 快、准、贵 。 谷歌也出了对应的Gemini Cli,但是有人翻出对应的源码之后,发现是逆向了Claude Code。 两者我都体验使用过了, 个人感受:Claude Code 强于 Gemini Cli 。 我简单的让Claude Code 生成一个网页介绍如何安装和使用,几十秒之后就完成了。