为博客搭建免费图床

什么叫图床

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

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

常用图床的几种方式

1. VPS 自建：通过购买服务器搭建图床程序，比如 easyimage，lsky-pro 等。 优点：方便，快捷，空间大 缺点：速度取决于 vps 的线路，迁移服务时大量数据需要迁移。
2. 云端 oss 储存+cdn 优点：稳定，速度快 缺点：付费（腾讯 cos/阿里 oss+cdn(cdn 需备案)）。免费的额度有限（Backblaze B2 + Cloudflare）。
3. 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 的存储桶的设置，拉到下面：

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

1
2
3
4
5
6

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

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

1
2
3
4
5
6

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

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

1
2
3
4
5
6
7

[
  {
    "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

完成上述配置后，我们就可以在「上传区」直接拖入文件进行图片上传了，如上传后显示无误则为配置成功，生成的链接会自动在系统剪贴板中，直接在需要的地方粘贴即可。

Typora 配置

点击文件 -> 偏好设置

按照官方引导配置 Picgo 图床配置

点击验证图片上传选项,提示通过，即代表配置好了，未来在文章中插入图片会自动上传到图床