前提条件:一个Cloudflare账号。
一个域名
没错,就这么简单。没有Cloudflare账号的可以访问Cloudflare注册账号 Cloudflare Dashboard | Manage Your Account,域名可以使用二级域名。如果使用免费的二级域名就是0成本了。

Cloudflare端配置

点击R2对象储存,添加一个付款方式并点击将R2订阅添加到我的账户
图中A类操作代表每月最多的写操作,B类操作代表每月最多的读操作。

从图中我们可以看到,虽然添加了一个付款方式,但只有当超出限额了才会进行收费,而且收费相较于国内一些大厂来说已经很便宜了。他为用户提供了10GB/月的免费空间,读写操作次数也很多,作为个人图床完全够用。

随后点击创建储存桶,存储桶名称随便写一个,地区选择服务器所在地区即可,默认存储类选择标准,然后点击创建。
看到这个界面,就说明创建成功了。

但是现在这个图床还没有公网链接,我们依次点击设置-公共开发URL-启用,输入allow并确认,这样图床就可以被访问到了。

现在我们上传一张图片测试一下,点击上传的图片名称就可以到详情页。

可以看到他已经给我们的图片生成了url,并且可以在浏览器中访问到上传的示例图片

使用自己的域名

如果发现过了一会链接访问不了了,就需要这个方法。
首先将自己的域名托管到Cloudflare。
在账户主页中点击加入域,跟随引导操作选择免费套餐注册即可。(后续我这边没有新的域名不方便演示)


托管到Cloudflare后,回到R2对象储存,点击设置-自定义域-添加,输入自己的域名,之后就能浏览器中通过https://<自定义域名>/<文件名>来访问存储桶里的文件了。这时候可以把公共url关掉。

自此,Cloudflare端的配置就完成了,但是每次写博客都需要上cloudflare上传图片非常繁琐,于是我们需要用一个软件来辅助我们更方便的上传与管理图床。

结合PicGo优雅食用

项目GitHub地址:Molunerfinn/PicGo: :rocket:A simple & beautiful tool for pictures uploading built by vue-cli-electron-builder
使用文档:PicGo is Here | PicGo

官网对PicGo的描述是“一个用于快速上传图片并获取图片URL链接的工具”,它提供了便捷的图片上传与管理方法。下载并安装PicGo。
PicGo本身提供了很多平台的图床例如GitHub、又拍云、阿里云oss等,本人就是从GitHub转来的,但是没有提供Cloudflare的接口,需要一个插件s3来帮助我们实现。点击插件设置,搜索s3并安装,随后重启应用

重启后,在图床设置下找到Amazon S3,新建设置。

设置名称
图床配置名称随便填
应用秘钥ID和应用秘钥后文会讲
桶名刚刚新建桶的名字,例如我的就是blogimage
上传文件路径上传到R2中的文件路径,我使用img/{fileName}.{extName},功能是上传到R2的img文件夹下,并保留文件名和扩展名
地区填入auto
自定义节点后文会讲
自定义域名访问你图片的url模板。如果不是采用自定义域名的请忽略。我的模板https://域名/img/{fileName}.{extName}

应用秘钥ID和应用秘钥

在R2储存的概述界面中点击API-管理API令牌,随后点击创建 Account API 令牌,令牌名称随便取一个,权限选择对象读和写,指定储存桶为我们新建的那个桶,点击新建令牌。这样我们就得到了api令牌。其中访问密钥ID就是应用秘钥ID机密访问密钥就是应用秘钥

自定义节点

在R2储存的概述界面中点击API-将R2与API配合使用。将弹出的窗口下方的网址填写入自定义节点