摘要：这篇给大家分享一套上线流程，对新手非常友好，特别适合快速上线、验证需求。会用到1个框架和 3 个平台，这三个平台的账号需要大家提前准备好。

这篇给大家分享一套上线流程，对新手非常友好，特别适合快速上线、验证需求。会用到1个框架和 3 个平台，这三个平台的账号需要大家提前准备好。

第一个是 GitHub账号，用于托管代码。所有项目代码都要上传到代码仓库里，方便做代码控制和管理。

第二个是 Vercel 账号，这是一个一键部署平台。它和 Next.js 深度集成，而 Next.js 本身就是 Vercel 公司开源的产品，所以两者协同起来非常丝滑。账号推荐用 GitHub 注册，这样提交和拉取代码都很顺畅。

第三个是 Supabase，这是一个数据库平台。Supabase 不仅可以存储数据，还能存储文件，提供登录等功能。对新手非常友好，而且很容易上手。

以上就是账号部分的介绍，下面就进入实战。

首先找需求，现在 AI 生图大模型已经非常强大了，比如谷歌的 Nano Banana、豆包的 Seedream 4.0。AI 生成图片的玩法很多，相应的竞争也比较激烈。但只要能找到细分领域或者独特的玩法，这里面还是有机会的。

推荐一个工具站 https://www.toolify.ai/，你可以从里面筛选出一些 AI 图片类的网站，看看它们的访问量，筛选一下做得比较好的。或者你自己本身就有想法，那就直接拿来实现。AI 时代的好处就是，真的可以让想法迅速变成现实。

接下来我们正式进入上站流程，实操开始：

第一步：和AI沟通需求 先把你大概的想法和 AI 讨论一下，让它帮你生成一个 PRD 文档，聚焦 MVP！ 推荐用 ChatGPT 或者 Gemini 都可以。这样能更好地梳理你的思路，把想法落地，从“点子”变成具体的功能。

第二步：生成原型或选择模板 你可以借助 v0、Bolt 这类原型网站生成工具来快速出一个原型。 当然也可以直接用现成的模板，这里我选的是 Vercel 的免费模板。 在模板库里挑一个跟自己需求比较贴合的，比如他们提供的 AI Headshot Generator（头像生成模板），我就直接用这个来改造。

点击 deploy 部署。

这里我是已经和 GitHub 账号做了关联。选择 GitHub，修改一下你的项目名字，然后点击创建，这样就在 GitHub 上创建了你的代码仓库并且模板的代码已经在你的仓库里了。

下一步我们添加supabase，创建一个新的supabase账号。

点击connect连接。

完成之后，进入下一步获取API KEY。

我们要去 https://www.astria.ai 拿 API Key，因为这个模板调用的核心服务是 Astria.ai 的 API。

为什么不能直接用别的 Key？模板写了要调用 Astria.ai 的 API，而不是 Replicate、Fal.ai、OpenAI 那类的。去看源码中的 .env.local.example 文件也能看出来，明确说明了获取API Key的地方。

如果你想改成别的，就需要改源码里调用 API 的部分。

打开Astria.ai官网，选择谷歌登录。

右上角个人信息有个下拉框，点击API。

点击 Generate 生成秘钥。

生成之后会跳转到Profile页面，再次点击API，就可以看到生成的API Key，注意不要泄露。

到这里我们 API key 就已经拿到了，再回到配置的部分，可以看到还有一个参数需要获取，但这个参数我并不清楚是什么，那怎么办？去问 AI。

LEAP_API_KEY：你在 Leap AI 控制台里生成的 API Key。

LEAP_WEBHOOK_SECRET：这是你在 Leap AI 后台设置 Webhook 时，会生成的一串密钥（用来验证回调请求是不是从 Leap 服务器发出的）。

如果你只是测试本地代码，LEAP_WEBHOOK_SECRET 可以随便填一个字符串（例如 test_secret），因为不会真的去校验。

但是如果你要 正式上线，这个参数必须和你在 LeapAI控制台 → Webhooks 设置 里生成的 Secret 保持一致。

既然测试环节可以随便填，那我们就先填一个测试字符，点击 deploy 部署。

等待部署中。

部署报错了，不要慌，我们有AI可以解决。复制报错的内容发给 AI询问原因以及解决方法。

是因为缺少了环境变量，那就根据提示，缺少什么我们给加上就行。

在 Vercel 里，这些环境变量都是存储在项目的 Environment Variables 配置里。详细路径是进入你的项目，点击上方一连串菜单当中的 settings。再找到 environment valuables，加上对应的 Key-value即可。

如果你有一点基础，可以看懂配置文件的话，也可以看得出来它里面有写到需要哪些参数，你可以对照。

添加完成之后保存，去 deployment 页面点击再次部署。

如果还是出现报错的话，老样子把截图或者报错信息贴给 AI，修复就行。不用纠结都是可以解决的。

部署成功后，可以看到Vercel已经给我们刚刚部署的网站分配了一个二级域名。https://xy-aura-art.vercel.app/ 打开就可以访问我们的网站了。

成功之后还需要给网站添加自己的域名。同样在你项目进入项目。选择 settings 菜单，左侧有一个domains，点进去就可以添加域名（需要提前购买）。

域名这一块我就不展开讲了，这篇主要是想让大家感受一下现在上线一个网站到底可以有多快、多方便。对普通人来说，这是一个很大的红利，也是很大的机会。

这套流程对没接触过的人来说，可能一开始看着有点麻烦，但其实熟能生巧。你自己实操一遍就会发现，基本就是一些配置相关的步骤，并不复杂。

对于 Vercel 这个平台，常用的功能菜单上面基本上都提到了，查看部署情况、部署网站、配置环境变量、添加域名等。

这里再补充一下 如何从 GitHub 导入项目到 Vercel：在首页右上角有一个 Add New 下拉框，点击里面的 Project。如果你还没有绑定 GitHub 账号，它会先提示绑定。绑定完成后，你就能看到所有项目了，点击想要导入的那个项目右侧的 Import 按钮即可。

这样一来，不管哪个项目都能实现一键部署。而且绑定之后，只要你在 GitHub 提交了代码，就会自动触发部署，非常方便。

当你部署成功，就能体会到这套流程的优势和魅力了。后面要做的就是持续优化网站：把你和 AI 讨论出的功能点逐一落地，让工具配合你写代码、改代码、迭代发布。一步一步把 MVP 跑通，再根据数据和用户反馈加功能、调体验就行。

来源：不秃头程序员