skip to content
云端的杂货铺

图床方案迭代记录（Cloudflare R2 + PicGo）

/ 11 min read

博客, blog, cdn, cloudflare r2, picgo

其实在博客搭建之初，由于内容较少、图片使用频率低，我习惯将图片直接存储在博客的资源目录下。博客是部署在 Vercel 所以也没觉得有什么不便。然而，随着多平台发布的需求增加，我发现复制博客的 Markdown 源文件时，因为所有图片均为相对路径，导致图片无法显示，不得不逐张重新上传，过程既耗时又繁琐。

后来，我了解到图床的概念——通过专用存储服务上传图片并生成公开链接，不仅能统一管理图片资源，还能减小博客仓库体积，提高网站加载速度。

GitHub + jsDelivr CDN + PicGo

起初，我创建了一个 GitHub 仓库「GitHub - image」，通过 PicGo 直接上传到仓库，并在 PicGo 返回时的图片路径改为 jsDelivr CDN 加速后的链接。这种方式提供了版本管理的便利，但也存在一些局限性：

  • GitHub 仓库虽有 100GB 理论上限，但超出 1GB 后会触发人工审核；同时，jsDelivr 对单个文件的大小限制为 50MB，一旦超过，资源可能失效。
  • 图片作为代码提交易污染 commit 记录，且这种方式属于“非官方用途”，若账号或仓库出现问题，图片容易丢失。

基于上述问题，我决定寻找更可靠的方案。

七牛云 + PicGo

接下来，我转向云服务商提供的对象存储方案。像是 Amazon S3、七牛云等都提供的对象存储服务，在提供可访问的公开链接的基础上还多了权限控制、数据备份、拓展性等优势，在相对低成本的前提下提供了针对文件数据存储和管理的较优解决方案。

七牛云提供 10GB 的免费存储空间，个人用户完全够用。同样是通过 PicGo 进行上传并转换为公网访问的链接，图片的访问速度有了显著提升。不过，七牛云的测试域名仅免费提供一个月，之后需要绑定自己的域名。由于我的域名和服务器到期后转入了 Cloudflare 托管，国内备案已注销，因此使用一年多后，还是决定更换图床方案。

Cloudflare R2 + WebP Cloud + PicGo

image-20241214202352466

于是重新转向了云服务厂商的对象存储，发现了赛博菩萨 Cloudflare 提供的 R2 对象存储这一服务，它在免费计划中提供每月 10GB 的存储空间，数据安全性高且无需备案。对于个人使用来说完全够用，大厂的服务与数据安全也有保障。

对于国内用户来说速度肯定还是比不上七牛云这种线路，但是在不用备案、稳定且免费的综合条件下，这是我能想到的最好的方案了。

在电脑端同样是通过 PicGo 客户端几乎一键上传并生成博客直接可用的 markdown 图片链接，配置完成后使用起来很顺滑。

图床搭建说明

Cloudflare R2 + PicGo 的方案尽管牵扯到了多个组件和平台，但所有操作都是免费的，也是我最终选定的方案，下面将从零开始介绍如何搭建这个免费图床系统。

Cloudflare R2

R2 是 Cloudflare 推出的免费对象存储服务，需要免费注册一个 Cloudflare 账号才能使用，注册登录后，点击左侧边栏的 R2 访问服务，但需要注意的是开通 R2 服务需要绑定信用卡（国内外主流信用卡皆可），但并不会扣费，主要是为了验证用户身份使用。

创建图床 Bucket

image-20241214202724466

开通 R2 服务后，点击右上角「创建存储桶」按钮进行创建。

image-20241214202929388

进入创建配置界面后，需要填写存储桶（Bucket）名称，建议有一些辨识度，后续在配置上传时会用到。

点击「创建存储桶」按钮即完成创建，此时我们已经可以向我们的「images-r2-test」存储桶上传文件了，可以选择在网页直接上传文件或文件夹。

也可以使用 S3 API 进行上传，我们后续使用 PicGo 客户端进行上传就依赖这种方式，但需要进行一些额外配置，点击导航栏「设置」选项进行配置。

image-20241215163424855 image-20241215163728488

首先我们需要打开「R2.dev 子域」，这是为了后续访问图片时需要的公网地址，点击「允许访问」，并按照提示输入「allow」即可开启。

完成后会显示一个以 r2.dev 结尾的公网网址，即我们后续访问图片的网址。

image-20241215163836991

自定义图床域名

但是分配的网址比较长，不易于记忆，我们可以通过「自定义域」来绑定我们的专属域名，点击「连接域」按钮。

image-20241215164306696

输入自己想绑定的域名，如 img.illsky.com，点击继续。

image-20241215164335778 image-20241215164353680

连接域，并等待 DNS 解析生效即可。

image-20241215164715288

完成后 bucket 状态处「公共 URL 访问」显示“已允许”，且「域」显示为我们刚自定义的域名即配置成功。

配置 Bucket 访问 API

image-20241215170055006

当我们完成上述配置后，可以回到存储桶「对象」界面，上传一张示例图片，点开详情则会显示该图片的访问地址，此时我们就拥有了一个可访问的图床服务了。

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

image-20241215170236278 image-20241215170316031

回到 R2 主页面，点击右上角「管理 R2 API 令牌」，进入后点击「创建 API 令牌」。

image-20241215170443721

输入令牌名称，「权限」选择“对象读和写”并将此 API 指定之前所创建的 Bucket，这样最小化权限也保障数据安全，其余选项保持默认即可。

image-20241215170546449

完成创建后会显示所有密钥，我们使用 PicGo 需要的是下面三个信息，不过因为只会显示一次，建议在密码管理软件或其他地方妥善保管好这些参数信息。

至此，我们需要在 Cloudflare R2 上配置的部分就完成了，接下来我们需要配置 PicGo 客户端。

PicGo

PicGo 是一个用于快速上传并获取图片 URL 的工具软件，有着较为丰富的插件生态，支持多种图床服务，其 GitHub 仓库为「GitHub - Molunerfinn/PicGo」，可以下载对应平台客户端使用。

配置 R2 图床

PicGo 本体并不包括 S3 图床，但可以通过「GitHub - wayjam/picgo-plugin-s3」插件来支持。

image-20241215170741137

在「插件设置」中选择安装，「图床设置」中就新增了 Amazon S3 选项。点击进入配置选项。

如果插件设置中搜索不到，可以通过命令行离线安装

npm i picgo-plugin-s3
image-20241215171033050

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

  • 应用密钥 ID，填写 R2 API 中的 Access Key ID（访问密钥 ID）
  • 应用密钥，填写 R2 API 中的 Secret Access Key（机密访问密钥）
  • 桶名，填写 R2 中创建的 Bucket 名称，如我上文的 images-r2-test
  • 文件路径，上传到 R2 中的文件路径，我选择使用 img/{year}/{month}/{fileName}.{extName} 来保留原文件的文件名和扩展名。
  • 自定义节点，填写 R2 API 中的「为 S3 客户端使用管辖权地特定的终结点」，即 xxx.r2.cloudflarestorage.com 格式的 S3 Endpoint
  • 自定义域名，填写上文生成的 xxx.r2.dev 格式的域名或自定义域名，如我配置的 img.******.com

其他配置保持默认即可，确认参数无误后点击「确定」与「设置为默认图床」即可。

图片上传

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

总结

以上就是我的图床系统搭建方案，本文的所有图片也都使用 PicGo 上传、Cloudflare R2 存储。