如何搭建一个不限空间容量的免费图床

朋友们好,我是伏均驭。

我目前正在学习运营网站和小程序,在这个过程中,我发现了一个搭建不限空间容量的免费图床。

之前要想在自己的网站或小程序上展现图片视频,这些图片必须先上传到自己的服务器上面,要知道服务器的空间是有限的,如果可以不占用自己的服务器空间,同时在自己的网站或小程序上展现图片视频就好了。

 

经过个人实践,这套方法确实是可行,于是我想记录下这个操作过程,如果你有这种需求,请继续往下阅读.

图床展示

先看下我搭建的图床

图片[1]-如何搭建一个不限空间容量的免费图床-海豚项目网

这里有几个点说明一下

1.图床是可以绑定域名的,你如果有自己的域名的话,直接生成一个二级域名,然后绑定就行,这样更个性化;没有自己的域名和服务器也没关系,直接在cloudflare上面注册一个域名就行。

2.图床名称、背景图这些都是可以自己设置。

3.认证密码可以加也可以不加,为防止他人滥用,个人觉得还是加一下比较好。

上传页面如下图所示,可以拖拽上传、点击上传、还可以直接复制粘贴上传,很方便。

图片[2]-如何搭建一个不限空间容量的免费图床-海豚项目网

图片上传完成后,会自动生成链接,我们复制链接就可以使用了。

图片[3]-如何搭建一个不限空间容量的免费图床-海豚项目网

例如我刚上传的这张图,它的URL是

https://img.kekeb.cn/file/1743664166612_image.png

复制这个链接到浏览器中,就可以看到这张图,我要在自己的网站和小程序中展示这张图的话,用这个链接就可以了。

图片[4]-如何搭建一个不限空间容量的免费图床-海豚项目网

 

搭建图床

一、搭建前的准备

搭建图床前需要准备3个账号

1.Github账号

注册地址:https://github.com/

2.Cloudflare账号

注册地址:https://www.cloudflare-cn.com/

3.Telegram账号

 

二、获取2个参数

登录tg客户端

1.创建机器人

在搜索框中搜索 @BotFather 注意看下账号标志和认证

图片[5]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击这个账号

在对话框中发送 /start

图片[6]-如何搭建一个不限空间容量的免费图床-海豚项目网

新创建一个机器人,在对话框中发送 /newbot

图片[7]-如何搭建一个不限空间容量的免费图床-海豚项目网

设置机器人昵称,例如 imgbed

图片[8]-如何搭建一个不限空间容量的免费图床-海豚项目网

设置机器人用户名,例如 fujyu_bot

需要注意的是,机器人的用户名的结尾必须是bot

这时对话框中会出现一串长长的字符,复制保存好,这是需要的其中一个参数。

图片[9]-如何搭建一个不限空间容量的免费图床-海豚项目网

 

2.创建频道

点击搜索框左侧的按钮

图片[10]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击“新建频道”

图片[11]-如何搭建一个不限空间容量的免费图床-海豚项目网

取一个自己喜欢的频道名称,然后点击“创建”

图片[12]-如何搭建一个不限空间容量的免费图床-海豚项目网

频道创建好了之后,点开这个频道,

点击页面右上角的三个点,选择“管理频道”

图片[13]-如何搭建一个不限空间容量的免费图床-海豚项目网

选择“管理员”

图片[14]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击“添加管理员”

在搜索框中输入@机器人用户名,例如 @fujyu_bot

把之前创建机器人添加设置成管理员,权限设置默认。

图片[15]-如何搭建一个不限空间容量的免费图床-海豚项目网

回到首页左上角的搜索框输入 @VersaToolsBot

图片[16]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击这个账号

在对话框中发送 /start 

图片[17]-如何搭建一个不限空间容量的免费图床-海豚项目网

回到你之前创建的频道,随便发送一条消息

然后把这条消息转发给@VersaToolsBot

这时对话框中会出现一个频道ID,复制保存好,这是需要的另一个参数。

图片[18]-如何搭建一个不限空间容量的免费图床-海豚项目网

到这一步,现在我们需要的2个tg参数就都有了。

 

三、部署Fork

Fork仓库

打开github上面的项目仓库

点击“Fork”

图片[19]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击 “Create fork” 

图片[20]-如何搭建一个不限空间容量的免费图床-海豚项目网

 

四、Cloudflare 设置

登录Cloudflare

点击页面左侧的 “Workers 和 Pages”

图片[21]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击“创建”

图片[22]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击“Pages”,选择“连接到Git”

图片[23]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击 “连接到 GitHub” 

图片[24]-如何搭建一个不限空间容量的免费图床-海豚项目网

GitHub 授权 默认选择 “All repositories”

点击“Install&Authorize”

图片[25]-如何搭建一个不限空间容量的免费图床-海豚项目网

选择一下之前fork的仓库

点击 “开始设置”

图片[26]-如何搭建一个不限空间容量的免费图床-海豚项目网

 “构建命令” 处填写 npm install

点击 “保存并部署”

图片[27]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击 “继续处理项目”

图片[28]-如何搭建一个不限空间容量的免费图床-海豚项目网

配置域名和数据库

点击 “自定义域” 添加一个你的域名。按提示添加即可。

图片[29]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击页面左侧的“存储和数据库”

点击“KV”

图片[30]-如何搭建一个不限空间容量的免费图床-海豚项目网

点击 “创建”

图片[31]-如何搭建一个不限空间容量的免费图床-海豚项目网

名称为 img_url 

点击 “添加”

图片[32]-如何搭建一个不限空间容量的免费图床-海豚项目网

回到Workers和Pages页面

点击 “设置” —— “绑定”——“添加”——“KV命名空间”

图片[33]-如何搭建一个不限空间容量的免费图床-海豚项目网

“变量名称” 填写 img_url

“KV 命名空间”选择刚才创建的 KV img_url

完成后点击“保存”

图片[34]-如何搭建一个不限空间容量的免费图床-海豚项目网

配置环境变量

回到Workers和Pages页面

点击 “设置” —— “变量和机密”——“添加”

图片[35]-如何搭建一个不限空间容量的免费图床-海豚项目网

按需求依次填写变量的类型(文本/密钥)、变量名称以及变量值

最后点击“保存”

图片[36]-如何搭建一个不限空间容量的免费图床-海豚项目网

到这里,一个不限空间容量的免费图床就搭建好了,直接在浏览器中输入你绑定的域名就可以使用了。

温馨提示:本文最后更新于2025-04-16 15:15:38,某些文章(资源)具有时效性,请留意更新时间。
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享