打造个人图床神器：免费稳定，Cloudflare R2 + PicGo + WebP Cloud，全球畅通无阻！

打造个人图床神器：免费稳定，Cloudflare R2 + PicGo + WebP Cloud，全球畅通无阻！

前言：今天发现中国大陆没法加载博客的图片内容，虽然本博客内容不面向中国大陆用户，全球畅通无阻当然是最好的。
Cloudflare R2 Storage 允许开发人员存储大量非结构化数据，而无需支付与典型云存储服务相关的昂贵的出口带宽费用。
Cloudflare R2免费套餐给的用量对于个人博客来说基本是完全够用的。再夸一次赛博大善人！牛皮！还有WebP Cloud提供的服务！感谢！

免费套餐说明

您每月可以免费使用以下存储量和操作量。免费套餐仅适用于标准存储。

免费 用量
贮存 10 GB/月
A 类操作 每月 100 万个请求
B 类操作 每月 1000 万个请求
出口（数据传输到互联网） 免费

详细原文：https://developers.cloudflare.com/r2/pricing/

事前准备

域名（非必须，你也可以使用公共 R2.dev子域，建议自定义域名）
Cloudflare（必须，你需要注册一个Cloudflare帐号，并且开通R2免费计划，可使用信用卡以及国区的Paypal进行开通）
WebP Cloud（必须，进行代理加快网站图像的加载速度）

教程开始

设置 R2

  1. 开通 Cloudflare R2 免费计划，可使用信用卡以及国区的Paypal进行开通。
    1
  2. 创建存储桶，我这里选择北美西部，稍后可以使用WebP Cloud提供的服务进行代理，默认存储类选择标准。
    2
  3. 创建存储桶完成后，点进就到存储桶的设置，然后找到R2.dev 子域，将它开启（建议不开启，直接看下一步）使其可以公共访问。
    （建议设置自定义域名，R2.dev 子域，使用时有速率限制，访问和缓存等 Cloudflare 功能无法再使用）
    3
  4. 建议设置自定义域名，可以享受到 Cloudflare提供的缓存服务,防止被刷。等待状态变为活动就设置好了。
    （当自定义域连接到您的存储桶时，您的存储桶的内容将可以通过该域公开访问。连接的网站还可以受益于 Cloudflare 功能，如机器人管理、访问和缓存）
    4
  5. 回到这个页面，点击 管理R2 API 令牌
    5
  6. 点击 创建 API 令牌
    6
  7. 对象读和写打开，在TLL选项可以设置API令牌的有效期,选择永久
    7
  8. 创建完成令牌以后请把 访问密钥 ID 和 机密访问密钥和为 S3 客户端使用管辖权地特定的终结点保存下来后面有用，出于安全原因，这些令牌值不会再次显示。如果到时候忘记了，可以再创建一个API令牌。这样R2 存储桶的设置就完了。
    8

设置 WebP Cloud

  1. 接下来我们打开WebP Cloud：https://dashboard.webp.se 自行创建账号，点击右下角的创建代理 ，代理名称随意填写，源站地址你设置的自定义域名，示例：https://img.aizrf.com。
    2-1
    2-2
  2. 免费用户，每日 3000 个请求额度，最多 3 个代理200 MiB 缓存，无限流量，还算好用的 API 服务，基本个人博客够用，然后每日 3000 个请求额度使用完后，你的代理会被自动禁用（需要重新手动开启），它会指向你的源站地址。（有能力或需求高的用户可自行购买增量额度包或者更高级的套餐）
    2-3

设置 PicGo

  1. 接下来我们打开 PicGo：https://github.com/Molunerfinn/PicGo 去下载你使用的版本，你电脑是什么版本就下载什么版本的。
    3-1
  2. 点击 插件设置 搜索 S3，安装插件，你的名字可能不是和我一模一样，因为我是用的Beta版。
    3-2
  3. 点击 图床设置 再选AMAZON S3再选 加号 进行设置，因为我一直在使用这个里面已经创建的有了。
    3-3
  4. 填写软件参数，我写的都是必填项，设置完最下方确定保存。
    1
    2
    3
    4
    5
    6
    7
    图床配置名=随意设置
    应用密钥ID=访问密钥 ID
    应用密钥=机密访问密钥
    桶名=你R2存储桶创建的名称
    文件路径={fileName}.{extName}
    自定义节点=客户端使用管辖权地特定的终结点
    自定义域名=WebP Cloud的代理地址（默认是这种格式：https://3xxxxxa.webp.li 不要照抄我的）
    3-4
    3-5

使用建议

  1. 开启以下设置对文件名比较友好，不会出现同名图片覆盖情况，还有一些特殊符号无法识别。
    4-1
  2. 设置中的拒绝无效 TLS 证书连接默认为 true，如上传失败日志显示证书问题可设置为false。
  3. 使用 hexo博客的 提供的过滤器和插件机制，我们可以简单的处理内容。将 img 标签中的 src 内容替换为 Webp Cloud Service 提供的代理 url。
    安装一个名为hexo-webp-cloud-proxy的包。
1
npm install hexo-webp-cloud-proxy --save

4-2

然后在_config.yml中添加以下内容(不要写反了哦，pre_url=源站地址，proxy_url=代理地址，修改这两个参数为你自己的)

1
2
3
4
5
6
7
8
9
10
webp_cloud_proxy:
  enable: true
  # the suffix of img type to use webp cloud service
  convert_type_list: ["jpg", "jpeg", "png", "gif"]
  # your site url
  pre_url: https://webp.aizrf.com
  # webp cloud service proxy url
  proxy_url: https://img.aizrf.com
  # the filter priority, see https://hexo.io/api/filter.html
  priority: 10

4-3

相关链接

WebP Cloud 点击前往

PicGo 点击前往

hexo-webp-cloud-proxy 点击前往