暂无AI摘要 项目简介
今天为你带来 Vercel 搭建超快轻量的 BLOB图床，Vercel Blob Next.js Starter 是Vercel官方推出的开源项目，基于Next.js框架，集成了Vercel Blob存储服务。说白了就是个带后端功能的图床系统，上传图片自动返回CDN链接，比传统方案省心十倍。
演示
项目优势
- 真正的零成本：Vercel免费额度完全够个人使用，商用级CDN速度却不用花一分钱
- 自动化运维：图片上传后自动压缩+优化，再也不用手动处理缩略图
- 完美兼容Next.js：原生支持SSR/ISR，做博客配图时能显著提升页面加载速度
- 防爬虫设计：默认配置下所有图片都有时效性签名，防止被恶意盗链
部署流程
1.准备一个 Vercel 账号，可以直接使用 Github 登录，创建存储库（点击快速创建）：Create
点击以下部署链接
2.在接下来的页面中，名称自己填写，然后添加一个 Blob Store，确定即可
3.等待部署完成即可，直到出现庆祝动画，点击 Continue to Dashboard。
4.点击 Settings → Environment Variables，在最下方找到名为 BLOB_READ_WRITE_TOKEN 的环境变量，点击复制，格式如下：
vercel_blob_rw_*************************************
5.返回 Settings → Functions，将区域更改为 Hong Kong (East) – hkg1 或 Tokyo, Japan (Northeast) – hnd1
6.打开你的 Github
7.打开文件 .env.example，将复制的内容粘贴到末尾，格式如下：
BLOB_READ_WRITE_TOKEN=vercel_blob_rw_*******************************
8.打开 / app / page.tsx，修改里面的内容为中文（建议保留原站链接），可参考我的配置
import Image from 'next/image'
import Link from 'next/link'
import ExpandingArrow from '@/components/expanding-arrow'
import Uploader from '@/components/uploader'
import { Toaster } from '@/components/toaster'
export default function Home() {
return (
<main className="relative flex min-h-screen flex-col items-center justify-center">
<Toaster />
<Link
href="https://vercel.com/templates/next.js/blob-starter"
className="group mt-20 sm:mt-0 rounded-full flex space-x-1 bg-white/30 shadow-sm ring-1 ring-gray-900/5 text-gray-600 text-sm font-medium px-10 py-2 hover:shadow-lg active:shadow-sm transition-all"
>
<p>可自改内容这是一个横幅</p>
<ExpandingArrow />
</Link>
<h1 className="pt-4 pb-8 bg-gradient-to-br from-black via-[#171717] to-[#575757] bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl">
可自改这是大标题
</h1>
<div className="bg-white/30 p-12 shadow-xl ring-1 ring-gray-900/5 rounded-lg backdrop-blur-lg max-w-xl mx-auto w-full">
<Uploader />
</div>
<p className="font-light text-gray-600 w-full max-w-lg text-center mt-6">
<Link
href="https://vercel.com/blob"
className="font-medium underline underline-offset-4 hover:text-black transition-colors"
>
可自改这是标题
</Link>{' '}
Web. Built with{' '}
<Link
href="https://nextjs.org/docs"
className="font-medium underline underline-offset-4 hover:text-black transition-colors"
>
Next.js App Router
</Link>
.
</p>
<div className="sm:absolute sm:bottom-0 w-full px-20 py-10 flex justify-between">
<Link href="https://vercel.com">
<Image
src="/vercel.svg"
alt="Vercel Logo"
width={100}
height={24}
priority
/>
</Link>
<Link
href="https://github.com/vercel/examples/tree/main/storage/blob-starter"
className="flex items-center space-x-2"
>
<Image
src="/github.svg"
alt="GitHub Logo"
width={24}
height={24}
priority
/>
<p className="font-light">Github</p>
</Link>
</div>
</main>
)
}{/collapse-item}
9.保存后，系统会重新部署一次，返回 Settings → Domains，添加你的域名。
提示：可以在 Storage 页面查看存储库状态，例如大小、读写次数统计等。
总结
这可能是今年见过最良心的图床方案了！部署难度几乎为零，Vercel的全球CDN网络让图片加载飞快。重点是完全开源无后门，比那些突然跑路的第三方图床可靠多了。
