从零开始搭建图床

图床搭建（Cloudflare R2 + WebP Cloud + PicGo）

1.前言

图床有什么用呢？从名字上看就知道是一个专门储存图片的仓库，可以极大节省大量图片带来的资源消耗，比如用在网站上，以减少图片大量堆积而导致服务器过载；也可以用在笔记里，减少笔记的总体大小以及图片路径导致图片无法加载的问题。

总之，图床的核心功能就是跨平台访问、降低资源消耗、方便管理等。本次图床搭建主要是基于Cloudflare R2 + WebP Cloud + PicGo而搭建的。

2.从零开始搭建图床

2.1.配置Cloudflare R2

R2 是 Cloudflare 推出的免费对象存储服务，需要免费注册一个 Cloudflare 账号才能使用。并且需要先绑定好信用卡，填写好信息后才能订阅服务。

订阅之后，需要创建一个 “存储库” 。

需要填写存储桶（Bucket）名称，建议有一些辨识度，后续在配置上传时会用到。位置和默认存储库可根据自己需求配置，随后点击蓝色按钮创建完成。

创建成功后点击 设置 ，进入下面页面，记住S3 API的值并且启用公共开发URL。启用后可获得一个公网地址。

将这个公共URL也给记录好，后续要用到。

完成上面的设置后，返回概述页面，然后创建API令牌。

并且完成下面的配置后保存。

令牌名称可自己随意设定，权限选择第三个，保证文件能够写入与读取，并且将这个API指定到刚才创建好的images仓库。

再创建完API令牌后进入下面页面，并且将下面的访问密钥ID与机密访问密钥记录保存，这两个之后无法查询到。

2.2.WebP Cloud 图片优化

首先，到WebP Cloude官网注册登录后，创建一个代理。

代理区域选择与库当时设定的地区最近的地方，代理名称可自定义，源站地址为库的公共URL/自定义URL，完成相关配置后保存。

完成配置后可在我的代理中查看代理地址，并且保存好代理地址。

2.3.PicGo 工具

PicGo 本体并不包括 S3 图床，但可以通过「GitHub - wayjam/picgo-plugin-s3」插件来支持。或者，直接在插件设置直接搜索相关插件并且安装。

插件安装好后，可以在图床设置那一栏直接编辑Amazon S3 。

随后完成以下7个配置。

• 图床配置名 ，根据喜好填写。
• 应用密钥 ID，填写 R2 API 中的 Access Key ID（访问密钥 ID）
• 应用密钥，填写 R2 API 中的 Secret Access Key（机密访问密钥）
• 桶名，填写 R2 中创建的 Bucket 名称，如我上文的 images
• 文件路径，上传到 R2 中的文件路径，我选择使用 {fileName}.{extName} 来保留原文件的文件名和扩展名。
• 自定义节点，填写 R2 API 中的 S3 API仓库名前面的域名，/ 后面为想要保存的地点。
• 自定义输出URL模板，填写代理域名以及路径，可参考示例7

完成所有配置后点击保存，然后进行测试

随便上传一个图片进行测试，如果显示上传成功，则图床搭建成功；如若显示上传失败，大概率是上面的配置出错了。

然后回到Cloudflare R2的库中查看是否写入对应路径，可以看到图片已经写入库中相应目录。

3.与typora联动

搭建图床的主要目的还是为了方便记笔记，所以这里以Typora为例。

首先打开文件—>偏好设置—>图像—>上传服务设定。

将上传服务和PicGO路径改后。之后回到笔记随便插入一张图片，然后右击图片完成上传图片。

可以看到上传成功后，会自动变更地址，从之前的绝对路径更换为网络地址，并且右下角显示上传成功弹窗。

至此图床的搭建已全部完成。

编辑者：kaituemi