什么是图床

图床是指用来存储图片提供外链访问的在线服务。

为什么使用图床

大部分使用图床的主要是撰写博客(尤其是静态博客)的人。静态博客的特点是:

  • 博客本身是一堆 HTML/CSS/JS/MarkDown 文件,部署在 GitHub Pages 等平台上
  • 如果图片也和这些文件放在一起,仓库会越来越大且不便于管理
  • 如果使用收费的静态托管平台,图片的传输将会是流量的大头,由此可能产生较高费用

最好的办法是:博客文章里只写图片的 URL,图片本身存在图床上

搭建图床的方式

网上有不少免费图床和收费图床,这里不再一一列举。只说我选择的方式:Cloudflare R2 + CloudFlare-ImgBed。

  • CloudflareR2:CloudFlare 提供的对象存储。免费配额是 10 GB 存储、100 万次 Class A、1000 万次 Class B 操作每月,传输流量免费。
  • CloudFlare-ImgBed:开源的图床管理工具。

由于 Cloudflare R2 绑定自定义域名时要求该域名的 DNS 由 Cloudflare 管理,因此还需要一个已托管在 Cloudflare 的域名。

综上,各部分的职责及关系如图:

498f84739249bd1cb13996024c561c6f_720

搭建步骤

创建 R2 存储桶

创建存储桶

在 Cloudflare 控制台,点击“ R2 对象存储”,点击“创建存储桶”

提示

如果是第一次使用,它会要求你绑定信用卡——这只是验证身份用,个人博客体量几乎不会产生费用

填写“存储桶名称”,选择“位置”,最后点击“创建存储桶”

为 R2 存储桶绑定域名

提示

进行该部分操作前,请确保已经通过 Cloudflare 托管了自己的域名

进入存储桶,点击“设置”,找到“自定义域”,点击“添加”

自定义一个二级域名后,点击继续

最后点击“连接域”

创建 D1 数据库

提示

D1 数据库用于存储图片的元数据(如文件名、上传时间、访问链接等),是管理面板实现文件列表、删除、黑白名单等功能的数据基础。图片文件本身存储在 R2 中,D1 只保存与这些文件相关的信息记录。

在Cloudflare 控制台,点击“D1 SQLite 数据库”,点击“创建数据库”

填写名称,选择位置,最后创建

点击复制按钮,记下数据库id待后续使用

点击“控制台”,复制 init.sql 中的内容(不包含注释),粘贴进去后执行初始化 SQL

获取 API Token 和 Account ID

获取 API Token

在Cloudflare首页,点击头像,点击“配置文件”

在左侧列表点击“ API 令牌”,点击“创建令牌”

点击“使用模板”

由于我们创建的是 D1 数据库,默认模板中没有相关权限,需要先点击“添加更多”,添加新的一行 D1 权限

设置账户资源、区域资源后,点击“继续”

点击“创建令牌”

点击复制按钮,记录令牌内容待后续使用

获取 Account ID

返回 Cloudflare 首页,点击三个点,复制账户 ID,记录内容待后续使用

部署管理面板

访问 CloudFlare ImgBed,点击“Fork”

点击“Create fork”

点击“Settings”,点击“Actions”,点击”New repository secret“

添加4个 secrets

NameSecret
CLOUDFLARE_API_TOKENCloudflare API Token
CLOUDFLARE_ACCOUNT_IDCloudflare Account ID
D1_DATABASE_IDD1 数据库 ID
R2_BUCKET_NAMER2 存储桶名称

点击顶部标签页“Actions”,点击 “Deploy to Cloudflare Workers”,点击带下拉箭头的“Run workflow”,最后点击 “Run workflow” 开始部署,稍等片刻等待部署完成。

为管理面板绑定域名

默认的****.workers.dev域名在国内访问不了。返回 Cloudflare 首页,点击“Workers 和 Pages”,可以看到刚刚部署完成的图床管理面板,点击进入

点击“域”,点击“添加域名”

任选一个已托管在Cloudflare的域名

自定义二级域名

完成后,即可在浏览器中输入自定义的二级域名进入图床管理面板。

配置管理面板

访问 https://youdomain/dashboard,进入管理面板后台,首次进入无需密码,因此要尽快设置管理员账户

设置管理员账户和上传密码

选择“系统设置”,“安全设置”,设置上传密码、管理端用户名和密码

配置R2上传渠道

选择“系统设置”,“上传设置”,点击“编辑”。部署时默认添加了 Cloudflare R2 存储方式,因此直接编辑即可。

添加 R2 存储桶的访问链接,开启容量限制,保存修改

上传测试

通过客户端上传一张图片,完成后复制 URL 到浏览器打开,看看图片是否可以正常显示

回到管理端,查看文件列表是否出现新上传的图片