Featured image of post 从零开始搭建一个免费的图床
Cloudflare DigitalPlat Github

从零开始搭建一个免费的图床

资源使用说明

本教程基于 Cloudflare R2 和 DigitalPlat FreeDomain 实现, 需要在这两个平台上注册相应的账号, 根据注册账号引导按步骤完成注册即可.

在 Cloudflare 平台上创建 R2 对象存储的存储桶

  1. 登录 Cloudflare 平台后, 依次点击 存储和数据库=>R2对象存储=>概述

    bind-payment

    如果是新账号会提示绑定支付方式(信用卡/Paypal)

    Cloudflare R2 提供 10G/月 的免费额度, 用于存放博客里的图片(封面,插图)是完全足够的.

  2. 完成绑定支付方式之后, 即可点击右上角创建存储桶. create-bucket-1

  3. 在创建存储桶页面设置存储桶名称及位置(国内建议选择:亚太地区), 然后点击创建存储桶. create-bucket-2

    稍等一会儿后会提示"您的存储桶已准备就绪。添加文件即可开始使用", 预示着存储桶创建完成! create-bucket-complete

在 DigitalPlat 平台上创建 FreeDomain 免费域名

  1. 访问 注册账号 页面

    按提示输入信息, 信息确认无误后, 点击 Register 按钮 create-account

  2. 然后会提示 注册账号的验证邮件已经发送到邮箱里,需要去邮箱里验证一下 verification-email

  3. 登录到邮箱, 如何收件箱没有, 则可能在垃圾邮件里. (Gmail收不到邮件,建议使用其他邮箱) verification-email

    复制验证邮件里的验证链接 http://dash.domain.digitalplat.org/auth/register/* 到浏览器了打开即可完成验证 registration-successful

  4. 回到 账号登录 页面, 使用刚才注册好的账号进行登录 login

    登录后选择 KYC 验证方式(仅支持 Github OAuth 验证) KYC-verification 使用 Github 账号登录验证完成之后进入 DigitalPlat FreeDomain 首页

  5. 登录到 DigitalPlat FreDomain 平台, 按提示收藏 Github 上的 FreeDomain 项目即可获得1个额外的域名

    (DigitalPlat FreeDomain 平台默认仅赠送一个免费域名)

    登录 DigitalPlat FreeDomain 平台, 按首页提示打开 Github 上的 FreeDomain 项目,

    在 Github 上给 FreeDomain 项目点击右上角 ⭐️Star

    回到 DigitalPlat FreeDomain 平台, 验证 Github 账号即可获得1个额外的免费域名 get-a-extra-domain

  6. 在 DigitalPlat FreeDomain 平台点击左侧菜单栏中的 Domain Registration

    在 Domian name 输入框输入想要注册的域名

    选择 dpdns.org 作为主域名

    勾选 同意条款

    点击 Check Availability 检查域名是否可用 Check Availability

    如果可用则已经注册成功!

将刚注册好的域名托管到 Cloudflare 平台上

  1. 在 Cloudflare 上点击添加域, 并输入刚才注册好的域名, 然后点击继续 alt text

  2. 选择免费计划 alt text

  3. 将 Cloudflare 生成的域名服务器替换到 DigitalPlat 自动生成的域名服务器, 并保持配置 alt text alt text

  4. 在 Cloudflare 上点击下方的 立即检查名称服务器 alt text

  5. 稍等一会儿, 域名状态将会变成 活动 alt text

将托管在 Cloudflare 上的域名绑定到 R2存储桶 的自定义域中

  1. 将域名绑定到R2存储桶中 alt text

  2. 通过域名访问R2存储桶中的资源 alt text 现在就可以通过域名访问R2存储桶中的资源了. alt text

总结

整体架构图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

graph TB
    A[😀用户] --> B[📱 前端上传界面]
    B --> C[🌐 Cloudflare]
    C --> D[💾 R2对象存储]
    E[📝 Markdown文档] --> F[🎯 DigitalPlat域名]
    F --> C
    A --> E
    
    style A fill:#e0f2f1
    style B fill:#f3e5f5
    style C fill:#fff3e0
    style D fill:#e8f5e8
    style E fill:#fce4ec
    style F fill:#e1f5fe

1. 准备工作流程图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

graph TB
    A[😀用户] --> B[注册Cloudflare账号]
    B --> E[添加支付方式]
    E --> C[✔准备完成]
    A[😀用户] --> D[注册DigitalPlat账号]
    D --> F[注册FreeDomain域名]
    F --> C
    
    style A fill:#e0f2f1
    style B fill:#f3e5f5
    style C fill:#fff3e0
    style D fill:#e8f5e8
    style E fill:#fce4ec
    style F fill:#e1f5fe

2. R2存储桶创建流程

1
2
3
4
5
6
7
8
9

flowchart TD
    A[登录Cloudflare] --> B[进入R2管理界面]
    B --> C[创建存储桶]
    C --> D[配置存储桶名称]
    D --> E[设置访问权限]
    E --> F[完成创建]
    

    style F fill:#e8f5e8

2. R2自定义域配置流程

1
2
3
4
5

flowchart TD
    A[免费域名托管到Cloudflare] --> B[Cloudflare R2添加自定义域]
    B --> C[可通过自定义域名访问资源]
    
    style C fill:#e8f5e8

3. 使用流程演示

3.1 图片上传流程图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

sequenceDiagram
    participant U as 用户
    participant F as 前端界面
    participant C as Cloudflare
    participant R as R2存储桶

    U->>F: 选择/拖拽图片
    F->>C: POST /upload (multipart/form-data)
    C->>R: 上传图片文件
    C->>C: 生成访问链接
    C-->>F: 返回上传成功
    F-->>U: 显示上传结果

3.2 图片访问流程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

sequenceDiagram
    participant R as 阅读器
    participant M as Markdown文档
    participant D as DigitalPlat域名
    participant C as Cloudflare
    participant R2 as R2存储桶

    R->>M: 打开Markdown文档
    M->>D: 通过域名请求图片
    D->>C: 通过Cloudflare CDN
    C->>R2: 获取图片对象
    R2-->>C: 返回图片数据
    C-->>M: 返回图片响应
    M-->>R: 显示图片内容
© 2025 Ryan Young
持续学习，共同进步！ 🚀
使用 Hugo 构建
主题 Stack 由 Jimmy 设计