如何用 GitHub 和 Netlify 打造稳定的图床?
我尝试过许多图床,如去图图床、ImageHub、路过图床和 GitHub 图床等,但这些方案都不够稳定。即便使用了腾讯云 COS 的付费方案,因 CDN 容易被盗刷,仍然存在较大风险。为此,我开始寻找一个更可靠的图床方案。✨
我的博客基于 Hexo 构建,以前我将图片存储在本地目录,并通过 PicX 压缩为 AVIF 格式,以此提升加载速度。博客托管在 Netlify,依托其在中国区域的加速效果和较高的稳定性,这种方案我已使用了一段时间。🚀
后来我想到:既然本地目录能充当图床,为何不利用静态托管实现在线化呢?我研究了许多关于 Netlify 图床的搭建教程和 GitHub 开源项目,但发现这些方案仍与我的需求不完全吻合。于是,我借助 GPT 逐步开发出一套符合自身需求的 Netlify 图床。经过多次测试和优化,项目最终成型。以下是项目的亮点和使用教程。💡
🌟图床方案
通过本地 Git 上传到 GitHub,Netlify 自动部署 GitHub 的文件,实现自动更新和快速部署。
🌟 项目亮点
- 🚀 一键复制文件夹内所有图片的 URL。
- 🔍 支持搜索文件和排序功能。
- 📁 拖入图片文件夹后,通过命令自动更新 JSON 数据。
- 💻 支持部署至静态网站托管平台(如 Netlify)。
🔗 项目地址:点击访问项目地址
🌐 Demo:点击查看演示
🎉 Demo 图片:
📖 使用教程
-
在 VS Code 中克隆项目,使用
npm
或yarn
安装http-server
,并通过npm install -g http-server
安装 Node。 -
将博客文章的图片文件夹拖入
img
文件夹中,并重命名(图床以文件夹形式显示,不支持单独显示文件)。📂 -
打开命令行,输入
node update.js
自动更新images.json
数据。⚙️ -
使用
npm
或yarn
启动项目(如yarn dev
启动 http-server),即可在左侧栏查看新增的文件夹和图片。🔍 -
使用
git add .
提交项目更新,输入git commit -m "更新日志或自定义内容"
,再输入git push
上传项目至 GitHub。📤
⚠️ 注意:在 index.html
的第 278 行修改成你的域名。
希望这个图床能为你的博客图片管理带来便捷体验!🎉
- 感谢您的赞赏。