从作品到上线 · Cursor 橙皮书

一、上线全景图

我们要做的事，按顺序：

代码（你电脑上）
   ↓ 1. 把代码推上 GitHub
GitHub 仓库
   ↓ 2. Vercel 一键部署
xxx.vercel.app（默认子域名）
   ↓ 3. 买一个域名 + 配 DNS
your-domain.com（你的正式网站）
   ↓ 4. 加 Supabase（数据库 + 用户系统）
   ↓ 5. 加 Stripe（支付）
   ↓ 6. 加监控 / 错误追踪
   ↓ 7. 30 项检查清单
正式可用的产品

普通人零基础完成全部步骤，约一个周末。

二、第 1 步：把代码推上 GitHub

2.1 装 Git

OS	怎么装
macOS	终端跑 `git --version`，会自动提示装 Xcode Command Line Tools
Windows	去 git-scm.com 下载安装
Linux	`sudo apt install git` 或 `sudo dnf install git`

2.2 注册 GitHub

去 github.com 注册账号。验证邮箱。

2.3 让 Cursor 帮你做一切

在 Cursor 里打开你的项目，按 Cmd+I：

帮我把这个项目推到 GitHub。

1. 初始化 git 仓库（如果还没有）。
2. 写一个 .gitignore（前端项目用 Node 模板）。
3. 写一份 README.md：项目简介、截图占位、本地启动、技术栈、协议。
4. 第一次 commit，message 写 "chore: initial commit"。
5. 在 GitHub 创建一个新仓库 my-pomodoro（公开）。
6. 把本地 push 上去。

@github 帮我创建仓库并推送。

如果你装了 GitHub MCP，Cursor 全自动跑完。没装 MCP 的话，Cursor 会让你手动去 github.com 点"New Repo"，然后给你 push 命令。

2.4 验证

打开 https://github.com/你的用户名/my-pomodoro，能看到你的代码。

三、第 2 步：Vercel 一键部署

3.1 Vercel 是什么

Vercel 是世界上最容易用的"前端 / 全栈部署平台"。

一键从 GitHub 仓库部署。
每次 git push 自动重新部署。
免费额度对个人项目绝对够。
全球 CDN 加速。

3.2 注册 + 部署

去 vercel.com，"Sign up with GitHub"。
授权它访问你的仓库。
主界面点 "Add New" → "Project"。
找到你的 my-pomodoro 仓库，点 "Import"。
框架选 "Other"（如果是纯 HTML）或自动识别 Vite / Next.js。
点 "Deploy"。

约 30-60 秒后，部署完成。Vercel 给你一个网址：

https://my-pomodoro-xxxx.vercel.app

打开看看。你的网站已经上线，全世界都能访问。

3.3 自动部署

之后你每次 git push：

Vercel 自动检测到变化。
自动重新部署。
几十秒后线上更新。

不需要手动 SSH、不需要管服务器。这是 2026 年部署的标准姿势。

3.4 让 Cursor 帮你部署

如果你怕忘步骤，让 Cursor 全程指挥：

我已经把代码 push 到 GitHub 了。
请告诉我 Vercel 部署的每一步：从注册到拿到上线 URL，
配截图描述（虽然你看不到，但描述每个按钮在哪）。

四、第 3 步：买一个属于你的域名

4.1 为什么要买域名

my-pomodoro-xxxx.vercel.app 难记又不专业。 pomodoro.work 简短、好记、显得正经。

域名是你的"互联网门牌"——第一个真正属于你的数字资产。

4.2 在哪里买

注册商	优点	缺点
Cloudflare Registrar	全球便宜、原价、续费不涨价	需要绑信用卡
Namecheap	第一年很便宜	续费稍贵
阿里云 / 腾讯云	国内、支付宝	需要 ICP 备案才能用国内 DNS
GoDaddy	大牌、国内能访问	续费贵、有套路销售

强烈推荐 Cloudflare Registrar——做技术的人首选，它"按成本价 + $0.18 服务费"卖你域名。

4.3 买什么后缀

.com —— 经典，建议优先。
.io / .work / .so / .app / .dev —— 国际感、年轻气息。
.cn —— 国内业务。注意：必须 ICP 备案才能用国内服务器和 DNS。
别买 .xyz / .top —— 显得不专业、容易被误判垃圾。

4.4 价格参考（2026 年）

.com：约 $10/年（Cloudflare）。
.io：约 $30/年。
.work / .so / .app / .dev：约 $10-25/年。
.cn：约 ¥30/年（阿里云）。

4.5 买完之后：把域名指到 Vercel

在 Vercel

项目页 → Settings → Domains。
输入你的域名，比如 pomodoro.work。
Vercel 给你两组 DNS 记录（A 或 CNAME）。

在 Cloudflare（或你的 DNS 服务商）

进域名 DNS 管理。
添加 Vercel 给的记录。
等 1-30 分钟生效。

4.6 让 Cursor 帮你

我刚在 Cloudflare 买了 pomodoro.work。
帮我一步步配置 DNS，让它指向 Vercel 上的 my-pomodoro 项目。
告诉我每一步要在哪个网页点什么按钮、填什么。

五、第 4 步：HTTPS 自动配置

好消息：Vercel 自动给你免费 HTTPS。

域名解析生效后，浏览器访问 https://pomodoro.work 自动有小绿锁。不需要任何手动配置。

不放心可以查一下：

Qualys SSL Labs 输入你的域名，看评分（一般 A 或 A+）。

六、第 5 步：加 Supabase 做用户系统

6.1 Supabase 是什么

Supabase 是开源版的 Firebase——一个集成了 Postgres 数据库 + 用户认证 + 文件存储 + 实时同步 的后端服务。

免费档：500MB 数据库 + 5GB 流量 + 50000 月活用户。对个人项目极其够用。

6.2 注册 + 创建项目

去 supabase.com，用 GitHub 注册。
创建一个 Organization。
New Project：名字 pomodoro-pro、数据库密码记好、地区选离你近的（如 Tokyo）。
等 1-2 分钟创建完成。

进项目后，你能看到 4 个核心：

Database —— Postgres 表、SQL 编辑器。
Authentication —— 用户管理。
Storage —— 文件存储。
Edge Functions —— Serverless 函数。

6.3 让 Cursor 帮你接入

打开你的番茄钟项目，按 Cmd+I：

帮我给番茄钟项目加 Supabase 的认证 + 番茄记录持久化。

【现状】
- 项目是 Next.js 15 + Tailwind 4。
- 番茄数据现在存 localStorage。
- 我想升级到：用户邮箱注册 → 数据存 Supabase。

【步骤】
1. 装 @supabase/supabase-js。
2. 在 .env.local 加 NEXT_PUBLIC_SUPABASE_URL 和 NEXT_PUBLIC_SUPABASE_ANON_KEY 占位（我之后填）。
3. 创建 lib/supabase.ts 初始化 client。
4. 写 SQL 创建表：
   - profiles（id, email, created_at）
   - pomodoros（id, user_id, started_at, ended_at, type, completed）
5. 在 Supabase Dashboard 打开 RLS（行级安全），写策略：用户只能读 / 写自己的数据。
6. 改前端：localStorage 数据迁移到 Supabase；未登录用户继续用 localStorage。
7. 加登录 / 注册 UI（用 Supabase 的 magic link 邮箱登录）。

@supabase 如果可以，直接帮我执行 SQL 和配置 RLS。

按 Plan → Act 流程，先列方案，等我确认。

6.4 RLS：千万别忘的安全设置

Row Level Security（RLS） 是 Postgres 的"行级权限"。Supabase 默认所有表 RLS 关闭——意味着只要拿到 anon key，任何人能读所有数据。

每张表创建后第一件事：开 RLS 写策略。

-- 让 RLS 生效
alter table pomodoros enable row level security;

-- 只允许用户读自己的番茄
create policy "用户只读自己的番茄"
on pomodoros for select
using (auth.uid() = user_id);

-- 只允许用户写自己的番茄
create policy "用户只写自己的番茄"
on pomodoros for insert
with check (auth.uid() = user_id);

让 Cursor 帮你写：

@supabase 给 pomodoros 表写 RLS 策略：
用户只能 select / insert / update / delete 自己的记录。

6.5 验证 RLS 生效

用 Supabase REST API 文档的"Try"功能，模拟未登录用户拉数据，应该返回空数组。登录后再拉，能看到自己的数据，看不到别人的。

七、第 6 步：加 Stripe 收钱

7.1 Stripe 是什么

Stripe 是世界上最好用的支付平台——开发者文档清晰、SDK 齐全、有 test mode。

国内用户的两个限制：

不能直接收人民币（除非有海外公司主体）。
国内用户开户麻烦。

替代：

国内：易支付 / 支付宝 / 微信支付 / 收钱吧（针对个人）。
海外：Stripe / Paddle / LemonSqueezy（接入比 Stripe 简单，含税务代理）。

下面以 Stripe 为例。

7.2 注册 + 拿 Test Key

去 stripe.com，注册。
主界面右上角切到 Test mode。
Developers → API keys → 复制 Secret key（sk_test_...）和 Publishable key（pk_test_...）。

7.3 让 Cursor 帮你接入

按 Cmd+I：

帮我给番茄钟项目加 Stripe 订阅支付。

【目标】
- 免费版：所有人都能用基础番茄钟。
- Pro 版：$5 / 月，包含云同步、长期统计、自定义铃声。

【接入清单】
1. 装 stripe + @stripe/stripe-js。
2. 在 .env.local 加 STRIPE_SECRET_KEY、NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY、STRIPE_WEBHOOK_SECRET。
3. 在 Stripe Dashboard 创建产品"番茄钟 Pro"，价格 $5/月（test mode）。
4. 写 API route /api/checkout：用户点"升级"时创建 Stripe Checkout Session。
5. 写 API route /api/webhook：接 Stripe webhook，用户付款成功后在 Supabase 标记 user is_pro = true。
6. 前端加"升级 Pro"按钮和"管理订阅"按钮（用 Stripe 的 customer portal）。
7. 在所有 Pro 功能加权限检查：未付费用户跳转付费页。

@stripe 如果可以，直接帮我创建 test 产品和价格。
@supabase 给 profiles 表加 is_pro / stripe_customer_id / stripe_subscription_id 字段。

先列方案。

7.4 测试支付

Stripe test mode 提供测试卡号：

4242 4242 4242 4242 —— 任何未来日期 + 任何 3 位 CVC，支付成功。
4000 0000 0000 9995 —— 支付失败。

完整测试卡号见 stripe.com/docs/testing。

7.5 切换到 Live mode

测试通过后：

Stripe Dashboard 切到 Live mode。
重新拿一份 Live key。
Vercel 项目 → Settings → Environment Variables，把 STRIPE_SECRET_KEY 等替换成 live key。
重新部署。

第一笔真实的钱进账时，会有一种特殊的感觉。

7.6 国内替代方案：Paddle / LemonSqueezy

都是"商户记录方"模式：他们当卖家，帮你处理税务、合规、退款。
适合个人开发者（不想注册海外公司）。
抽成比 Stripe 高（5-8%），但是省 90% 麻烦。
LemonSqueezy 文档极简，半小时接入。

让 Cursor 帮你接：

我没有海外公司，请帮我用 LemonSqueezy 替代 Stripe 接入支付。
功能要求和 Stripe 方案一样。

八、第 7 步：监控 + 错误追踪

线上跑了出错怎么办？你不会知道，直到用户给你发邮件骂你。

加监控和错误追踪解决这问题。

8.1 错误追踪：Sentry

sentry.io 免费档：5000 errors/月，对个人项目够用。

帮我给项目接入 Sentry：
1. 装 @sentry/nextjs。
2. 跑 npx @sentry/wizard@latest -i nextjs，按提示填 DSN。
3. 改 sentry.client.config.ts，把 tracesSampleRate 设成 0.1（10% 采样，省额度）。
4. 在 layout.tsx 加全局错误边界 ErrorBoundary。
5. 测试：故意 throw 一个错误，确认 Sentry 收到。

之后线上有任何 JS 错误：你的 Sentry 会立刻收到通知（含堆栈、用户、浏览器、URL）。

8.2 性能监控：Vercel Analytics

Vercel 项目 → Analytics 标签 → Enable。免费 $0，自动收集 Web Vitals（LCP、FID、CLS）。

帮你定位"哪些页面慢"。

8.3 用户行为：Plausible / Umami

不想用 Google Analytics（隐私 + 速度）？

Plausible：开源、$9/月、隐私友好。
Umami：自部署免费、隐私友好。

帮我加 Plausible analytics：
- 装 next-plausible。
- domain 填 pomodoro.work。
- 在 layout.tsx 加 PlausibleProvider。

8.4 状态页：Statuspage

用户访问时 503 怎么办？给他们一个状态页。

简单方案：

betterstack.com：免费档，几分钟搭一个状态页。
自己做：上线一个 status.your-domain.com 子域名，纯静态页面手动维护。

复杂的可以接 UptimeRobot 自动检测。

九、第 8 步：上线前 30 项检查清单

下面 30 项是"上线必查"。全部通过再点 Deploy。

功能层（10 项）

1. 在浏览器里把所有功能点过一遍。
2. 在 iPhone Safari 上点过一遍。
3. 在 Android Chrome 上点过一遍。
4. 注册 → 登录 → 退出登录 → 重新登录流程通。
5. 忘记密码流程通（如果有）。
6. 付费流程：从点击升级 → 跳 Stripe → 付款 → 回跳 → 权限解锁全流程通。
7. 退订流程通：用户能自助取消订阅。
8. 数据备份：手动 export 一次完整数据，能正确导入恢复。
9. 离线表现：断网时不会卡死，给提示。
10. 加载状态：所有按钮点击后有 loading 反馈。

视觉层（5 项）

11. 320px 宽（小屏手机）不破版。
12. 1080p 屏（最常见 PC）布局舒服。
13. 4K 屏不会"小到看不见"。
14. 深色模式所有页面都正确（包括邮件、PDF）。
15. 所有图片有 alt 属性。

SEO + 元信息（5 项）

16. <title> 和 <meta description> 每页都填了。
17. og:image 设置了（社交分享时显示的图）。
18. favicon 有了（标签页小图标）。
19. 添加 robots.txt 和 sitemap.xml。
20. Schema.org 结构化数据（适用产品 / 文章 / 软件）。

法律 + 合规（5 项）

21. 隐私政策页（/privacy）。
22. 服务条款页（/terms）。
23. Cookie 提示（如果用了 GA / Plausible）。
24. 退款政策（如果收费）。
25. 联系方式（/contact，至少有邮箱）。

运维 + 安全（5 项）

26. Sentry 接入并测试过收到错误。
27. 数据库 RLS 全部开了。
28. 所有 API key 在环境变量里，不在代码里。
29. Vercel 项目设置 → Production Branch 是 main，没人能直接 push 到 main 上线（建议用 PR）。
30. 关键功能（登录、付费、写库）都加了错误处理，不会白屏。

让 Cursor 帮你跑清单

@File 11-第十一章-从作品到上线.md 找"上线前 30 项检查清单"。
对照我的项目 my-pomodoro，逐项检查，写一份审计报告：
- ✓ 已通过的项
- ✗ 未通过的项 + 应该怎么修

@playwright 跑功能层 1-10 项的自动化检查。
@filesystem 检查环境变量、隐私政策等文件是否存在。

十、第 9 步：第一波"用户从哪来"

上线了不等于有人用。新手最常见的"做完就死"。下面是 5 个 0 成本获取第一波用户的渠道。

渠道 1：Product Hunt

全球独立产品发布平台。
周二、周三发产品最容易上榜。
准备：精美 logo + 5 张截图 + 一段 60 秒 demo 视频。
makers 中文教程。
一次成功的发布能带 500-3000 个访问。

渠道 2：即刻

中文版 Twitter，独立开发者氛围浓。
发"我做了 X 工具，X 元/月"+ 截图 + 链接。
评论区互动，加好友。
一次精彩的动态能带 100-1000 个访问。

渠道 3：小红书

工具类产品 + 截图笔记，效果好。
标题模板："终于不用 [痛点] 了！我做了一个 [品类]"。
发 5-10 篇笔记测试哪个有量。

渠道 4：V2EX

程序员社区。
"分享创造"节点发帖。
标题"做了一个 [品类] 工具，求轻拍"。
优点：精准用户，转化率高。

渠道 5：朋友圈 + 朋友帮转

别小看个人渠道。
第一波 50 个用户大概率来自身边。
真人推荐 > 任何渠道。

十一、综合演练：把番茄钟变成 pomodoro.work

按本章顺序，给你一个3 个晚上完整的执行计划：

晚上 1（2 小时）

第 1 步：推 GitHub（30 分钟）
第 2 步：Vercel 部署（30 分钟）
第 3 步：买域名 + 配 DNS（60 分钟，等 DNS 生效）

晚上 2（3 小时）

第 5 步：Supabase 接入 + 用户认证（90 分钟）
第 6 步：Stripe / Lemon 接入 + test 通过（90 分钟）

晚上 3（2 小时）

第 7 步：Sentry + Plausible（30 分钟）
第 8 步：30 项检查清单（90 分钟）
切到 Live mode + 第一次"真上线"（庆祝 🎉）

周末

第 9 步：发 ProductHunt + 即刻 + 小红书 + V2EX。
周一早上看后台数据。

十二、上线后第一周你会经历什么

Day 1：兴奋。看着访问数从 0 涨到 100，感觉做梦。
Day 2：第一个 bug 报告。开始焦虑，赶紧修。
Day 3：第一个付费用户。看到 Stripe 通知"You earned $5"，那种感觉记一辈子。
Day 4：流量回落到日均个位数。开始怀疑人生。
Day 5：写第二篇 SEO 文章 / 录一个 demo 视频，准备第二波传播。
Day 6：用户来 issue 区提需求。开始按优先级排版本。
Day 7：意识到"上线只是开始"。

这就是产品人的真实路径。 Cursor 让"做出来"成本暴跌，但是"做好"和"做大"依然要时间和心血。

十三、本章 5 个最值钱的认知

2026 年部署一个网站的成本接近零：Vercel + 域名 = $10/年，全部搞定。
数据库不需要自己运维：Supabase 帮你管 Postgres + 备份 + 扩展。
支付不再难：Stripe / Lemon / Paddle 几小时接入，比你想的简单 10 倍。
监控免费：Sentry / Plausible / Vercel Analytics 全部免费档够用。
真正难的是"获取用户"：技术不是瓶颈，营销和坚持才是。

本章一图回顾

上线全景
═══════════════════════════════════════════════
  代码 →  GitHub  →  Vercel  →  域名  →  Supabase
                                            ↓
                                         Stripe
                                            ↓
                                       Sentry / Plausible
                                            ↓
                                       30 项检查
                                            ↓
                                        正式上线

时间预估
─────────────
  晚上 1：GitHub + Vercel + 域名         2 小时
  晚上 2：Supabase + Stripe              3 小时
  晚上 3：监控 + 30 项检查 + 上线         2 小时
  周末：5 个渠道发布

30 项检查清单（4 类）
─────────────
  功能层 10 项 / 视觉层 5 项 / SEO 5 项
  法律 5 项 / 运维安全 5 项

第一波获客渠道
─────────────
  Product Hunt（国际）
  即刻（中文独立开发者）
  小红书（工具类）
  V2EX（程序员）
  朋友圈（亲友）

5 个最值钱的认知
─────────────
  1. 部署近乎免费
  2. 数据库免运维
  3. 支付不再难
  4. 监控免费够用
  5. 难在获客 + 坚持

下章预告

到这里你已经能做一个完整的产品。最后一章第十二章避坑指南与持续成长我们一起回顾"普通人用 Cursor 最容易踩的 8 个坑"，讲成本控制、隐私、Git 兜底，最后给你一份"持续成长的 12 个月学习路径"。