前言：
最开始的时候我的图床是搭建在甲骨文云上面的，那时候对于图床的稳定性没有过多的要求，但是后续真正应用到博客上面的时候，直接崩溃过一次，没错甲骨文云账号被限制权限了。
秉持着对于白嫖的执着我又换到了另一个用了几年的甲骨文云，一直稳定至今，但是前几天一次证书 失效导致站点图片全部失效的经历，让我也陷入了沉思，现在的博客文章多了起来，数据也不像之前那样少了，万一哪天又被限制权限了，到时候就来不及了。
然后就想到了我们的大善人【Cloudflare】再加上它支持【S3】上传，而【PicGo】恰好也支持，并且弥补了每次都要登录【Cloudflare】账号才能上传的尴尬，然而这种方案上传的图片都是原图显示，也不利于加载，此时【WebP Cloud】的作用就来了，它可以对图片进行代理，并且会对图片进行压缩，速度、体积都得到了优化，这简直就是我的梦中情床方案。
【Cloudflare R2 + WebP Cloud + PicGo】的方案尽管牵扯到了多个组件和平台，但所有操作都在 Free Plan 中，也是我最终选定的方案，下面将从零开始介绍如何搭建这个免费图床系统。
开始搭建
1.配置Cloudflare R2
R2 是 Cloudflare 推出的免费对象存储服务，需要免费注册一个 Cloudflare 账号才能使用，注册登录后，点击左侧边栏的 R2 访问服务，但需要注意的是开通 R2 服务需要绑定信用卡（国内外主流信用卡皆可），但并不会扣费，主要是为了验证用户身份使用。
打开【R2】，创建一个存储桶，位置这里选择【美西】，因为后续【WebP Cloud】里面我们也会选择美西，对图片进行优化，当然您也可以选择其他区域。
打开存储桶，我们打开【设置】界面进行一些配置
首先我们需要打开【R2.dev 子域】，这是为了后续访问图片时需要的公网地址，点击【允许访问】，并按照提示输入【allow】即可开启。
由于分配的网址比较长，不易于记忆，我们可以通过【自定义域】来绑定我们的专属域名，点击【连接域】按钮。
输入自己想绑定的域名，如 img.test.com，点击继续。连接域，并等待 DNS 解析生效即可。
完成后 bucket 状态处【公共 URL 访问】显示“已允许”，且【域】显示为我们刚自定义的域名即配置成功。
当我们完成上述配置后，可以回到存储桶【对象】界面，上传一张示例图片，点开详情则会显示该图片的访问地址，此时我们就拥有了一个可访问的图床服务了。
但每次都要打开 【Cloudflare 】页面手动上传图片的方式显然不够便捷。【R2 】提供了【 S3 】兼容的【API】，可以方便地使用一些客户端&命令行工具进行上传、删除等操作。
此时我们回到【R2】主页面，点击右上角【管理 R2 API 令牌】，进入后点击【创建 API 令牌】。
【令牌名称】自定义，【权限】给【对象读和写】，【指定存储桶】选择刚才创建的，其他的不用管，直接创建即可。
完成创建后会显示所有密钥，我们使用 PicGo 需要的是下面三个信息，不过因为只会显示一次，建议在密码管理软件或其他地方妥善保管好这些参数信息。
至此，我们需要在【Cloudflare R2 】上配置的部分就完成了，接下来我们需要配置【PicGo】 客户端。
2.配置【PicGo】 客户端
【PicGo】 是一个用于快速上传并获取图片 【URL】 的工具软件，有着较为丰富的插件生态，支持多种图床服务，其 【GitHub】 仓库为【GitHub - Molunerfinn/PicGo】，可以下载对应平台客户端使用。
打开【PicGo】 客户端，点击【插件设置】界面，搜索【s3】,选择相应版本进行安装即可
打开【PicGo设置】界面，拉到最下面，可以把我们不需要的图床勾选都去掉
依次打开【图床设置】、【Amazon S3】并填写对应信息
这里有几项配置需要尤其注意：
- 应用密钥 ID，填写 【R2 API】 中的 【Access Key ID】（访问密钥 ID）
- 应用密钥，填写 【R2 API】 中的【 Secret Access Key】（机密访问密钥）
- 桶名，填写 R2 中创建的 Bucket 名称，如我上文的
img - 文件路径，上传到 R2 中的文件路径，我选择使用
{fileName}.{extName} - 自定义节点，填写 【R2 API】中的【为 S3 客户端使用管辖权地特定的终结点】，即
xxx.r2.cloudflarestorage.com格式的【S3 Endpoint】 - 自定义域名，填写上文生成的
xxx.r2.dev格式的域名或自定义域名img.test.com
其他配置保持默认即可，确认参数无误后点击【确定】与【设置为默认图床】即可。
完成上述配置后，我们就可以在【上传区】直接拖入文件进行图片上传了，如上传后显示无误则为配置成功，生成的链接会自动在系统剪贴板中，直接在需要的地方粘贴即可。
3.配置WebP Cloud
【WebP Cloud】简单来说这是一个类【CDN 】的图片代理【 SaaS 】服务，可以在几乎不改变画质的情况下大幅缩小图片体积，加快整体站点加载速度。发展到现在除了图片体积减少外，还提供了缓存、添加水印、图片滤镜等更多实用的功能，并提供了自定义【Header 】等配置选项。
首先通过 GitHub 授权登录 WebP Cloud 平台。
在右下角找到【创建代理】并打开
为了优化国内访问，我【Proxy Region】选择的是美西【Hillsboro, OR】区域 【Proxy Name】填写一个自定义名称即可 【Proxy Origin URL】，比较重要，需要填写上文我们配置好的【R2 】自定义域名img.test.com ，如果没配置自定义域名则填写【R2】提供的xxx.r2.dev 格式的域名
图中【Basic info】部分【Visitor】下显示的以xxx.webp.li 格式即为我们的代理地址。
例如我们之前通过【PicGo】上传到【R2】的文件 img.test.com/new_mbp_setup.jpg 则可以用 xxx.webp.li/new_mbp_setup.jpg 这一链接进行访问。
当然也支持自定义域名，详情请参考官方文档配置 Custom Domain | WebP Cloud Services Docs
此时我们回到【PicGo】【图床设置】中，将【自定义域名】改为我们刚配置的【WebP Cloud】代理地址，即格式为 xxx.webp.li 的代理链接或其他自定义域名。
【WebP Cloud】免费用户每天有【2000 Free Quota】，即能够代理【2000】次图片访问请求，并提供【100M】的图片缓存，对于一般用户来说完全够用，如有一些流量较大的特定时期也可以购买额外【Quota】，价格很便宜。
如超过了【Quota】，访问则会被【301】转发到源站图片地址，不经【WebP Cloud】服务压缩，但依然可用；超过【100M】的缓存则会按照【LRU】算法清理，所以依然能够保障一些高频请求的图片能够有较好的访问体验。
配置隐私保护（可选）
1.让用户只能通过【WebP Cloud】代理链接访问到我的图片，禁止直接访问原图链接
1.1我们登录【WebP Cloud】的控制台，将【Proxy User Agent】字段设置为一个自定义值，如 test.com/1.0。
1.2【CLOUDFLARE WAF】 配置
【WAF】是【Cloudflare】提供的一个防火墙服务，可以自定义规则来限制特定请求以保护网站安全，登录【Cloudflare】 后在左侧边栏点击【网站】，点击进入需要保护的域名，选择侧边栏【安全性】- 【WAF】即可免费使用（注：是域名里面的 WAF，免费账户可设定五个自定义规则）。
首先，需要把其中 test.com/1.0 这部分填入上文在【WebP Cloud】中你自定义的【User Agent】值；另外，为了防止我在同一域名下的其他自部署服务的图片无法正常显示，我添加了 (http.host eq "img.test.com") 条件，即只对图床的访问链接生效，这部分需要替换为自己的图床域名【host】。
可直接点击【表达式预览】右侧的【编辑表达式】，填入以下规则（注意替换为自己的）：
(http.user_agent ne "test.com/1.0") and (http.host eq "img.test.com")并且在【选择操作】下拉选择【阻止】，这样会匹配我们的规则并阻止特定网络请求，编辑完成后点击【部署&保存】即可。
此时便已经实现了我们的需求，用户只能通过【WebP Cloud】代理链接访问到我的图片，访问原图链接会被拒绝，如下图所示：
2.使用【WebP Cloud】为图片添加版权水印
回到【WebP Cloud】 控制台，选择左侧【Visual Effects】，并点击右上角【Create Watermark】，就可以进行一些自定义水印样式配置了。
需要注意的是，【WebP Cloud】会为用户缓存图片数据，因此若想要之前上传的图片也应用水印或更新了新的水印则需要在代理配置中点选【Purge All Cache】来清理缓存。
编辑完水印后，进入代理的详细配置页面，下拉到【Watermark Setting】模块，选取刚创建的水印，点击右上角【Save】即可。
