从零开始搭建图床
图床搭建(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下载 可自己到PicGo官网 下载对应系统版本。下载安装完后可打开软件,并且点开图床设置,进入GitHub
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
图床搭建(Github + PicGo)
这是基于github搭建的免费图床。试用与大部分人。
1. GitHub配置
在github上创建一个仓库专门要来储存图像。
仓库名可以随意,根据自己喜好设定,不过切勿设置太长。默认公开仓库就行,不要设为私人仓库,否则无法上传图片。
仓库创建成功后需要配置密钥,随后点击头像,找到 settings 。
往下翻找到Developer settings
随后按照下图顺序点击进行密钥配置。
日期改长一点,随后勾选 repo
其余选项可不勾选,点击 Generate token 完成配置
跳转到这个页面后先不要着急,建这个密钥复制并且保存下来 以供后续使用。
2. PicGo配置
PicGo下载 可自己到PicGo官网 下载对应系统版本。下载安装完后可打开软件,并且点开图床设置,进入GitHub
| 配置项 | 填写内容 | 示例 | 解释 |
|---|---|---|---|
| 图床配置名 | 图床的名字 | kaitumei | 这个无所谓,随意 |
| 仓库名 | 用户名/仓库名 | kaitumei/images | 必须安装用户名/仓库名的格式 |
| 分支名 | main或master(查看仓库默认分支) | master | 默认是master |
| Token | 粘贴刚生成的密钥串 | ghp_xxxxxxxxxxxxxx | 刚刚让你保存的部分 |
| 存储路径 | 上传到哪个目录 | test/ | 这里我进行实验随意填写的,你可以自己填写目录名 |
| 自定义域名 | https://cdn.jsdelivr.net/gh/用户名/仓库名 | https://cdn.jsdelivr.net/gh/kaitumei/images | 按照格式就行 |
完成设置后,设为默认图床。
随后可拖入任意图片,回到github仓库后进行查看。
可以看到,刚才的图片上传成功
至此 基于 GitHub的图床搭建完成。


















