使用Cloudflare+Telegraph搭建零成本图床系统

关于图床,做过建站或写博客的朋友应该都不陌生。市面上用于搭建图床的系统有很多,五花八门。单说免费开源的就有PicGo、Chevereto、easyimage、兰空等等,一般都需要购买第三方的OSS服务作为存储底层,或者是基于Github存储搭建的一些方案。笔者今天介绍的这个与基于Github的方案有点类(白)似(嫖),是基于Cloudflare Pages服务和开源图床项目Telegraph来实现。

核心原理就是利用Cloudflare Workers和Pages的免费额度,将图床系统和图片储存都托管在Cloudflare网络中,从而实现一毛不拔!

温馨提示:本保姆级教程全文比较长,请耐心看完哦~~

前提条件

  • 拥有Github帐号
  • 拥有Cloudflare帐号
  • 最好拥有1个域名并托管在Cloudflare中(域名可能要拔点毛)

部署方法

一、Fork 项目

打开项目https://github.com/cf-pages/Telegraph-Image,登录自己的Github帐号,然后Fork这个项目。

1、Fork Telegraph项目

在项目主页点击Fork按钮

2、设置Fork

页面中什么都不要改,直接点击Create fork按钮,等待片刻就创建完成了。这时候你自己的Github中就有了这个项目的镜像。

二、连接Github仓库和部署图床

1、进入Workers和Pages概述界面

在Cloudflare主页,点击左侧Workers和Pages——>概述菜单

2、连接Github项目

首先,点击右上角创建应用程序,跳转到创建应用程序页面,并切换到Pages界面:

点击页面中的连接到Git按钮,在弹出界面中选择Github,并点击连接Github按钮:

之后,Cloudflare会自动引导你到Github授权页面,如果没有登录Github,则会先到登录界面:

接着,选择Only Sele

### 使用 Cloudflare 搭建图床 #### 准备工作 为了使用 Cloudflare 搭建图床,需要拥有一个域名并将其 DNS 解析托管给 Cloudflare。完成此操作后,在 Cloudflare 控制面板内启用 SSL/TLS 加密功能以确保图片加载的安全性[^1]。 #### 创建存储桶 选择 Amazon S3 或其他支持 CORS 的对象存储服务作为实际存放图片文件的地方。创建一个新的存储桶,并设置公共读取权限以便于通过 URL 访问上传的图像资源[^2]。 #### 配置 Workers 脚本 利用 Cloudflare 提供的边缘计算平台——Workers 来编写简单的 JavaScript 代码处理 HTTP 请求并将请求转发到指定的对象存储位置。下面是一个基本的例子: ```javascript addEventListener('fetch', event => { let url = new URL(event.request.url); // 修改为自己的S3 bucket地址 const s3Url = 'https://your-s3-bucket-url'; if (url.pathname.startsWith('/img/')) { let path = url.pathname.replace(/^\/img\//, ''); return event.respondWith( fetch(`${s3Url}/${path}`, { cf: { cacheEverything: true } }) ); } }) ``` 这段脚本会拦截所有 `/img/*` 形式的路径访问,并将这些请求重定向至设定好的 S3 存储桶中对应的文件夹下查找相应图片[^3]。 #### 设置缓存策略 为了让用户的浏览器能够更高效地缓存静态资源,在 Worker 中可以自定义响应头来控制缓存行为。比如上面例子中的 `{ cf: { cacheEverything: true } }` 就是用来指示 Cloudflare 对该类请求开启全局 CDN 缓存优化[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值