Cloud flare 搭建免费图床

1 准备工作

一个Cloud flare账号

一个可以绑定Cloud flare 的付款方式(可以用国内PayPal,比较方便)

2.开始搭建

登录Cloud flare后,绑定付款方式,点击R2,将R2订阅到我的账号

1697723538445

点击创建储存桶按钮,输入储存桶名字,选择一个离自己比较近的地方放储存桶

创建储存桶

选择地区

3 设置储存桶

点击设置,设置公开访问选项:

绑定自定义域名,没有域名就买一个,然后在托管到Cloud flare中,绑定好域名,Cloud flare会自动DNS解析,并开启CDN缓存

设置储存桶

设置自定义域名

这样就能通过域名访问图片了

4 PicList上传

我们平时上传图片到cloudflare R2可以使用piclist来上传,piclist使用picgo的增强版,增加压缩图片和转换格式等功能

PicList跟Picgo的区别

4.1 安装S3插件

点击插件,输入S3,然后安装最新的版本

安装S3插件

4.2 配置 Cloud flare R2连接

选择图床的S3,然后新增一个连接

配置Cloudflare R2连接

4.3 创建Cloud flare R2 令牌

创建cloud flare R2令牌

点击创建API令牌按钮

开始创建

API令牌权限选择读和写

设置API令牌的权限

4.4 将API密钥填入picList的S3插件中

将API密钥填写到插件中

域名需要加https,其他照抄就行

补充一下:途中地区为空,可以正常上传图片到图床,但是在使用PicList删除云端图片时会出现删除失败的情况,解决办法是地区填:auto

看图配置s3其他配置

这两个选项不用打开

可以忽略的选项

测试一下,上传成功

上传成功截图

5 typora上传

typora支持PicList啦

只需要在上传服务选择PicList,然后再选择PicList所在的路径即可

typora使用PicList上传设置

在typora中点击图片右键选择上传,我们可以看到,在typora上传图片到Cloud flare R2成功了

image-20231022160336651

5 进一步无损压缩(tinypng)

把图片转换成webp格式对网站比较友好,且在保持较高清晰度的同时还能极大压缩图片的大小

现在在这个基础上使用tinypng增加一个无损压缩步骤,进一步压缩图片大小且不改变清晰度

工具:https://tinypng.com/

每个月有500次无损压缩免费额度

image-20231022170925952

使用了tinypng后,你会发现上传图片到图床变慢了,这是因为图片会先上传到tinypng的服务器无损压缩后再下载下来,然后转换格式再上传图床,如果是隐私照片,不建议使用tinypng,像写博客,做独立站这些图都是给外界看的,那就无所谓啦

5.1 申请 API

点击API,然后输入名字,邮箱申请API密钥

image-20231022160856624

image-20231022161353709

5.2 登录tinypng

申请完API后,点击登录按钮,输入邮箱地址,获取登录链接

image-20231022161745245

5.3 查看API

登录成功后,点击查看你的账户即可查看API

image-20231022161928582

image-20231022162046477

5.4 安装tinypng和配置插件

在PicList中安装tinypng插件,我这里已经安装了,正常情况下点击安装按钮

image-20231022162243111

然后开始配置,图床配置名是我刚刚用S3链接Cloud flare R2时设置的图床配置名,在步骤4.4的图中可以看到,key填写自己刚刚申请tinypng的key

image-20231022162408918

配置完成后,启用tinypng插件

image-20231022162750889

5.5 效果

这是一张原图像素为4096×4096,大小为14.5M的图片

原图:14.5M

image-20231022163004986

webp格式:880K

image-20231022163409844

tinypng+webp格式:688K

image-20231022163754949

缩小对比:

image-20231022164039327

放大对比

即使压缩和转换格式后放大对比,细节还是非常强的

image-20231022164616088

image-20231022164650262

image-20231022164846322

5.6 加载速度

国内加载速度

我将储存桶选择了亚太地区,搭配着Cloud flare自家的免费CDN在国内加载基本是1S内,放在网站和博客的图片打开非常快,算是意外的惊喜,(之前用七牛云家的亚太储存桶,打开基本要2-3S左右)

image-20231024210441145

国外加载速度

搭配了Cloud flare 的CDN,国外的加载速度只会更快

image-20231024211151097