一、 为什么我要自己写个网站？

作为一个摄影爱好者，成品图的展示至关重要。之前看了很多平台发现好看的都要收费，虽然有很多现成的相册平台，但总觉得少了点“自由度”：

  • 想要极简的 UI 风格？

  • 想要高清原片不被压缩？

  • 想要完全自主的分类管理？

昨天的时候想着试试，所以决定利用 Google Gemini Studio 的每日免费额度，在几乎没有手动写复杂逻辑的情况下，肝出了这个网站：LensCraft。

成果预览： https://lenscraft-kappa.vercel.app

二、 硬核技术栈：这不只是个“静态页”

用的主要技术有以下：

  • 前端框架：Next.js (React 框架，自带路由和 SEO 优化)

  • 数据库：MongoDB (存储作品信息、分类和元数据)

  • 对象存储：Minio (高性能、私有化存储摄影原片)

  • 样式定制：Tailwind CSS (极简主义美学的保障)

  • AI 助手：Google AI Studio (Gemini 1.5 Pro)

三、 核心攻略：如何通过 Gemini Studio 生成全栈代码？

1. 第一步：需求设计

在Gemini中让他输出简单的需求文档，等待输出后根据自己的需求让他不断进行调整。

“我要开发一个摄影网站，技术栈是 Next.js + MongoDB + Minio + Tailwind CSS。请帮我设计项目文件结构，输出相关需求文档，如果后续有新的需求我会让你不断优化

image-lqsk.png
2. 第二步：架构设计

在 Gemini Studio 中，我先让它输出整体框架，可以选择pro模型，但是模型每天都有一定的额度，pro用完了可以切换到flash额度比较多一点

将输出的需求文档直接喂给他，就会自动开始开发项目代码

2. 第三步：需求迭代

输入自己的需求内容，让AI不断迭代；例如：我让 Gemini 编写连接 Minio 的后端：

“请使用 Next.js 的 App Router 模式，写一个 API Route。功能是：连接 Minio 桶，并将上传的照片元数据存入 MongoDB，同时实现分级查询。”

3. 第三步：环境变量配置、模型配置、Github链接

  • 环境变量配置

image-wzii.png

  • 模型配置

  • Github链接

四、 3 分钟部署你的专属网站（保姆级教程）

上面已经将项目自动推送到了Github仓库，后续每次有新增功能后直接推送即可，推送成功后如果链接了Vercel就会自动部署，等待部署完成后就可以访问了。

我已经将项目开源到了 GitHub，你只需要按照以下步骤操作：

1. Fork 项目 访问项目地址：https://github.com/BoWang816/LENSCRAFT 点击右上角的 Fork，将代码仓库复制到你的账号下。

2. 准备环境变量 在 Vercel 部署时，你需要准备好以下“钥匙”：

  • MongoDB: 建议使用 MongoDB Atlas 免费版。

  • Minio: 准备好你的 Endpoint、Access Key 和 Secret Key（用于高清原片存储）。

3. 在 Vercel 一键部署

  • 登录 Vercel，导入你刚才 Fork 的 LENSCRAFT 仓库。

  • 在 Environment Variables 处，填入上述 MongoDB 和 Minio 的配置信息，根据项目文档填写相关的环境变量即可

  • 点击 Deploy，稍等片刻，你的摄影网站就上线了！

五、 避坑指南（干货总结）

在开发过程中，我也遇到了一些挑战，这里分享给想尝试的朋友：

  • 关于 Minio 配置：由于 Minio 是私有化存储，部署到 Vercel 时，记得在环境变量（Environment Variables）里配置好你的 Endpoint 和 AccessKey。

  • 关于 Gemini 额度：Gemini 1.5 Pro 的每日免费额度足够完成一个中型项目。建议分模块生成，比如上午搞定数据库逻辑，下午搞定 UI 交互，这样生成的质量最高，并且一次问题可以填写多个，最大化的使用次数；

  • MongoDB 连接：如果你不想自建数据库，推荐使用 MongoDB Atlas 配合 Vercel，配置非常简单。

六、 为什么选择这套方案？

  • 薅羊毛到底：Gemini Studio 每日额度免费，Vercel 部署免费，MongoDB Atlas 也有免费额度。

  • 数据自主：照片存在你自己的 Minio 里，数据存在你自己的 MongoDB 里。

  • 无限扩展：你可以继续在 Gemini Studio 里输入指令，让它为你增加“水印功能”、“评论系统”或“暗黑模式”。

七、 结语

以前，搭建这样一套带后台、带数据库和私有存储的系统，至少需要几天的开发时间。但在 Gemini Studio 的辅助下，我只用了几个小时进行对话和调试。AI 不会替代开发者/摄影师，但会用 AI 的人一定会跑得更快。