Cloudns + Cloudflare R2 + PicGo 打造个人图床系统

✨ 为什么要自建图床?

你是否遇到过这些问题:

📛 图片外链失效?
🐌 图床限速 + 广告烦人?
💰 上传量大就得付费?

教程所涉及账号均为个人测试教程账号,完毕后立即删除,失效!

📌 如果你正在用 Markdown 写笔记、写博客、做文档,或者使用 Typora、Obsidian 等编辑器,那拥有一个稳定、免费的图床系统几乎是刚需!

本教程带你 零成本 从头到尾搭建属于你的专属图床系统,包含:

工具 功能
🆓 ClouDNS 免费注册永久子域名(DDNS)
☁️ Cloudflare R2 10GB 对象存储空间 + 每月 10 万次请求
🖼️ PicGo 快速上传图片 + 自动生成外链 + 支持 S3 协议
✍️ Typora Markdown 编辑器 + 自动调用图床链接

🧱 架构总览

+-------------+         +------------------+         +---------------------+
|   PicGo     |  --->   |  Cloudflare R2   |  <---   | 自定义域名(ClouDNS)|
| 上传工具    |         | 对象存储图床     |         | Cloudflare 解析托管  |
+-------------+         +------------------+         +---------------------+
        \_____________________> Typora / Markdown 插图同步使用

📝 第一步:注册 ClouDNS 免费域名

ClouDNS 是一家全球托管 DNS 服务供应商,其服务范畴涵盖了 GeoDNS、Anycast DNS 以及拥有 DDoS 防护的 DNS 等领域。在此不多介绍了,只需要知道是一家还挺靠谱的公司就行。

1.访问ClouDNS官网

打开浏览器,访问 ClouDNS 官方网站。

2.注册账户

在网站首页,找到注册选项,使用电子邮箱注册。
图片[1] - Cloudns + Cloudflare R2 + PicGo 打造个人图床系统 - 宋马

3. 邮箱激活

注册后,登录邮箱,查找ClouDNS发送的激活邮件,并点击邮件中的激活链接。

4.激活账户

通过激活链接,账户将被激活,并自动跳转到ClouDNS平台。

5.创建DNS空间

图片[2] - Cloudns + Cloudflare R2 + PicGo 打造个人图床系统 - 宋马
在欢迎界面,按照指引点击 Yes,进入DNS空间创建界面。

6.选择免费域名选项

图片[3] - Cloudns + Cloudflare R2 + PicGo 打造个人图床系统 - 宋马
在这个页面,点击创建区域(如下图)点击最后一个“free zone”
在创建DNS空间的界面中,选择 Free zone 选项。

7.自定义二级域名

这里定义自己的二级域名,点击 创建 按钮,完成域名的创建。

8. 域名解析

创建成功后,回来到域名解析的页面。点击右上角的 + 添加新纪录 来添加新的记录值,根据需要设置IPv4或IPv6等记录类型。

🔄 第二步:Cloudflare双向解析托管CloudNS域名

1.访问Cloudflare官网

2.域名绑定

我这里直接使用Google账户登录,登录自己的账户(没有的要先注册了),在账户主页点“添加域”。

输入在Cloudns申请到的完整域名,点“继续”。

付费计划当然是选择“Free”了。

自动获取的DNS需要全部删除

删除后,点击”继续前往激活”

3.ClouDNS更新域名

直到看到出现分配的两个名称服务器,将它们都复制下来,此时这个页面先不要动。然后回到Cloudns页面,点“添加新记录”。点击1添加如下两条记录(服务器名称是上面也没显示的,可能和我的不一致)。添加完毕后等待3处更新完毕,继续。

4.检查域名绑定状态

回到Cloudflare页面,点击检查服务。

等待一会,刷新页面,出现以下结果则成功。
图片[4] - Cloudns + Cloudflare R2 + PicGo 打造个人图床系统 - 宋马
此时没有dns记录。

☁️ 第三步:部署Cloudflare R2 图床服务

1.开通 CloudFlare R2

点击右侧的R2对象储存。

在弹出的界面输入付款方式(信用卡,paypal都可以)

2.创建储存桶及桶设置

按图选择方式设置图床

3.自定义图床域名

设定访问桶的域名,有两种方法,一种是有一个私有域名(需托管在Cloudflare上),另一个是用R2.dev子域名,继续之后,点连接域,会自动生成dns记录。
图片[5] - Cloudns + Cloudflare R2 + PicGo 打造个人图床系统 - 宋马

需要回到ClouDNS添加data的域名解析。

自定义域名绑定成功后,这里dns会显示R2记录。

4.测试图床

这里找一个图片测试图床上传

成功上传

图片能够通过自定义域名直接访问成功。

自定义域名dns解析成功

🔐第四步:创建 API 令牌(用于 PicGo)

有的api令牌就可以用软件(PICGO)自动上传图片了。

我这里创建账户令牌

记录一下值,最好复制到一个文档保存,只会显示一次。

📤 第五步:PicGo配置S3(Cloudflare R2)服务图床服务

1.软件环境准备

🖼️ PicGo 官网:https://picgo.github.io/PicGo-Doc/
🟢 Node.js 官网:https://nodejs.org/zh-cn

2.安装插件 picgo-plugin-s3

选择安装图中插件,可能会失败,多试几次。

3.设置默认图床为 S3,并进行配置

根据前面保存的api配置图床信息

这里自定义的URL一定要填写http,否则会出现 “image load failed“ 无法加载出图片,填写目标的定义参考链接:

4.测试验证

相册中加载正常

存储桶文件路径、文件名正常,文件上传成功

✍️ 第六步:配置 Typora 实现 Markdown 自动上传插图

Typora 是一款所见即所得的 Markdown 编辑器,支持:

图文混排,编辑体验接近 Word
插入图片时自动上传到图床
自动替换为图床地址,便于文章发布到博客、公众号、CSDN 等平台
支持 LaTeX、代码块、流程图、目录等高级功能

🎯 下载地址:https://typora.io/

1.配置Typora

2.测试验证

3.文档测试验证

复制图片到文档中显示如下连接,已经成功上传,并且图床中已经有文件。

查看图床中已经存在对应文件

📢 版权声明

本文为原创内容,转载请注明出处。

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容