在Cloudflare上部署图床

背景

之前已经把博客从clawcloud上迁移到cloudflare上，图片也需要从clawcloud上部署的EasyImages迁移到其他地方。

技术选型

Cloudflare的R2对象存储，有10G的免费空间，并且不收下行的流量费用，只收取存储费用，简直是搭博客图床的最佳选择，毕竟只是作为图床使用的话，10G的存储空间应该都够我存上万张图片了（前提是图片要经过压缩）。
只是需要注意一点，开通R2存储需要绑定支付方式，我为此还专门申请了一张VISA卡。为此我还看了不少银行的外币卡推荐，基本都是免年费的，没什么持有成本，而且我所开的招行卡，招行App上能一键关闭交易，需要交易时临时打开即可，不怕盗刷风险，所以也就放心大胆的开整吧。不是广告，哈哈哈。

另一个需要注意的是，如何方便的上传图片到R2存储中？
我看了不少相关的帖子和视频，最终选择了PicGo，这是一个开源的图床上传工具，使用起来非常方便。同时它支持插件，可以在上传之前，加水印、压缩图片等等，完全符合我的需求。
当然，你在本博客上看到的图片，都是通过PicGo上传的，也是加了水印和经过压缩的。

最终技术方案如下：

Cloudflare R2 – 图片存储
PicGo – 图片上传
TinyPNG – 图片压缩

tinypng插件 – 压缩图片的插件
picgo-plugin-s3 – 图片上传到R2的插件
picgo-plugin-watermark-elec – 图片添加水印的插件

搭建流程

创建R2存储桶

注册Cloudflare账号，绑定支付方式开通R2，这些就不赘述了很简单。

开通了R2之后，点击创建存储桶

填写存储桶名称，位置自动，存储类选择标准即可，然后点击创建

创建成功后，可以看到桶的详情，同时也可以在这里手动上传文件了。

先手动上传一张图片试试。

图片是上传成功了，如何拿到它的url，嵌入到博客中呢？
可以看到，公开访问这里，现在是处于禁止状态，点击设置，现阶段可以启用公共开发URL，后续建议启用自定义域

启用后可以看到开发用的URL，如下：

那么刚才的图片，地址如下：
https://pub-a3e6207ebe4c46cea2778f7d6c242b9c.r2.dev/2382A36E-701F-4789-9345-236BE99692CE.png
如果配置了自定义域，则访问地址如下：
https://<你的域名>/2382A36E-701F-4789-9345-236BE99692CE.png

Tips：需要特别提一句的是，R2是对象存储服务，不仅仅能存图片，任何文件都可以。

配置PicGo实现一键上传

先从PicGo官网下载安装。安装好的界面如下：

PicGo支持多家、多种类型的对象存储服务商，诸如阿里云的OSS、腾讯云的COS、亚马逊的S3等，而R2是兼容S3协议的，所以我们在此处使用亚马逊的S3模板即可。
但是，PicGo默认没有S3模板，需要安装插件。
在插件管理中，搜索s3-lls，点击安装。安装完成之后，图床设置中会新增一个Amazon S3这个模板选项。
在图床设置中，选中Amazon S3，选择新增一个配置。

可以看到，配置项还是不少，下面列出必须要配置的项目。

在R2管理页面，选择管理API令牌：

选择创建Account API令牌，填入信息，有效时间建议就永久了。

创建成功之后，可以看到相关的ID和密钥，记得存好，这些信息后续就看不到了，只显示一次。

最终配置效果：

配置完成之后，就可以开始使用图床了。
左侧选择上传区，拖动一张图片去上传，等待进度条走完之后，就上传成功了。
此时，去Cloudflare的存储空间中查看图片，就可以看到上传的图片了，并且也按照日期存放在响应的目录中。

另外，可以看到上传界面的底部，有多种链接格式可以选择，如markdown，html，url等等。
上传完成之后，响应的引用已经添加到剪切板了，直接到博客中粘贴即可，如下所示：
![](https://images.664663.xyz/images/2025/07/8158741c2adf1a0ffced9bf2feecbdbe.png)

添加水印和自动压缩

10G的免费空间虽然不少，但是如果图片比较大，经过多年累积之下，肯定也会超标的。而且图片过大，博客文章的访问加载速度也会变慢。图片进行一下压缩，不仅能节省空间，也能加快网页的加载速度，所以，图片的压缩就变的必不可少了。
其实在很久之前，我也就用过 TinyPng 来进行图片压缩，不仅能在网页上直接上传图片压缩，TinyPng还贴心的提供了API供调用，免费用户每月有 500 张的压缩额度。

此外，如果你的博客配图，不想被别人盗用，那么图片添加水印，也是必不可少的了。
方便的是，这两个功能都有现成的插件可供使用，只需要安装插件，简单配置一下就可以实现这两个功能了。

从TinyPng 获取 API 密钥此处就不赘述了，大家自行完成，很简单。

压缩图片

在插件设置中，搜索tinypng，进行安装。安装完成之后，点击插件卡片右下角的⚙，选择配置插件，进入插件设置页面。

填入密钥，并保存。记得点击插件卡片右下角的⚙，启用插件。此时再次上传一张图片测试，可以比较原图和R2中的图片大小，确认图片是否已经压缩了。

添加水印

在插件设置中，搜索watermark-elec，进行安装。安装完成之后，点击插件卡片右下角的⚙，选择配置插件，进入插件设置页面。

配置好保存，再启用插件即可。可以再上传一张图片，确认是否已经添加水印。

完结

至此，Cloudflare上搭建的图床已经完成了，同时也能方便的进行图片上传，压缩，加水印，一条龙~
对于TinyPNG的每月500张图限制，作为博客来说，应该是完全够用了，如果你不够用，花钱就行，这都不够用了，估计你也不缺这点费用了。其实我也在想，有没有其他的压缩方案？比如自己搭建开源的服务？不过要结合PicGo的话，怕是也麻烦。后面有空再找找有没有替代方案吧。
watermark-elec倒是不用api，没啥好说的。
R2只是收取存储费用，不收取流量费用，这一点非常nice，有时候可以帮我们节约很多money，虽然我的博客没有被攻击过，但是我看到别的博主有遭受过攻击，如果你使用的是流量要收费的云商，可能给你跑出去非常多的费用。

完结✿✿ヽ(°▽°)ノ✿

附：

本文所使用PicGo版本和插件版本如下图：