Cloudflare R2+PicGO+WebP Cloud搭建图床

起因

个人博客，一个稳定的图床是必不可少的，我们需要把博客中需要用到的图片，上传到图床。然后图床会给你上传的每张图片，都生成一个网址。这样你就可以在自己的博客中，使用这些网址来加载需要的图片了。
当前图床的实现方案有很多种，有免费的公共图床、使用 GitHub 仓库作为图床、自建图床等多种方式。大家可以根据自己的使用需，要来选择使用。没有最好的方案，只有最合适的方案。
博主自己尝试过使用Github仓库作为图床，后来使用七牛云作为图床，直到前段时间使用halo搭建博客之后，使用halo的附件功能作为图床，但是终归只是临时的选择，今天就选择Cloudflare R2+PicGO+WebP Cloud搭建一个属于自己的图床。

准备工作

Cloudflare 账号： 前往注册
(可选) 域名： 用于创建自定义图片链接 (如 img.test.com)。需要一个已在 Cloudflare 管理的域名。
PicGo 客户端： 下载安装
WebP Cloud 账号： 前往注册

创建并配置 Cloudflare R2 存储桶

创建存储桶

登录 Cloudflare 仪表盘: 访问 Cloudflare Dashboard
进入 R2 页面: 侧边栏找到 R2 点击进入。
创建存储桶:
1. 点击创建存储桶
2. 存储桶配置
  - 存储桶名称: 输入一个有意义的名字 (如 img)。
  - 存储位置: 可选择离你或读者较近的区域，或保持默认。点击 创建存储桶。
  - 显示此界面时说明创建成功了
启用公共访问:
1. 在存储桶详情页，找到 设置 -> 公开开发URL ，点击启用。
2. 阅读提示，在输入框键入 allow 后点击允许。
（可选）设置自定义域名:
1. 在存储桶详情页，找到 设置 -> 自定义域 ，点击添加。
2. 输入你计划用于图床的子域名 (如 img.test.com)，点击 继续。

创建 API 访问令牌

回到 R2 主页或侧边栏，找到 API -> 管理 API 令牌。
右上角点击创建AccountAPI令牌
API 令牌配置
- 令牌名称: 起个名字 (如 R2 Account Token)。
- 权限: 选择 对象读和写 (确保权限足够 PicGo 上传管理文件)。点击创建令牌.
立即安全地保存令牌值、访问密钥ID、机密访问密钥、为 S3 客户端使用管辖权地特定的终结点，后文配置PicGo将会用到，关闭页面后将无法再次查看！

PicGo 配置

插件安装

打开 PicGo 应用
进入插件设置
搜索s3，通常为第一个插件，点击安装

配置 S3 图床

进入 图床设置 -> 找到并点击 Amazon S3。
填写以下信息：
* 图床配置名: blog-img (自定)
* 应用密钥 ID: 填入之前保存的 访问密钥 ID。
* 应用密钥: 填入之前保存的 机密访问密钥。
* 桶名: 填入你创建的存储桶名称 (如 img)。
* 上传文件路径 (可选): 推荐 {year}/{month}/{fullName} 或 {fileName}.{extName}。这决定文件在桶里的目录结构。
* 自定义节点: 填入之前保存的为 S3 客户端使用管辖权地特定的终结点。
* 设置输出图片URL前缀: 此处先填写你的自定义域名 (如 https://img.test.com) 或公共开发URL (如 https://xxxx.r2.dev)，后续通过 WebP Cloud 代理后此处将会修改。
其他配置保持默认即可，确认参数无误后点击「确定」与「设置为默认图床」即可。

测试上传

切换到 上传区，拖入一张图片或点击选择。
观察日志，显示上传成功。
生成的链接会自动在系统剪贴板中，链接格式应为 https://img.test.com/your-image.jpg (或你配置的路径)。在浏览器打开该链接应能正常显示图片。恭喜！基础图床搭建完成！

WebP Cloud 配置

目的： 原始图片可能较大。WebP Cloud 能自动将请求的图片转换为更高效的 WebP 格式 (兼容浏览器)，大幅提升加载速度并节省流量。

创建代理

登录 WebP Cloud 仪表盘: 访问 WebP Cloud Dashboard
点击下方 创建代理。
代理配置
- 代理名称: 输入一个名称 (如 blog)。
- 源站地址: 填写公共开发URL或者自定义域名，确保协议一致 (http/https)。例如：https://img.test.com 或 https://xxxx.r2.dev。
此处代理就创建成功了，xxx.webp.li即为我们的代理地址。

更改 PicGo 配置

回到 PicGo 的 图床设置 -> Amazon S3。
找到 设置输出图片URL前缀 输入框。
将之前填写的原始地址，替换为 WebP Cloud 提供的代理域名 https://xxxxx.webp.li。之后通过 PicGo 上传到 R2 的文件 img.test.com/test.jpg 则可以用 abd12fd.webp.li/test.jpg 这一链接进行访问.

测试上传

在 PicGo 上传区 再次上传一张图片。
生成的链接格式变为 https://xxxxx.webp.li/your-image.jpg。、
在浏览器打开此链接：
* 首次访问可能会稍慢（转换过程）。
* 观察图片格式（检查元素或看 URL 后缀），通常会被转换为 .webp。
* 刷新后速度应很快（缓存生效）。
* 对比原始链接和代理链接的图片大小（浏览器开发者工具 Network 标签页），通常 WebP 链接的图片体积显著减小。