我尝试过许多图床,如去图图床、ImageHub、路过图床和 GitHub 图床等,但这些方案都不够稳定。即便使用了腾讯云 COS 的付费方案,因 CDN 容易被盗刷,仍然存在较大风险。为此,我开始寻找一个更可靠的图床方案。✨

我的博客基于 Hexo 构建,以前我将图片存储在本地目录,并通过 PicX 压缩为 AVIF 格式,以此提升加载速度。博客托管在 Netlify,依托其在中国区域的加速效果和较高的稳定性,这种方案我已使用了一段时间。🚀

后来我想到:既然本地目录能充当图床,为何不利用静态托管实现在线化呢?我研究了许多关于 Netlify 图床的搭建教程和 GitHub 开源项目,但发现这些方案仍与我的需求不完全吻合。于是,我借助 GPT 逐步开发出一套符合自身需求的 Netlify 图床。经过多次测试和优化,项目最终成型。以下是项目的亮点和使用教程。💡

🌟图床方案

通过本地 Git 上传到 GitHub,Netlify 自动部署 GitHub 的文件,实现自动更新和快速部署。

🌟 项目亮点

  1. 🚀 一键复制文件夹内所有图片的 URL。
  2. 🔍 支持搜索文件和排序功能。
  3. 📁 拖入图片文件夹后,通过命令自动更新 JSON 数据。
  4. 💻 支持部署至静态网站托管平台(如 Netlify)。

🔗 项目地址点击访问项目地址
🌐 Demo点击查看演示
🎉 Demo 图片:

1.avif
2.avif
3.avif


📖 使用教程

  1. 在 VS Code 中克隆项目,使用 npmyarn 安装 http-server,并通过 npm install -g http-server 安装 Node。

  2. 将博客文章的图片文件夹拖入 img 文件夹中,并重命名(图床以文件夹形式显示,不支持单独显示文件)。📂

    4.avif

  3. 打开命令行,输入 node update.js 自动更新 images.json 数据。⚙️

    5.avif

  4. 使用 npmyarn 启动项目(如 yarn dev 启动 http-server),即可在左侧栏查看新增的文件夹和图片。🔍

    6.avif

  5. 使用 git add . 提交项目更新,输入 git commit -m "更新日志或自定义内容",再输入 git push 上传项目至 GitHub。📤
    7.avif


⚠️ 注意:在 index.html 的第 278 行修改成你的域名。

8.avif


希望这个图床能为你的博客图片管理带来便捷体验!🎉