我是如何自建图床服务的

2025年1月5日 22:00:43

背景

一直在用的图床服务是sm.ms，因为自己想学习下前端知识，加上 AI 大模型发展火热，所以模仿sm.ms搭建了一个图床服务imgood，这里记录一下我搭建图床服务的过程。

准备工作

AI 编辑器

开发过程中使用了 Windsurf 和 Cursor 两个 AI 编辑器，这两个工具的安装和使用方法请看Windsurf 官方文档和Cursor 官方文档。新账号注册有免费试用额度，额度用完了需要付费订阅，Pro版本 Cursor 一个月20刀，Windsurf 一个月15刀，这里直接选择淘宝和闲鱼购买账号，价格不到一半。

除此之外，我也尝试了 Vscode 的开源插件 Continue 搭配国内的 Deepseek模型使用，不知道是否我配置问题， TAB 的自动代码补全没有生效，而且相较于 Cursor 的 Compose 模式和 Windsurf 的 Cascade 模式，这两个强大的功能可以检索整个代码仓，根据上下文生成的代码更加精准，最终是用 Cursor 搭建了项目，开发了一部分，然后用 Windsurf 完成了剩下的部分，关于编辑器之间的差异不做过多介绍。体验下来 claude-3.5-sonnet 模型对代码的理解能力非常强，达到了预期的效果。

前端框架

使用 SvelteKit 作为服务端渲染的前端框架，Bulma 作为基础的样式库。

前端近些年陆续出现优秀的框架，选择很多，像是 React 系列的 Nextjs 和 Remix 都是不错的选择，为什么不提及 Vue？个人喜好问题，更喜欢 React 系列，符合自己的开发品味，倾向使用设计简洁的东西，不想增加认知负荷，另外想尝试新鲜的东西，所以选择了 Svelte。

样式框架现在主流是 Tailwindcss，从推出以来一直在关注，也用它写了一些小玩具项目，非常好用，体现在主流的框架和平台都支持了它，在 AI 的加持下，生成带有原子化CSS的代码更加方便快捷，这对于我一个不怎么会设计前端样式的人来说简直是大大提高了效率（至少界面能看的过去了。。。）。既然这次也是学习的玩具项目，不妨再试试新的东西，Bulma（布尔玛，怀疑作者是龙珠的粉丝）就决定是你了。

对象存储 OSS

缤纷云主要是存图片。为什么选择它，因为在 v2ex 看到的推广（本文不是缤纷云的广子，缤纷云看到请打钱！！！），价格相较于国内大厂阿里云等算是便宜一些，主要是可以白嫖免费额度，另外 cloudflare 的 R2 服务也有免费额度，有闲情的时候再去开个新坑研究一下。

数据存储 Supabase

Supabase用来存图片的关联关系，并且自带用户认证服务，省去重复的注册登录逻辑。不得不说这类云服务是真方便，在此之前我可能会搞个服务器自己搭数据库balabala，现在真恨不得一切上云，小玩具免费额度完全够用，单兵作战，需要运维的场景 All-In-Cloud。

开发过程

历经几次迭代，在 Cursor 和 Windsurf 之间反复横跳，两个编辑器都尝试了一遍，功能上重叠度很高，平分秋色，个人更偏向于使用 Windsurf。开发细节就不过多描述，主要是使用 AI 编辑器的心得。

1、Cursor 除了设置全局的提示词外，还支持设置项目级别的提示词.cursorrules文件放在根目录下，GitHub 上有个项目 awesome-cursorrules提供了常用的提示词模板，这里使用的是svelte-5-vs-svelte-4-cursorrules-prompt-file。