周末想试点新东西：给自己做一个站
「周末搞副业」群里，朋友刚发来自己用 AI 搭的作品集链接，并随口一句：个人站挺适合试新东西。你回「正好想弄一个，今天试试」——不是被催着交差，而是自己想扩副业、练一手新技能。真正拦住你的，往往是「建站门槛看起来好高」。
这件事，以前和现在怎么做？
想试，却先陷进准备清单
- 报课学 HTML / CSS / JS / 框架
- 配服务器、域名、备案绕一圈
- 兴致被准备工作消耗完，站还是 0
描述 → 生成 → 上线
- 用提示词把想法写清楚
- Cursor 写代码，本地预览迭代
- 推 GitHub，Vercel 一键部署
三条建站路径，入门成本差一个数量级
当你想主动做一个真正能打开的网站时，面前通常只有三条路。选哪条，直接决定这周末能不能上线。
先学前端再动手
课程、框架、环境配置、云服务器。光「准备」就能把试新东西的兴致磨掉——适合想转码的人，不适合「这周末就想有个链接」。
模板站 / 建站平台拖拽
能很快出壳，但定制弱、迁移难、品牌感有限。改深层逻辑时仍会撞墙——本篇不走这条。
AI 写站 → GitHub → Vercel
描述需求 → Cursor Plan 审方案 → Agent 出代码 → 本地预览 → 推 GitHub → Vercel Deploy。你当「导演」；托管 + 部署两步都做完才有公网链接。
分流口诀：想先系统学前端 → 左侧，周末出不了链接。想拖拽模板站 → 中间，快但难迁移。要可迁移代码 + 公网链接 → 只走右侧三步链（见「工具选择」）：写站用 Cursor，托管用 GitHub，部署用 Vercel。
推荐路径的三步工具链
对齐右侧推荐路径：写站 → 托管 → 部署——三步各用不同能力，不是「只开 Cursor 就算上线」。左侧学前端 / 中间拖拽平台不进本表 ★；纯 Chat 对话写代码只能凑第 ① 步草稿，管不好多文件项目，也替不了 ②③。
| 环节 | 默认工具 | 做什么 | 平替 / 换刀 | 别指望它 |
|---|---|---|---|---|
| ① 写站 | Cursor ★ | 先 Plan 审方案，再 Agent 出多文件代码；本地预览时把报错原文贴回对话修 | 其他 AI IDE（能力接近即可）；纯 Chat 仅适合极短单文件草稿 | 替你 Deploy 上公网；完全不用碰终端 / 报错也能一次过 |
| ② 托管 | GitHub ★ | 代码进你的仓库，可回滚、可迁移；Vercel 从这里拉代码 | GitLab / 其他 Git 托管（连 Vercel 时选对应源） | 推上去就算网站上线；在网页上改完却不在本地验证 |
| ③ 部署 | Vercel ★ | 连仓库 → Deploy → Ready 出 *.vercel.app；之后 push 自动更新 |
Netlify / Cloudflare Pages（流程类似，本篇默认 Vercel） | 跳过本地预览也能保证首屏正确；替你写业务代码 |
| ④ 数据（可选） | Supabase | 有表单 / 登录 / 动态列表再接；anon 可按文档用，service_role 永不进前端 | 其他 BaaS / 自建 API | 纯展示简历 / 落地页也「必须」先接库 |
与路径卡对齐：右侧推荐 = ①→②→③ 全走（本地预览挂在 ① 末尾，不单独占工具位）。中间拖拽平台 = 不进本链。左侧学前端 = 本篇不覆盖。事实边界：没学过前端也能走完本链，但必须愿意装 Node LTS、跟着终端提示操作、把报错原文贴给 Cursor——不是「完全零概念、永远不碰命令行」。全局能力边界见 Cursor 适合 / 不适合。
开始前 5 件事（约 15 分钟）。① 电脑（Mac/Windows）；② 稳定网络；③ GitHub 账号；④ 安装 Cursor（免费版即可，详见 站内 Cursor 页）；⑤ 推荐 Chrome。需要 npx serve 时再装 Node.js LTS。Supabase 仅在有表单/登录/动态列表时再开。
从「想做」到「能打开」：6 步建站
默认走 Cursor → GitHub → Vercel 三步链（见「工具选择」）。操作上拆成 6 步：写清需求、Plan→Agent、本地预览、可选 Supabase、迭代、托管+部署——每步只盯一个目标。
写清楚你想要什么：需求提示词 ⏱ ~10分钟
先想清三件事：网站类型（展示 / 工具 / 博客）→ 目标访客 → 核心页面。用下方模板填空，再打开 Cursor。
用 Cursor：先 Plan，再 Agent ⏱ ~30分钟
新建空文件夹作项目，粘贴提示词。先用 Plan 模式审文件结构与方案；确认后切 Agent 模式让 AI 生成代码。这是工具链第 ① 步（详见 Cursor 适合 / 不适合）。
本地跑起来，边改边看 ⏱ ~5分钟
纯静态可直接打开 index.html；或问 Cursor「怎么本地启动」，常见如 npx serve .，浏览器打开 localhost:3000。
需要存数据？接 Supabase（可选） ⏱ ~15分钟
有表单、登录、动态列表再接；纯简历/落地页可跳过。用下方 supabase_prompt.txt 让 Cursor 帮你写接入代码，并强调密钥不进前端。
迭代到满意：一次只改一个方向 ⏱ ~30分钟
先定内容，再调视觉，最后加交互。每轮只改 1–2 点，刷新验证——详见「迭代微调」。
推 GitHub + Vercel 一键部署 ⏱ ~15分钟
本地满意后推仓库（工具链第 ② 步），再 Vercel Deploy（第 ③ 步）——两步都 Ready 才算上线。详见「部署上线」。
两套拿来即用的建站提示词
第一套用于从零搭站；第二套仅在需要数据库时使用。把【】里的占位换成你的信息即可。
| 提示词要素 | 说明 | 示例 |
|---|---|---|
| ① 网站类型 | 展示 / 工具 / 博客等 | 个人作品集 |
| ② 目标访客 | 谁会来看 | 招聘方 / 潜在客户 |
| ③ 核心目的 ★ | 访客来了要做什么 | 留下联系方式 / 了解产品 |
| ④ 页面结构 | 首页 + 关键页 | 首页、关于、联系 |
| ⑤ 设计偏好 | 风格与主色 | 简洁现代，深蓝+白 |
| ⑥ 技术约束 | 栈与响应式 | 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 个高频问题
工具链怎么选、不会命令行怎么办、推仓库算不算上线——每条先给结论，再给排障步骤。
因为要上线，必须走完三步链：① 写站用 Cursor（先 Plan 再 Agent）→ ② 托管用 GitHub → ③ 部署用 Vercel；托管 + Deploy 都 Ready 才算交付。纯展示站可先不接 Supabase；有表单 / 登录再加。拖拽平台 / 纯 Chat 对话都不进本篇 ★。
能走完个人展示站——前提是愿意装 Node LTS、跟着终端提示操作，并把报错原文贴回 Cursor；不是「永远不用碰命令行」。先想清网站类型与核心页；本地用 npx serve 预览前需 Node；卡在命令行时不要只说「不行」。若连文件/文件夹都不想碰，本链不合适，应换拖拽建站（路径中间卡），而不是硬开 Cursor。
不算——那只完成工具链第 ② 步；还要第 ③ 步 Vercel Deploy 到 Ready，公网能打开才算交付。跳过本地预览直接推、或只推仓库不部署，都是弯路。
多半没装 Node.js：去 nodejs.org 装 LTS，重启终端，用 node -v 确认。仍不行把报错整段贴给 Cursor 配环境——这是第 ① 步本地验收的一部分，不是部署工具的锅。
常见是入口路径、build 命令或路由重写不对——看 Build Logs 红字整段给 Cursor（仍回第 ① 步修，再 push 触发第 ③ 步自动更新）。
有用户填写或动态列表再接（工具表第 ④ 行可选）；纯展示简历 / 落地页可跳过，先把 ①→②→③ 静态站上线。
上线之后：三个持续维护动作
会部署一次，和能稳定改版，是两回事。记住：本地改 → push → Vercel 自动更新。
改文字内容
Cursor 改文件 → 本地确认 → git commit && push → 约 60 秒生效。
加新页面
永远先 Plan 再 Agent；本地验证后再推。新页面最容易在路由上翻车。
绑自定义域名
Vercel → Settings → Domains，按提示改 DNS。需已有域名。
更多资源
建站遇到本文没覆盖的问题，优先看这些权威入口：