感谢Cloudflare提供的免费服务，让我得以在互联网上有一个小小的容身之地。

在此向Cloudflare致以最高的敬意。

前言

今天在整理博客的图片时，想起来Cloudflare还有免费的存储额度，即R2存储桶。GitHub上传图片也不错，但考虑到访问速度，我准备将图片迁移到Cloudflare。毕竟GitHub的图片引用也是采用CF反代GitHub的方法，那为啥不直接用Cloudflare呢？况且存储桶还可以自己选择存储区域，一定程度上还能提升大陆的访问速度。

准备

  • 正常的Cloudflare账户
  • PicList（一个基于PicGo修改的云存储和图床平台管理工具）
  • 一个托管在Cloudflare的域名

步骤

Cloudflare配置

创建R2存储桶

在CF的管理面板侧栏找到R2的选项，进入。第一次配置时会让你填写支付信息（但是只要在免费额度内就不会扣费）。我选择了PP作为支付方式。

点击 创建存储桶

之后会让你选择存储桶的位置和默认存储类。保持默认就行，或者你可以自己选择存储桶的地区。

创建完毕后进入存储桶的设置页面。找到“自定义域”的配置选项，这里可以将你托管在CF的域名和存储桶的访问域名绑定。绑定后等待几分钟的DNS解析，就可以用你自定义的域名快速访问了。

配置自定义域

获取管理密钥

返回R2存储桶的“概述”页面，点击右上角的“管理 R2 API 令牌”，新建一个API令牌。配置页面的选项将“权限”设置为“管理员读和写”。

权限配置

随后会出现一个只显示一次的配置界面，上面包含了你所需的全部信息：

  • 令牌值
  • 访问密钥ID
  • 机密访问密钥
  • 终结点

记下它们。

（可选）配置CORS

找到“CORS策略”的配置选项，点开：

1
2
3
4
5
6
7
8
9
10
[
  {
    "AllowedOrigins": [
      "https://你要引用图片的域名"
    ],
    "AllowedMethods": [
      "GET"
    ]
  }
]

这里我设置为https://blog.esing.dev。

（可选）配置CDN缓存

在CF的控制台选择你托管的网站并进入配置页面。在侧栏找到“规则”选项卡，选择“页面规则”。随后新建一个规则：

页面规则配置

其中，URL的域名换为你之前为R2存储桶绑定的域名。开头一定要加https！

剩下的缓存配置按照图片设置即可，当然你也可以把边缘缓存的TTL拉低一点（如果你的图片经常会修改的话）。同理，博客的CDN缓存也可以用相同的办法配置，不过考虑到其更新速度，要适当拉低边缘缓存TTL的时间。

PicList配置

配置图床

打开PicList，在左边找到图床-AWS S3的配置选项，进入后新建配置文件，随后一项一项将刚刚记录下的内容填进去：

配置界面
  • 配置名：自己起一个就行
  • AccessKeyID：刚刚记录下来的访问密钥ID
  • SecretAccessKey：刚刚记录下来的机密访问密钥
  • Bucket： 你的存储桶名称
  • 上传路径： 自己设定。 切记开头不要带/！ 配置完的路径应当为AAA/BBB/{fullName}的形式。
  • 设置自定义节点：存储桶管理界面的S3 API地址
  • 设置自定义域名：你之前为存储桶绑定的域名

如果一切就绪，任意拖动图片到PicList中，在CF的管理界面应当会同步出现上传完毕的图片。

例如下面的图片地址是https://pic.esing.dev/asuka_sd.png：

明日香可爱捏！

配置管理

打开PicList，在左边找到管理-S3兼容云的配置选项，进入后新建配置文件，配置和上面一致即可。

Enjoy！

后记

2024.08.29

PicList有个小问题，即“开启高级重命名”和“上传到第二图床”后，如果重命名的规则内包含随机字符串或是毫秒时间这种几乎不可能一样的内容，上传到两个图床后的链接不同，因此无法将另一个图床作为备份！

已经在评论区提了Issue，作者表示逻辑上应当是保持重命名后的文件名一致的，但是两次上传行为分开算了。期待作者修复吧。