周末想试点新东西：给自己做一个站
「周末搞副业」群里，朋友刚发来自己用 AI 搭的作品集链接，并随口一句：个人站挺适合试新东西。你回「正好想弄一个，今天试试」——不是被催着交差，而是自己想扩副业、练一手新技能。真正拦住你的，往往是「建站门槛看起来好高」。
这件事，以前和现在怎么做？
想试，却先陷进准备清单
- 报课学 HTML / CSS / JS / 框架
- 配服务器、域名、备案绕一圈
- 兴致被准备工作消耗完，站还是 0
描述 → 生成 → 上线
- 用提示词把想法写清楚
- Cursor 写代码，本地预览迭代
- 推 GitHub，Vercel 一键部署
三条建站路径，入门成本差一个数量级
当你想主动做一个真正能打开的网站时，面前通常只有三条路。选哪条，直接决定这周末能不能上线。
先学前端再动手
课程、框架、环境配置、云服务器。光「准备」就能把试新东西的兴致磨掉——适合想转码的人，不适合「这周末就想有个链接」。
模板站 / 建站平台拖拽
能很快出壳，但定制弱、迁移难、品牌感有限。改深层逻辑时仍会撞墙。
用 AI 编码工具（Cursor）
描述需求 → Plan 审方案 → Agent 出代码 → 本地预览 → 推送部署。零基础也能当「导演」，适合个人站、落地页、小工具。
为什么这篇用 Cursor + GitHub + Vercel
路径已定：用 AI 写站。下面按「今晚能上线、免费起步、国内可开」比常见组合。
| 对比维度 | Cursor + GitHub + Vercel | 纯手写 + 自建服务器 | 拖拽建站平台 | 仅 Chat 对话写代码 |
|---|---|---|---|---|
| 上手门槛 | 会提问即可；Plan/Agent 分工清晰 | 需前端 + 运维基础 | 低，但深度定制受限 | 低，但难管多文件项目 |
| 从想法到公网 | 约 2 小时可出链接 | 常以天/周计 | 快，但平台锁定 | 代码有了仍要自己部署 |
| 成本 | 免费额度够个人站 | 服务器 + 人力 | 常有订阅墙 | 对话免费/付费不等 |
| 代码归属 | 在你 GitHub，可迁移 | 完全自有 | 常绑平台 | 散落在对话里 |
从「想做」到「能打开」：6 步建站
照着流水线走即可。每步只盯一个目标——写清需求、审计划、生成、本地预览、迭代、上线。
写清楚你想要什么：需求提示词 ⏱ ~10分钟
先想清三件事：网站类型（展示 / 工具 / 博客）→ 目标访客 → 核心页面。用下方模板填空，再打开 Cursor。
用 Cursor：先 Plan，再 Agent ⏱ ~30分钟
新建空文件夹作项目，粘贴提示词。先用 Plan 模式审文件结构与方案；确认后切 Agent 模式让 AI 生成代码。
本地跑起来，边改边看 ⏱ ~5分钟
纯静态可直接打开 index.html；或问 Cursor「怎么本地启动」，常见如 npx serve .，浏览器打开 localhost:3000。
需要存数据？接 Supabase（可选） ⏱ ~15分钟
有表单、登录、动态列表再接；纯简历/落地页可跳过。用下方 supabase_prompt.txt 让 Cursor 帮你写接入代码，并强调密钥不进前端。
迭代到满意：一次只改一个方向 ⏱ ~30分钟
先定内容，再调视觉，最后加交互。每轮只改 1–2 点，刷新验证——详见「迭代微调」。
推 GitHub + Vercel 一键部署 ⏱ ~15分钟
本地满意后推仓库，再 Vercel 部署——两步都做完才算上线。详见「部署上线」。
两套拿来即用的建站提示词
第一套用于从零搭站；第二套仅在需要数据库时使用。把【】里的占位换成你的信息即可。
| 提示词要素 | 说明 | 示例 |
|---|---|---|
| ① 网站类型 | 展示 / 工具 / 博客等 | 个人作品集 |
| ② 目标访客 | 谁会来看 | 招聘方 / 潜在客户 |
| ③ 核心目的 ★ | 访客来了要做什么 | 留下联系方式 / 了解产品 |
| ④ 页面结构 | 首页 + 关键页 | 首页、关于、联系 |
| ⑤ 设计偏好 | 风格与主色 | 简洁现代，深蓝+白 |
| ⑥ 技术约束 | 栈与响应式 | HTML/CSS/JS，手机可用 |
别跳过 Plan。第一轮强制让 AI 先列计划，你审查文件结构与方案——比生成完再推倒重来省很多时间。
先 Plan，再 Agent：两步都要走
不是二选一。建站时先用 Plan 审方案，确认后再用 Agent 落代码——缺一不可，跳过 Plan 直接生成最容易返工。
Plan 模式
动手前先拿执行方案：要建哪些文件、用什么结构。你来审查，方向偏了立刻纠正。
Agent 模式
Plan 确认后全自动执行：创建/修改多文件、修明显报错。你观察，必要时喊停。
两步是流水线，不是二选一。① Plan 列方案并你确认 → ② Agent 执行 → 本地刷新。满意继续下一轮；不满意先回到 Plan 再改，不要跳过审方案。
从空文件夹到 Vercel Ready
按本文流水线走完后，Vercel 控制台显示 Ready，即表示公网部署成功——下面是实测部署页示意。
▲ 个人站首次部署
能一次上线，关键有三点：① 提示词写清类型/访客/目的，而不是「帮我做个网站」；② Plan 审过文件结构再生成；③ 本地硬刷新验证后再 push。
第一版只有 60 分？按方向追问
把 Cursor 当成执行力很强的工程师：你负责说清「改什么」，它负责改文件。下面几条最管用。
微调黄金法则：每轮 1–2 个维度。同时改文案 + 布局 + 动效，等于从零开干。锁定满意部分，再集中火力改不满意的部分。
部署前：4 个维度快速自检
生成完毕不等于能上线。花几分钟过一遍，能避开大半「发出去才发现」的尴尬。
小技巧：本地用 Cmd/Ctrl+Shift+R 硬刷新再验收。改对了文件但浏览器仍旧缓存，最容易误判「没生效」。
推 GitHub，再 Vercel：两步都做完才算上线
本地满意后，按顺序完成下面两步。缺一不可：没有 GitHub 仓库，Vercel 无从连接；只推仓库不部署，公网仍然打不开。
上传至 GitHub
新建仓库 → git init / add / commit → remote add → push。不会命令就问 Cursor：「帮我把项目推到 GitHub」。
Vercel 一键部署
vercel.com 用 GitHub 登录 → Add New Project → 选刚推送的仓库 → Deploy。约 60 秒拿到 *.vercel.app；之后每次 push 自动更新。
两步是流水线，不是二选一。① 把代码落到 GitHub；② 用 Vercel 连上该仓库并 Deploy。两步都 Ready，才算「部署上线」完成。
回顾：从想法到上线的 6 步
下次建站不用翻全文——记住这条流水线即可。
安全与归属提示。代码在你自己的 GitHub 仓库；密钥与隐私数据勿提交。商用文案与图片请确认版权。API Key：anon 可按平台说明使用，service_role 永不进前端。
踩坑了？先看这 6 个高频问题
零基础建站时，下面这些问题几乎都会遇到——都有解法。
多半还没装 Node.js。去 nodejs.org 装 LTS，装完重启终端，用 node -v 确认。仍不行就把报错贴给 Cursor，让它按你的系统配环境变量。
用 SSH Key，或 HTTPS + Personal Access Token（不是登录密码）。Token 在 GitHub → Settings → Developer settings。直接问 Cursor：「git push 报权限错误，帮我解决」也可逐步带你走。
常见：入口不是根目录 index.html；框架 build 命令不对；前端路由缺 vercel.json 重写。看 Build Logs 红字，整段复制给 Cursor 修。
把终端报错原文完整粘贴给 Cursor，不要只说「跑不起来」。仍不行就先 Plan 列原因再执行修复。
确认本地服务还在跑，用 Cmd/Ctrl+Shift+R 硬刷新。并确认改的是正确路径下的文件。
有用户填写或动态列表再接。纯展示简历/落地页/文档站可跳过，先把静态站上线。
上线之后：三个持续维护动作
会部署一次，和能稳定改版，是两回事。记住：本地改 → push → Vercel 自动更新。
改文字内容
Cursor 改文件 → 本地确认 → git commit && push → 约 60 秒生效。
加新页面
永远先 Plan 再 Agent；本地验证后再推。新页面最容易在路由上翻车。
绑自定义域名
Vercel → Settings → Domains，按提示改 DNS。需已有域名。