利用cloudflare和Telegraph搭建免费图床

前言

在搭建网站的过程中不可避免的要上传不少图片,但是如果都放在本地的话访问就会很慢,如果放在存储对象里就可能有被盗刷的风险,于是一个完美的解决方案就来了。

那就是依靠cloudflare的免费额度和github开源项目Telegraph。

教程

首先去cloudflare官网申请一个账号,顺便github也申请一个。

然后打开项目地址:https://github.com/cf-pages/Telegraph-Image,把项目fork到你自己的项目里。再完成接下来的步骤

1、进入Workers和Pages概述界面

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

2、连接Github项目

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

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

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

接着,选择Only Select repositories,并选择上面fork好的项目,然后点击Install & Authorize按钮,确认完成授权和开始安装:

最后,Github可能会要求你输入账号密码,以确认上面的授权。输入你的Github密码并Confirm即可:

3、部署到Cloudflare

上面确认授权后,会从Github自动跳回到Cloudflare中,继续开始后续的部署设置。

首选,选中上面授权好的Github项目,点击开始设置

项目名称可以改成你自己喜欢的,生产分支建议保持默认的main,其他的不要动:

拉到页面下面,点击保存并部署,等待Pages自动部署项目:

当看到成功提示时,表示我们的图床已经部署完成了。此时Cloudflare自动分配了一个默认的域名,直接点击即可打开图床的上传页面:

如下图,Telegraph的上传界面非常简洁,直接点击选中上传图片或视频按钮即可进行上传:

设置图床

以上过程就完成在Cloudflare中部署Telegraph图床系统了,不过这时候还存在一些问题,包括如何管理用户上传的内容?如何绑定自己的域名?如何审查用户上传的内容是否违规?下面一一来解答。

一、配置管理后台

Telegraph的后台管理功能和登录验证功能默认都是关闭的,我们仅需对部署的Pages项目进行一些设置就可以开启这些功能了。

1、创建KV命名空间

打开Workers和Pages——>KV管理界面,然后点击右上角创建命名空间按钮,创建一个名为img_url的命名空间:

2、查看Pages项目

回到Workers和Pages——>概述界面,找到上面部署好的Telegraph项目,直接点击名称,进入项目的详情页面:

3、绑定KV命名空间

点击设置-函数,拉到页面的下面,找到KV命名空间绑定模块:

点击添加绑定按钮,将变量名称KV命名空间均设置为img_url,然后保存:

4、设置管理后台登录验证

切换到环境变量页面,点击制作中的添加变量按钮,添加两个环境变量:

变量名分别是BASIC_USERBASIC_PASS,分别代表管理员的用户名和密码,然后保存:

当然,你也可以不设置这两个变量,这时候管理后台就是无需验证即可登录。但是你可以结合Cloudflare Access服务实现支持邮件验证码、Microsoft、Github等第三方帐号登录方式,更加灵活强大。如果使用Cloudflare Access,则需要对/admin/api/manage/*两个路径进行保护。由于不是本文的重点,笔者就不展开了。

5、重新部署

做完以上的操作并不会立即生效,需要重新部署下系统才可以。

重新部署也非常简单,点击查看详细信息,在项目部署详情信息页面的右上角有个管理部署,点击其中的重新部署,等待重新部署完成即可。

6、登录管理后台

以上步骤操作完就实现了图床系统的管理后台功能和登录验证功能的设置,可以输入图床域名+/admin路径,就能打开管理后台了。例如:https://telegraph-image-xxx.pages.dev/admin:

打开后,在弹出框中输入上面设置好的用户名和密码即可:

管理界面有点简陋,可以看到图片的状态信息,也可以对图片进行黑/白名单设置或删除操作:

二、绑定自定义域名

Cloudflare自动分配的域名不好记(当然,如果你能忍受就可以不自定义),我们可以设置成我们自己的域名,方便使用,设置也很简单。

1、进入Pages项目

同样先进入项目页面,切换到自定义域页面:

2、添加自定义域

点击设置自定义域,输入你自己想用的二级域名,并点击继续按钮:

3、激活自定义域

可以看到Cloudflare将自动在域名DNS中添加一个CNAME解析记录,将自定义域名指向默认分配的域名。直接点击激活域按钮,然后等待验证即可:

4、使用自定义域

自定义域验证完成后,而且自动帮你配置好了SSL证书,非常贴心了。此时就可以使用新的域名访问你的图床系统了。例如

https://imghub.yourdomain.com/

三、开启内容审查

图床中上传的图片或视频默认是不经过审查的,上传后就可以被访问了。作为一个上传无需登录的图床,没有审核还是很危险的。如果被人恶意上传了不法内容,作为域名持有人,躺枪荣获"银手镯"就不妙了。Telegraph支持使用“moderatecontent”来进行自动内容审查,下面进行简单的配置就可以开启这项功能,强烈建议开启

1、获取API Key

打开"moderatecontent.com"网站,点击SIGN UP,输入你的邮箱,点击SUBMIT,界面上就直接为你生成API Key,复制并保存下来:

2、设置环境变量

与上文中设置管理后台登录验证的步骤一样,到项目的设置——>环境界面中,添加一个环境变量,名称为:ModerateContentApiKey,值就是上面获得的API Key。

3、重新部署

同样的,做完以上的操作并不会立即生效,需要重新部署下系统才可以。

特别说明:开启图片审查后,因为审查需要时间,首次的图片加载将会变得缓慢,审查完成后的图片加载由于存在缓存,就不会受到影响了。

更新图床系统

如果Telegraph-Image项目更新了,如何才能更新自己部署的图床呢?

很简单,如果项目更新后,需要添加新的KV命名空间或环境变量,则先在Cloudflare的项目中配置好。然后到你自己的Github中,在Telegraph-Image项目页面上点击Sync fork——>Update branch即可。

更新完成后,稍等一会,等Cloudflare Pages那边检测到你的仓库更新了之后就会自动部署最新的代码了。

THE END