为博客搭建免费图床

什么叫图床

图床就是将图片上传到相关服务商或者个人服务器，通过上传文件，转换为服务器的一个网络链接地址进行远程访问

可以方便快速的将图片插入到文章中，方便后续图片二次使用、迁移、分享

常用图床的几种方式

VPS 自建：通过购买服务器搭建图床程序，比如 easyimage，lsky-pro 等。优点：方便，快捷，空间大缺点：速度取决于 vps 的线路，迁移服务时大量数据需要迁移。
云端 oss 储存+cdn 优点：稳定，速度快缺点：付费（腾讯 cos/阿里 oss+cdn(cdn 需备案)）。免费的额度有限（Backblaze B2 + Cloudflare）。
Github + JsDelivr(cdn) 优点：github 绝对稳定，jsdelivr 充当 github 的 cdn 加速缺点：虽然有加速，速度也算不上快，属中等。

本篇介绍 CLoudFlare R2+Picgo 方案

CLoudFlare R2 免费用户有 10GB/月的存储额度（30 天内每天储存峰值的平均值），对于小网站基本足够，超额的存储是$0.015/GB/月，

标准储存：日常存储容量前 10GB/月免费（30 天内每天储存峰值的平均值）
Daily Class A Transactions Caps：日常 B 类事务前 100 万次免费（A 类事务包括下载、获取文件）
Daily Class B Transactions Caps：日常 A 类事务前 1000 万次免费（B 类事务包括创建存储桶、列举存储桶、列举文件版本、列举 Keys）

实现目的

1.自由在 MD，网站中引用图片（picgo 上传） 2.防止恶意被刷流量（虽然 CloudFlare 只收取额外的储存费用，但被刷流量多了容易被封号）

自定义域名代替原域名（出现问题直接断开和原域名之间的跳转）
设定缓存规则（有人盗刷也是刷缓存）
防盗链（只在规定的网站使用）

CloudFlare R2

注册账号

注册账号需要绑定一种支付方式（不扣费，只是用来选择支付方式），可以用信用卡，visa，paypal。

注册地址：https://dash.cloudflare.com/sign-up，验证过邮箱后即可使用。

开通 CloudFlare R2

点击右侧的 R2 对象储存。

在弹出的界面输入付款方式（银联卡，paypal 都可以）

对于个人博客来说，使用量一般超不了。确认后就可以开通 R2 对象储存了。

创建储存桶及桶设置

自定义图床域名

进入桶设置界面

设定访问桶的域名，有两种方法，一种是有一个私有域名（需托管在 Cloudflare 上），另一个是用 R2.dev 子域名

私有域名（二选一）

继续之后，点连接域，会自动生成 dns 记录。

之后就能浏览器 https://<自定义域名>/<文件名>访问存储桶里的文件了。

PS：如果域名不托管在 CloudFlare，可以单独托管二级\三级域名，只需要给二级域名添加一条 NS 记录指向原托管即可。

R2.dev 子域名（二选一）

点击允许访问，就可以用 https://pub-853c2f66b8ef43ae98ecd186f4be34f8.r2.dev访问桶

设定缓存规则

缓存规则一般设定两个：浏览器缓存和边缘缓存。浏览器缓存：访问后，所需文件储存在浏览器的本地目录，在一段时间内，再次访问优先访问本地文件边缘缓存：访问后，缓存在最近的 CDN 存一份，在一段时间内，优先访问 CDN 中的文件

进入域名页面->规则->页面规则

创建页面规则

URL 填 img.a.com/* 添加设置：缓存级别 – 缓存所有内容添加设置：浏览器缓存 TTL – 几个小时自己选（8 小时）添加设置：边缘缓存 TTL – 一个月（图片内容只有存在或者删除两个状态，所以越长越好）保存。此时如果有人刷流量，理论上图片都是本地缓存或者 CDN 缓存给的，不会走到 R2 对象存储。

防盗链设置

只能通过指定的网站来访问（防君子不防小人，可以伪造 refer 信息，照样刷流量）。但是还是有点作用，比如别人爬取文章盗用的时候，图片是无法访问的。

安全性->WAF，创建规则

设置 CORS 策略（可选）

一般不需要设置（出于安全考虑这里也不建议设置）。如果遇到 R2 作为博客图床，但是图片打不开的情况，F12 控制台发现遇到 CORS 问题，则需要配置。

官方文档：Configure CORS

进入你想设置 CORS 的存储桶的设置，拉到下面：

配置为允许特定源比如要设置为允许两个域名：

[
  {
    "AllowedOrigins": ["https://blog.a.com", "https://blog.b.top"],
    "AllowedMethods": ["GET"]
  }
]

配置为所有网站源可访问（多平台文章引用）

[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET"]
  }
]

配置为允许所有源如果上面配置为特定源后仍然不能修复问题，或者作为随机图片 API 的图床提供服务需要设置为所有源可访问，那么需要如下设置：

[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET", "POST", "PUT", "DELETE", "HEAD"],
    "AllowedHeaders": ["*"]
  }
]

WEB API 设置

有的 api 令牌就可以用软件（PICGO）自动上传图片了。

创建令牌

需要选择内容令牌名权限（对象读和写）指定储存桶 TTL 时间（永久）

记住生成的密钥，picgo 软件里面设置需要。

picgo 设置

在插件设置中，添加常用插件。 S3 插件：用来登录 S3 的图床 compress-next:用来压缩图片至 webp。 watermark：给图片打水印 autoback：用来备份图床

安装好后，里面就新增了 amazon S3 的图床设置。

这里有几项配置需要尤其注意。

应用密钥 ID，填写 R2 API 中的 Access Key ID（访问密钥 ID）
应用密钥，填写 R2 API 中的Secret Access Key（机密访问密钥）
桶名，填写 R2 中创建的 Bucket 名称，如创建 R2 的桶的名字 img
文件路径，上传到 R2 中的文件路径，这里选择使用 {fileName}.{extName} (或者{fullName})来保留原文件的文件名和扩展名。
自定义节点，填写 R2 API 中的「为 S3 客户端使用管辖权地特定的终结点」，即 xxx.r2.cloudflarestorage.com格式的 S3 Endpoint
自定义域名，填写上文生成的https://xxx.r2.dev格式的域名或自定义域名，如我配置的https://img.a.com
ForcePathStyle：no关闭，否则会在最终路径里面显示有桶名。
拒绝无效 TLS 证书连接：yes开启，如果出现证书错误可以关闭
ACL 访问控制列表：public-read
Bucket 前缀：false