Vibe Coding 作品怎么免费上线：Vercel、Cloudflare、GitHub Pages 等托管平台选择指南
Vibe coding 最大的快乐，是几个小时就能把一个想法变成能点、能看、能跑的原型。
但它也有一个很现实的后半段：代码生成出来以后，放哪里？
很多 AI 工具会默认把项目做成 React、Vite、Next.js、Supabase、Express、FastAPI 这一类常见组合。看起来都叫“网站”，实际部署方式差别很大。有的只是静态页面，GitHub Pages 就够；有的有 API、登录、数据库、文件上传，就不能只扔一个 dist 文件夹完事。
这篇不是免费额度大全。我们按独立开发者和 vibe coding 项目的真实情况来拆：每个平台适合什么代码、支持哪些框架、能不能接数据库，以及哪些“免费”不适合拿来跑商业生产。
先看结论
如果你只想快速上线一个作品集、活动页、工具说明页，优先用 GitHub Pages 或 Cloudflare Pages/Workers 静态资源。
如果你做的是 React/Vite 单页应用，后端用 Supabase、Firebase、Cloudflare Workers API，优先看 Cloudflare、Netlify、GitHub Pages。
如果你做的是 Next.js，尤其是 v0 生成的项目，Vercel 体验最好；但 Vercel Hobby 官方限制为个人、非商业用途，准备收钱、卖服务、接广告时要把 Pro 成本算进去。
如果你想尽量 0 月费跑一个轻量全栈项目，Cloudflare Workers + D1/KV/R2 是当前最值得优先研究的一套。
如果 AI 生成的是 Express、FastAPI、Django、Flask、Rails 或 Docker 项目，Render 或 Koyeb 这类服务比 GitHub Pages、Vercel、Cloudflare Pages 更像传统后端托管。
如果项目有数据库，不要只看托管平台。很多时候最稳的组合是：前端免费托管，数据库单独用 Supabase、Neon、Turso、Firebase 或 Cloudflare D1。
先判断你的项目类型
部署前先看代码，不要先看平台广告。
| 你看到的项目形态 | 通常适合的平台 |
|---|---|
只有 index.html、CSS、JS |
GitHub Pages、Cloudflare Pages、Netlify、Firebase Hosting |
Vite/React/Vue/Svelte，构建后生成 dist |
GitHub Pages、Cloudflare Pages/Workers、Netlify、Vercel |
| Next.js / Nuxt / SvelteKit / Remix / Astro SSR | Vercel、Netlify、Cloudflare Workers，视框架适配程度选择 |
| Hono / Workers 项目 | Cloudflare Workers |
| Express / Fastify / NestJS | Render、Koyeb、Vercel Functions，复杂后端更建议 Render/Koyeb |
| FastAPI / Flask / Django | Render、Koyeb、Docker/VPS |
| 带 Supabase 的前端应用 | 前端任意托管，数据库和鉴权放 Supabase |
| 带文件上传、队列、后台任务 | Cloudflare R2/Queues，或 Render/Koyeb/VPS |
一个简单判断：如果项目能通过 npm run build 生成纯静态文件，它就能去很多免费静态托管平台。如果项目必须长期运行一个服务器进程，或者要跑 Python 服务，就不要硬塞进 GitHub Pages。
平台一览
| 平台 | 免费档适合 | 框架支持 | 数据库/存储 | 最大提醒 |
|---|---|---|---|---|
| GitHub Pages | 文档、作品集、静态站 | HTML、Jekyll、任意 SSG 的静态产物 | 不提供后端和数据库 | 不适合 SaaS、电商和动态后端 |
| Cloudflare Workers/Pages | 静态站、边缘 API、轻量全栈 | React、Vue、Astro、Hono、Nuxt、SvelteKit、Remix/React Router、Next.js 适配 | D1、KV、R2、Durable Objects、Queues | Node 兼容和长任务要谨慎 |
| Vercel | Next.js、v0 项目、预览部署 | Next.js 最强，也支持 SvelteKit、Nuxt、Remix、Astro、Vite、后端函数 | Blob、Edge Config、Marketplace 接 Neon/Supabase/Upstash/Turso 等 | Hobby 免费但限制非商业 |
| Netlify | 前端站、Jamstack、低频函数、表单 | Next.js、Nuxt、React、Remix、SvelteKit、Astro 等 | Netlify Database、Blobs、外接数据库 | Free 是 300 credits/月，用完会暂停 |
| Firebase Hosting | SPA、PWA、移动 App 配套后台 | 静态站、前端应用；App Hosting 更偏 Angular/Next.js | Firestore、Realtime Database、Auth、Storage | Spark 适合无卡入门，App Hosting/函数常需 Blaze |
| Render | Node/Python/Rails 等后端、Docker、静态站 | Node、Bun、Python、Ruby、Go、Rust、Elixir、Docker | Render Postgres、Key Value | 免费服务会休眠，免费 Postgres 不适合长期生产数据 |
| Koyeb | Docker/API、小后端预览 | GitHub 或 Docker 部署，适合 Web Service | Serverless Postgres | 免费实例适合预览，不要默认当生产环境 |
GitHub Pages：最适合纯静态，不要把它当免费 SaaS 服务器
GitHub Pages 的优点是简单、稳定、免费、和 GitHub 仓库天然连在一起。官方说明它是静态站托管服务，会从仓库里发布 HTML、CSS、JavaScript，也可以通过构建流程生成网站。
适合：
- 个人主页、作品集。
- 开源项目文档。
- 产品等待列表的纯静态页面。
- 用 Hugo、Astro、VitePress、Docusaurus、Jekyll 等生成的静态站。
- AI 生成的单页 HTML 小工具。
不适合：
- 需要服务器端代码的项目。
- 需要隐藏 API key 的后端请求。
- 需要登录、支付、数据库写入的 SaaS。
- 主要用于电商、商业交易或商业软件服务的网站。
GitHub 官方限制页写得很直接：Pages 不打算也不允许作为免费 web hosting 来运行在线业务、电商，或主要用于商业交易、SaaS 的网站。它还有 1GB 发布站点大小、每月 100GB soft bandwidth、每小时 10 次构建等限制。
建议用法：把 GitHub Pages 当成“静态作品发布器”，不要当成“免费生产服务器”。如果页面需要存表单，可以接 Tally、Google Forms，或者单独写一个 Cloudflare Workers endpoint。
Cloudflare：最适合 0 月费轻量全栈
Cloudflare 的优势不是单个功能，而是组合。
你可以用 Workers 跑 API，用静态资源托管前端，用 D1 存关系数据，用 KV 存配置和缓存，用 R2 存图片和附件，用 Durable Objects 做实时状态，用 Queues 做异步任务。对轻量 MVP 来说，这已经覆盖了很多早期产品需要的后端能力。
适合：
- React/Vue/Svelte/Vite 静态前端。
- Astro、Hono、SvelteKit、Nuxt、Remix/React Router 等现代框架。
- 边缘 API、Webhook、机器人回调。
- 读多写少的小工具、内容站、内部面板。
- 不想一开始就上 VPS、数据库、对象存储一整套的人。
数据库和存储：
| 产品 | 适合 |
|---|---|
| D1 | SQLite 风格的轻量关系数据 |
| KV | 配置、缓存、读多写少的 key-value 数据 |
| R2 | 图片、附件、导出文件、下载资源 |
| Durable Objects | 实时协作、房间状态、WebSocket 协调 |
| Queues | 邮件发送、任务异步化、削峰 |
Cloudflare 当前 Workers Free、D1、KV、R2 都有免费额度。官方价格页显示，D1 免费档包含每天 500 万 rows read、10 万 rows written、总 5GB 存储；KV 免费档包含 1GB 存储、每天 10 万 reads、1000 次写入/删除/list；R2 免费档包含每月 10GB-month 标准存储、100 万 Class A 操作、1000 万 Class B 操作。
但它不是万能 VPS。Workers 的运行时不是完整 Node.js 服务器，长时间 CPU 任务、重型图片/视频处理、传统 TCP 连接池、复杂后台 worker，都要谨慎。Next.js 也能通过 OpenNext 等适配跑在 Cloudflare 上，但如果你完全不想处理适配问题，Vercel 仍然是 Next.js 的省心路线。
建议用法：新项目如果是轻量全栈，优先试 Cloudflare Workers + Hono/Astro/SvelteKit + D1/R2。等确认有真实用户，再考虑 Workers Paid 的 5 美元/月起步成本。
Vercel：Next.js 最顺手，但免费档不适合商用
Vercel 对 vibe coding 很友好，尤其是 v0、Next.js、React 生态。导入 GitHub 仓库、自动识别构建命令、每个 PR 出预览链接，这些都很适合 AI 生成代码后的快速迭代。
适合：
- v0 生成的 Next.js 项目。
- Next.js App Router、SSR、ISR、API Routes。
- 需要大量 preview deployment 的前端项目。
- SvelteKit、Nuxt、Remix、Astro、Vite 等现代前端和全栈框架。
数据库和存储：
- Vercel Blob：文件、图片、音频、视频等对象存储。
- Vercel Edge Config：低延迟配置数据。
- Vercel Marketplace：接 Neon、Supabase、Prisma Postgres、Upstash、Turso、MongoDB Atlas 等。
现在不要再把 Vercel 理解成“自带一个 Postgres 和 KV 的免费数据库平台”。官方存储文档已经把数据库主要放在 Marketplace 集成里，Postgres 可以用 Neon、Supabase、AWS Aurora Postgres 等，KV 可以用 Upstash Redis。
最重要的是商用限制。Vercel 官方 Fair Use Guidelines 写明，Hobby teams 仅限非商业个人使用；所有商业使用都需要 Pro 或 Enterprise。商业使用包括向访问者收款、销售产品或服务、广告、收钱建站或托管等。
建议用法：个人 demo、学习、作品展示，用 Vercel 很舒服；一旦准备商业化，把 Vercel Pro 的费用当成发布成本，不要把 Hobby 当成长期商业生产托管。
Netlify：前端体验完整，免费档要看 credits
Netlify 和 Vercel 类似，都是非常适合前端开发者的平台。它对静态站、Jamstack、函数、边缘函数、表单、预览部署都很成熟。Netlify 也在强化 AI 生成项目和全栈开发体验。
适合：
- React/Vite/Vue/Svelte/Astro 静态或混合站。
- Next.js、Nuxt、Remix、SvelteKit 等框架。
- 需要表单、重定向、Headers、预览部署的营销站和工具站。
- 不想自己搭后端，但需要少量 Functions/Edge Functions 的项目。
数据库和存储：
- Netlify Database：内置托管 Postgres，支持迁移和分支。
- Netlify Blobs：对象存储，也可以当简单 key-value/basic database。
- 也可以外接 Supabase、Neon、Turso、Upstash 等。
Netlify 当前 Free 是 300 credits/月。官方 Pro vs Free 页面说明，Free credits 用完后项目会暂停到下个计费周期；Pro 可以开 auto recharge。Netlify Database 也会在活跃时消耗 credits。数据库文档还提到数据库存储曾有免费期到 2026-07-01，这种日期已经非常具体，发布前一定要重新看自己的 usage 页面，不要把它理解成永久免费数据库。
建议用法：如果你要托管前端、表单和少量函数，Netlify 很顺；如果要长期跑数据库，把 credits 消耗模型看清楚。
Firebase Hosting：适合前端加 Firebase 后台，不适合所有 Next.js 全栈
Firebase 的优势是“应用后台一条龙”：Hosting、Authentication、Firestore、Realtime Database、Cloud Messaging、Analytics、Crashlytics 等都在一个生态里。做移动 App、PWA、小型协作工具时很好用。
适合：
- SPA、PWA、移动 App 的 Web 配套页面。
- 使用 Firebase Auth、Firestore、Realtime Database 的项目。
- 不想自己维护登录、实时数据和推送的人。
需要注意：
- Firebase Hosting 本身适合静态资源和前端应用。
- Firebase Spark plan 不需要支付方式，适合入门和小项目。
- Cloud Functions、App Hosting、更多 Google Cloud 能力通常会涉及 Blaze 计划或 billing account。
- Next.js/Angular 这类 SSR 全栈项目，Firebase 更推荐 App Hosting，但这就不是“无卡纯免费”路线。
建议用法：如果 AI 生成的是 Firebase Auth + Firestore 的前端应用，可以用 Firebase Hosting；如果生成的是 Next.js SSR SaaS，先比较 Vercel、Netlify、Cloudflare，再决定要不要走 Firebase App Hosting。
Render 和 Koyeb：适合 AI 生成的传统后端
很多 vibe coding 项目不是前端站，而是一个真正的后端：Express、FastAPI、Django、Flask、Rails、带 Dockerfile 的 API 服务。这类项目放在 GitHub Pages 不可能，放在 Vercel/Cloudflare 也可能遇到运行时限制。
Render 的定位更像现代 Heroku。官方文档写明，Render 可以托管 Node.js Express、Python Django/FastAPI 等动态 Web app，也支持 Docker。它还有静态站、Postgres、Key Value 等服务。
Render Free 很适合体验和 hobby 项目，但官方也提醒不要用于生产。免费 web service 会休眠，免费 Postgres 固定容量且会过期，适合测试新技术和预览开发体验，不适合保存长期生产数据。
Koyeb 也适合 GitHub 或 Docker 部署，免费实例可以预览 Web Service，Serverless Postgres 也有免费类型。但同样要把它当作预览和小项目能力，别默认把免费实例当高可用生产环境。
建议用法：如果项目是 Python/Node 后端，先用 Render/Koyeb 把 demo 跑起来；一旦有真实用户，尽早升级到不会休眠、有备份、有明确资源的付费实例。
数据库怎么选
数据库选错，比托管平台选错更难迁移。
| 需求 | 推荐 |
|---|---|
| 想最快拿到 Postgres、Auth、Storage | Supabase |
| 只需要 Serverless Postgres | Neon |
| SQLite/libSQL、边缘读、小型多租户 | Turso |
| Cloudflare 全家桶 | D1 + KV + R2 |
| Firebase 生态、实时同步 | Firestore / Realtime Database |
| 缓存、限流、队列、小状态 | Upstash Redis |
| 临时测试传统后端 | Render/Koyeb Postgres 免费档 |
几个现实建议：
第一，用户数据不要长期放在会过期的免费数据库里。Render Free Postgres 这类更适合测试，不适合生产。
第二，免费数据库要看导出和迁移。Supabase、Neon、Turso、D1 都有自己的迁移路径和约束，别等到用户多了才第一次试备份。
第三，前端免费托管不等于后端免费。你可以把页面放 GitHub Pages，但登录、表单、数据库、文件上传一定在别处产生配额。
第四，不要把 secret 放到前端。只要代码会打包进浏览器，VITE_、NEXT_PUBLIC_、PUBLIC_ 这一类变量都可能被用户看到。真正的 API key、数据库连接串、支付密钥，必须放在服务端函数或后端环境变量里。
推荐组合
1. 最便宜作品展示
适合：作品集、简历页、开源项目介绍、AI 生成 landing page。
推荐：
- GitHub Pages 或 Cloudflare Pages。
- 框架用 Astro、Vite、Hugo、Jekyll、Docusaurus。
- 表单用 Tally/Google Forms，或者 Cloudflare Workers endpoint。
- 不接数据库，或者只接只读 JSON。
2. 0 月费轻量 MVP
适合：小工具、等待列表、低频 API、Webhook、内容站。
推荐：
- Cloudflare Workers/Pages。
- Hono/Astro/SvelteKit/Nuxt/React Router。
- D1 存结构化数据，KV 存配置和缓存，R2 存文件。
- 邮件用 Resend/Brevo 免费档。
- 分析用 Cloudflare Web Analytics 或 Microsoft Clarity。
3. Next.js/v0 省心路线
适合：v0 生成的 App、Next.js 原型、需要预览部署。
推荐：
- Vercel 部署。
- 数据库用 Supabase、Neon、Turso 或 Upstash。
- 个人 demo 可以先用 Hobby。
- 商业项目直接按 Pro 预算。
4. Supabase 全栈路线
适合：需要登录、Postgres、RLS、文件存储、Realtime 的产品。
推荐：
- 前端放 Cloudflare、Netlify、Vercel 或 GitHub Pages。
- 数据库、Auth、Storage 放 Supabase。
- 早期用 Free，接近生产时预算 Supabase Pro。
这条路线非常适合很多 AI 生成工具，因为它们默认就会生成 Supabase schema、RLS、登录逻辑。
5. Python/Node 后端路线
适合：FastAPI、Flask、Django、Express、NestJS、Docker 项目。
推荐：
- Demo 用 Render/Koyeb Free。
- 数据库可以用 Neon/Supabase，或平台自带 Postgres 做测试。
- 有用户后升级到不会休眠的付费实例。
- 静态前端仍然可以单独放 Cloudflare/Netlify/Vercel。
最容易踩的坑
1. 把 GitHub Pages 当后端
GitHub Pages 只发布静态文件。它不能运行 Python、PHP、Ruby，也不能替你安全地保存数据库密码。
如果你需要表单写入、AI API、支付回调，至少要加一个后端：Cloudflare Workers、Netlify Functions、Vercel Functions、Supabase Edge Functions、Render API 都可以。
2. 忽略 Vercel Hobby 商用限制
很多人用 Vercel 部署 Next.js，因为它确实顺手。但如果页面开始卖订阅、收款、接广告，或者你是收钱给客户托管，Hobby 就不是合适方案。
3. 免费数据库没有备份意识
免费档能跑，不代表生产可托付。至少要知道三件事：能不能导出、有没有备份、超额后是暂停还是自动扣费。
4. AI 生成代码里混了浏览器端密钥
这在 vibe coding 里很常见。看到 .env、.env.local、NEXT_PUBLIC_、VITE_ 时要多看一眼。前端可见变量不要放 OpenAI Key、Stripe Secret Key、数据库连接串。
5. 没有固定部署命令
每个项目都应该有清楚的：
npm install
npm run build
npm run dev
或者相应的 Python/Docker 命令。否则平台自动检测失败时，你会很难判断是代码问题还是平台问题。
一张选择表
| 你的目标 | 推荐平台 |
|---|---|
| 我只想把页面发出去 | GitHub Pages、Cloudflare Pages |
| 我想做能写数据库的小工具 | Cloudflare Workers + D1，或 Supabase + 任意前端托管 |
| 我用 v0 生成了 Next.js | Vercel，商用时升级 Pro |
| 我想要表单、函数、预览部署 | Netlify |
| 我做的是 Firebase App | Firebase Hosting + Firestore/Auth |
| 我做的是 Python API | Render 或 Koyeb |
| 我做的是 Docker 服务 | Render 或 Koyeb |
| 我希望以后迁移容易 | 前端和数据库分离，优先 Supabase/Neon/Turso/Postgres |
最后建议
vibe coding 的部署选择，不要从“哪个平台最免费”开始，而要从“这份代码到底需要什么运行环境”开始。
纯静态页面，GitHub Pages 很好。
轻量全栈，Cloudflare 很值得学。
Next.js 原型，Vercel 省心。
前端站加函数，Netlify 顺手。
Firebase 数据模型，Firebase Hosting 最自然。
Python/Node/Docker 后端，Render/Koyeb 更合适。
独立开发早期真正要省的，不是每一分钱，而是不要为了还没验证的产品背上固定账单。等用户开始真的使用、真的付费，再把托管、数据库、监控、备份、邮件和支付升级成生产配置。
免费额度是起跑线，不是商业模式。
资料来源：
- GitHub Pages：GitHub Pages documentation - GitHub Docs
- Cloudflare Workers Pricing：Pricing · Cloudflare Workers docs
- Vercel Fair Use Guidelines：Fair Use Guidelines
- Netlify Pricing：Pricing and Plans | Netlify
- Firebase Pricing：Firebase Pricing
- Render Deploy for Free：Deploy for Free – Render Docs
- Koyeb Instances：Instances | Koyeb
- Supabase Pricing：Pricing & Fees | Supabase
- Neon Pricing：Pricing — Neon
- Turso Pricing：Turso Database Pricing