前期准备

必备 可选
CloudFlare账号 WebP Cloud账号
信用卡/PayPal 域名
PicGo Github账号

开通 Cloudflare R2 服务需要绑定支付方式,但一开始并不会扣费,只有在超出额度之后才会扣费

CloudFlare R2的优势

  • 免费10G的额度
  • 免费CDN
  • 无需备案

收费标准:

免费 超出部分/月费
存储 10 GB/月 0.015 美元/GB
A 类操作 100 万次/月 4.50 美元/百万次
B 类操作 1000 万次/月 0.36 美元/百万次

免费的每月10G额度足够个人使用,即使超出额度之后费用也相当便宜

详细定价:https://developers.cloudflare.com/r2/pricing

GitHub + jsDelivr CDN + PicGo的缺陷

开始我就是这种建了一个 GitHub 仓库,通过 PicGo 上传到仓库,然后 PicGo 返回时的图片路径改为 jsDelivr CDN 加速后的链接,勉强能用还有一份版本管理。

不过jsDelivr 可能有时候被神秘力量封锁,以至于图片在很长一段时间无法加载,再加上 GitHub 托管图片是基于代码仓库,上传图片依赖的是代码提交,容易污染 commit 记录,某种意义上也算滥用资源…

七牛云

  • 有免费额度,但要绑定国内已经备案的域名,以后每年还要审核

腾讯云

  • 收费

阿里云

  • 收费

创建 R2 存储桶

首先需要登录CloudFlare账号

订阅R2

点击左侧的R2存储,填写需要的信息,我这里选择的是信用卡支付

1

创建存储桶

订阅完成以后点击创建存储桶

2

设置存储桶的名称和机房位置,我这里选的美西

3

此时存储桶创建成功,此时可以通过网页上传图片和文件夹,注意此时还不能通过url来直接访问上传的图片

4

开启url访问

点击存储桶的设置,找到R2.dev 子域,选择允许访问,再弹出框里输入allow确定

5

6

7
现在就可以通过使用分配的公共 R2.dev 存储桶 URL + 文件名 来访问上传的图片了,随便上传一个图片测试一下

8

自定义图床域名(可选)

和前面一样在存储桶的设置里面,添加自定义域名,我这里设置的是img-r2.6buex.com
注意这里填的域名的dns得已经托管给Cloudflare才行,

9
大概几分钟就生效了

10
使用自定义的域名访问图片测试一下,ok没问题

11

使用 PicGo 上传图片到 R2

显然每次都要打开 Cloudflare 页面手动上传图片的方式显然不够便捷。R2 提供了 S3 兼容的 API,可以方便地使用一些客户端/命令行工具进行上传、删除等操作。

创建 R2 API 令牌

管理 R2 API 令牌 -> 创建 API 令牌-> 设置令牌名和权限

12

13

14

15

将 访问密钥 ID、机密访问密钥以及管辖权地特定的终结点复制保存!后面会用到

至此所有Cloudflar的配置部分就结束了

安装 Amazon S3插件

PicGo 并不支持 S3 图床,但可以通过「GitHub - wayjam/picgo-plugin-s3」插件来支持。
在「插件设置」中选择S3 点击安装

16mia

设置 Amazon S3

现在「图床设置」中就新增了 Amazon S3 选项。点击图床设置Amazon S3 设置

17

  • 应用密钥 ID,填写 R2 API 中的 Access Key ID(访问密钥 ID)
  • 应用密钥,填写 R2 API 中的 Secret Access Key(机密访问密钥)
  • 桶名,填写 R2 中创建的存储桶的名称
  • 文件路径,上传到 R2 中的文件路径,我选择{year}/{month}/{md5}.{extName},也可以使用 {fileName}.{extName} 来保留原文件的文件名和扩展名。
  • 自定义节点,填写 R2 API 中的「为 S3 客户端使用管辖权地特定的终结点」,即 xxx.r2.cloudflarestorage.com 格式的 S3 Endpoint
  • 自定义域名,填写上文生成的 xxx.r2.dev 格式的域名或自定义域名

设置完成以后点击上传区切换到Amazon S3测试一下

18
ok!

设置PicGo快捷键

将Amazon S3 设置成默认图床

19
然后点击PicGo设置,点击设置快捷键

20
根据自己的喜好设置快捷键,我这里是Ctrl+Alt+U

21
之后只要按快捷键就能上传当前复制的图片,然后自动复制图片链接的md格式

使用WebP Cloud优化图片(可选)

WebP Cloud是一个类 CDN 的图片代理 SaaS 服务,可以在几乎不改变画质的情况下大幅缩小图片体积,优化加载速度,发展到现在除了图片体积减少外,还提供了缓存、添加水印、图片滤镜等更多实用的功能,并提供了自定义 Header 等配置选项。

https://webp.se 官网可以看到,图片经过压缩体积缩减到原图的7%

WebP

使用github登录webp

https://dashboard.webp.se/

创建webp代理

代理名可以随便写,主要是地址要设置成需要代理的URL

如果在前面没有设置个人域名,就使用自带的xxx.r2.dev


其中xxx..webp.li就是代理地址,其中其中还有很多好玩的设置自己去调

下面就是经过webp代理后的图片,可以看到右下角添加了水印,经过对比确实缩小了两倍多