在线图床的部署之法

零、背景

天下苦图片加载久已,好吧,开个玩笑😘但是本站之前采用的图片加载方式即本地存储(其实本质存到GitHub仓库里)确实有诸多不变之处主要是推送后难以第一时间加载出来,于是最后全面采用了在线图床的方法,接下来讲讲如何操作的

感谢Sonia33大佬的帮助

一、准备工作

本站采用的是cloudflare+Picgo作为上传方案,所以需要准备以下账号/软件

当然你也不必第一时间下载或是准备因为先看看也不急

二、具体流程

1. 创建cloudflare的R2储存桶

进入仪表盘后选择存储与数据库,然后点击R2对象储存的概念

image-20251120152257219

然后点击创建储存桶

image-20251120153044102

推荐配置如下

  • 位置推荐选择亚太地区 (APAC)根据需求选择

  • 默认存储类选择标准

image-20251120152655894

2.储存桶的相关配置

2.1 API令牌的创建

  • 点击API Tokens 后面的Manage

image-20251120161933080

  • 选择创建用户api令牌

    image-20251120162059347

  • 创建令牌名称(最好辨识度高例如R2 User Token blog img )

  • 权限选择对象读和写

  • 仅应用于特定存储桶,然后选择你创建的储存桶

  • TTL为永久(当然你也可以选择过期的那种)

创建即可(接下来注意,要记录参数了)image-20251120162837854

2.2参数记录

你会得到这样一张参数图(推荐先给截个图,另外不用担心我,因为写完blog我就会删除令牌和桶,不过你记得不要泄露了)

image-20251120163237564

为了方便接下来与Picgo对接,我们需要记录以下几个参数

1
2
3
桶名:test        #即储存桶名称
应用密钥ID(Access Key ID): f93c59f854ed73d4b6b1124841ddfc4a # 访问密钥 ID
应用密钥(secret access key):fada6f3766cf1db74947865e079577cdb820a05a0561201697c4d266341760f8 #机密访问密钥

2.3桶的设置项

  • 配置通过自定义域来访问储存桶

  • 删除默认的对象生命周期规则(我猜是为了防止滥用资源所以才有了默认7天终止上传)

    有关自定义域名推荐使用类似image.XXXX.com的二级域名来增强阅读性(当然你也可以不这么做),记得在你所用的域名管理网站配置DNS记录(见下面的第二张图)

image-20251120155926223

记得配置DNS

随后你便会在DNS记录里看到这个

image-20251120160330267

当然如果你的DNS解析不是用的cloudflare,那么可以手动添加记录:

类型选择CNAME ,目标为存储桶端点即S3 API(在api令牌有写S3 客户端使用管辖权地特定的终结点

3.Picgo的配置工作

回到文章最开始的准备工作,下载软件

3.1下载插件

搜索amazon s3 uploader插件并下载安装

image-20251120164703853

3.2 图床配置

image-20251120164845266

  • 图床配置名:看你心情,不过还是建议以阅读性为第一位

  • 接下几个参数在之前的api令牌找

  • 上传文件路径可以和我一样(其他的也是):{year}/{month}/{md5}.{extName}

image-20251120170241144

4.对接 Typora

在本地储存的贴文有讲,贴图便不在赘述

image-20251120165758178
完了,当时没发现图片搞错了,现在我都忘了是怎么样的了

点击验证图片上传选项

image-20251120170801039

成功完事,我要开始删桶了

感谢以下博文做参考

从0到1:用Git+CloudFlare+PicGo+Typora+Hexo搭建个人博客全流程 | Sonia33

PicGO 连接 AWS S3 · xiabee-瞎哔哔