VibeCoding零基础教程（三）：准备与部署

一、说在最前​

内容覆盖四个阶段：注册 GitHub → 获取和启动项目 → 选择 AI 工具 → 部署上线​

二、GitHub：注册与基本操作​

2.1 为什么需要 GitHub​

GitHub 是代码托管平台，可以理解成”代码的网盘”。做 Vibe Coding 时，你不需要精通 Git 命令，但需要一个 GitHub 账号，用来：​

​

💙

•

Fork（复制）别人的开源项目到自己的账号下，不用担心改坏原项目​

•

保存你的修改，每次改动都有记录，随时可以回退​

•

部署上线，很多部署平台可以直接读取 GitHub 仓库，自动部署​

​

2.2 注册账号​

打开 github.com，用邮箱注册即可。建议：​

•

用户名选一个好记的，会出现在你的个人主页地址里，比如 github.com/你的用户名​

2.3 配置 SSH Key（推荐）​

注册完账号后，建议做一件事：配置 SSH Key。配置之后，你在终端操作 GitHub（比如下载项目、上传修改）时不需要每次输入用户名和密码。​

生成 SSH Key 的步骤：​

Mac 和 Windows 都一样，打开终端（Mac 是 Terminal，Windows 是 PowerShell 或 Git Bash），输入：​

​

代码块​

Plain Text

ssh-keygen -t ed25519 -C "你的邮箱@example.com"​

​

一路回车（默认路径、不设密码），就会生成一对密钥。然后用以下命令查看公钥内容：​

​

代码块​

Plain Text

cat ~/.ssh/id_ed25519.pub​

​

把输出的内容复制，打开 GitHub → Settings → SSH and GPG keys → New SSH key，粘贴进去保存。​

验证是否配对成功：​

​

代码块​

Plain Text

ssh -T git@github.com​

​

看到 Hi 你的用户名! You've successfully authenticated 就说明配置成功。​

​

如果你暂时不想配 SSH Key，也可以用 HTTPS 方式操作 GitHub（每次需要输入密码或 token），不影响使用。​

​

​

​

三、获取项目代码​

当你找到一个想用的开源项目（或者别人分享给你的项目），需要把代码弄到自己的电脑上。这一节讲三种方式。​

3.1 方式一：Download ZIP（最简单）​

在项目页面点击绿色的 Code 按钮，选择 Download ZIP，解压到你想要的目录。​

优点： 零门槛，不需要安装任何工具。​

缺点： 没法和原项目同步更新，也没法把你的修改推送到 GitHub。​

适合只是看看代码、本地跑一下试试的情况。​

3.2 方式二：Fork + Clone（推荐）​

如果你想基于别人的项目做改造，推荐这个方式。​

第一步：Fork​

Fork 就是把别人的项目复制一份到你自己的 GitHub 账号下。之后的任何修改都是在你的副本上操作，不会影响原项目。​

操作方式：打开项目页面 → 右上角点击 Fork → 确认即可。​

第二步：安装 Git​

Git 是版本控制工具。你需要它来下载和上传代码。​

•

Mac：系统自带，或通过 Homebrew 安装 brew install git​

•

Windows：下载安装 Git for Windows，安装后会有 Git Bash 终端​

第三步：Clone 到本地​

3.3 同步原项目的更新（进阶）​

四、本地启动项目​

代码下载到本地之后，需要打开它。不同类型的项目启动方式不同。​

4.1 纯前端静态项目（HTML/CSS/JS）​

如果你的项目只有 HTML、CSS、JavaScript 文件，没有 package.json，那就是纯静态项目。启动方式最简单：​

方式一：让 AI 帮你启动​

如果你用的是 TRAE、Cursor、Windsurf 等 AI IDE，直接打开项目文件夹，对 AI 说”帮我把这个项目跑起来”，AI 会自动检测环境并启动。​

方式二：用 IDE 插件 “Live Server”​

在 VS Code 的插件面板搜索 “Live Server”，安装后右键 index.html 选择 “Open with Live Server” 即可。​

方式三：命令行启动​

用 Python（Mac 自带，Windows 去 python.org 下载安装）：​

​

代码块​

Plain Text

cd 项目目录​

python -m http.server 8080​

​

或者用 Node.js 的 npx（如果你装了 Node.js）：​

​

代码块​

Plain Text

​

然后浏览器打开 http://localhost:8080。​

方式四：直接双击​

有些简单的项目（比如单个 HTML 文件），直接双击 index.html 就能在浏览器里打开。但如果项目里用了 JavaScript 模块（type="module"），双击会因为浏览器安全限制报错，这时候必须用上面的方式启动本地服务器。​

4.2 需要构建的项目（React/Vue/Astro 等）​

如果你的项目根目录有 package.json，说明它是一个需要构建的项目。启动步骤：​

​

代码块​

Plain Text

cd 项目目录npm install ​

# 安装依赖（只需执行一次）npm run dev ​

# 启动开发服务器​

​

前提是你需要安装 Node.js。去 nodejs.org 下载 LTS 版本安装即可。​

​

什么时候需要 Node.js？ 简单判断：项目根目录有 package.json 就需要，没有就不需要。​

​

4.3 常见启动问题​

​

#zACUyhletOuT text{white-space:pre}.fb0{stroke:var(--N900-FG, 0.15)}.fx0{stroke-miterlimit:10}.fa1{fill:#bbbfc4}.fx1{font:normal 400 12px MonospacedNumber,LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,Helvetica Neue,Tahoma,PingFang SC,Microsoft Yahei,Arial,Hiragino Sans GB,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.fx2{text-anchor:middle}.fx3{dominant-baseline:central}.fx4{stroke:none}.fc0{fill:var(--text-caption)}.fa2{fill:var(--text-link-disabled)}.fa3{fill:#d9f3fd}.fx5{font:400 normal 18px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.fx6{text-anchor:start}.fx7{dominant-baseline:alphabetic}.fc1{fill:rgb(16, 16, 16)}.fx8{font:400 normal 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.fc2{fill:rgb(48, 48, 48)}.fx9{font:400 normal 16px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.fb1{fill:var(--N900-FG, 0.15)}.fb2{fill:rgb(236, 236, 236)}.fa4{fill:var(--bg-body)}ABC12345问题原因解决方式pythonnpxnpx servepython -m http.server 3000 命令找不到 命令找不到端口 8080 被占用页面空白、控制台报错Windows 没装 Python没装 Node.js其他程序在用这个端口路径问题或需要构建安装 Python，或用 安装 Node.js，或用 Python换个端口，如 检查浏览器控制台的报错信息，发给 AI 帮你排查

​

​

​

五、选择 AI 编程工具​

5.1 当前主流工具​

​

#hxsggUWVxxra text{white-space:pre}.fb0{stroke:var(--N900-FG, 0.15)}.fx0{stroke-miterlimit:10}.fa1{fill:#bbbfc4}.fx1{font:normal 400 12px MonospacedNumber,LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,Helvetica Neue,Tahoma,PingFang SC,Microsoft Yahei,Arial,Hiragino Sans GB,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.fx2{text-anchor:middle}.fx3{dominant-baseline:central}.fx4{stroke:none}.fc0{fill:var(--text-caption)}.fa2{fill:var(--text-link-disabled)}.fa3{fill:#d9f3fd}.fx5{font:400 normal 18px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.fx6{text-anchor:start}.fx7{dominant-baseline:alphabetic}.fc1{fill:rgb(16, 16, 16)}.fx8{font:700 normal 16px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.fc2{fill:rgb(48, 48, 48)}.fx9{font:400 normal 16px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.fb1{fill:var(--N900-FG, 0.15)}.fb2{fill:rgb(236, 236, 236)}.fa4{fill:var(--bg-body)}ABCD123456工具类型核心特点适合谁CursorClaude CodeTRAEWindsurfKimi独立 IDECLI / VS Code 插件独立 IDE独立 IDE网页 / API基于 VS Code 改造，AI 深度集成到编辑体验中，Tab 补全体验好Anthropic 官方工具，终端和 IDE 都能用，适合复杂项目字节跳动出品，免费额度充裕，中文支持好Codeium 出品，AI Flow 自动化能力强月之暗面出品，中文理解能力强，适合生成和讨论方案想要一站式体验的用户习惯终端操作或需要 Agent 能力的用户国内用户、纯新手想要自动化工作流的用户不需要 IDE 集成、只做代码讨论

​

5.2 补充说明：MCP 和 Skills​

有些工具支持 MCP（Model Context Protocol）和 Skills。简单理解：​

•

MCP：让 AI 能连接外部工具和数据源，比如读取 Figma 文件、操作数据库​

•

Skills：预制的提示词模板，帮你快速执行特定任务，比如生成 DESIGN.md、做代码审查​

​

​

六、部署上线​

到这里，项目已经能在本地跑起来了。下一步就是部署上线，让别人也能通过一个网址访问。​

6.1 什么叫部署上线​

本地启动时，你访问的是 http://localhost:8080，这个地址只有你自己的电脑能打开。部署上线，就是把项目放到一个公开服务器上，让它变成类似这样的地址：​

​

代码块​

Plain Text

https://你的项目.vercel.app​

​

或者绑定自己的域名：​

​

代码块​

Plain Text

https://md.yourname.com​

​

对纯前端项目来说，部署并不复杂。它本质上就是把 index.html、CSS、JS、图片这些静态文件上传到一个平台，平台帮你生成一个可以公开访问的网址。​

6.2 选哪个部署平台​

常见选择可以这样判断：​

​

​

6.3 用 Netlify 部署（详细步骤）​

✅适用： 纯 HTML/CSS/JS 静态项目、不依赖构建的项目。​

⭕️前置条件： 项目已 Fork 到你的 GitHub 账号下。​

打开 netlify.com，用 GitHub 账号登录​

点击 Add New Project → Import an existing project​

选择你的仓库，点击 Import​

配置构建设置：​

◦

Build command：纯静态项目留空即可​

◦

Publish directory：保持默认（通常是项目根目录），如果你的代码在子目录里，填子目录名​

点击 Deploy site​

等部署完成，Netlify 会给你一个 xxx.netlify.app 地址​

​

部署成功后，每次你把修改 push 到 GitHub，Netlify 会自动重新部署。​

​

🔍常见问题：​

•

如果部署后页面 404，检查 Publish Directory 是否正确​

•

如果 CSS/JS 加载不了，检查文件路径是否用了绝对路径（应该用相对路径）​

•

如果 SPA 刷新白屏，需要在 Netlify 设置里添加 _redirects 文件：/* /index.html 200​

6.4 用 Vercel 部署​

✅适用： React / Next.js 项目，或需要框架构建的项目。​

打开 vercel.com，用 GitHub 账号登录​

点击 Add New → Project​

选择你的仓库，点击 Import​

Vercel 会自动检测框架（React、Vue、Astro 等），填充构建配置​

如果是纯静态项目，Framework Preset 选 Other，Build Command 留空​

点击 Deploy​

⭕️关键配置项：​

•

Framework Preset：Vercel 会尝试自动识别。如果识别错了，手动选择​

•

Root Directory：如果你的项目代码不在仓库根目录，需要手动指定​

•

Build Command：纯静态项目留空，框架项目通常自动填充（如 npm run build）​

•

Output Directory：构建产物的输出目录，通常是 dist 或 build​

​

国内访问 Vercel 速度不佳。如果你的用户主要在国内，建议用 Netlify、Cloudflare Pages 或 EdgeOne Pages。​

​

6.5 用 Cloudflare Pages 部署​

✅适用： 需要全球 CDN 加速、免费额度用得多的项目。​

打开 dash.cloudflare.com，注册或登录​

左侧菜单选择 Workers & Pages → Create → Pages → Connect to Git​

授权 GitHub 并选择你的仓库​

配置构建设置：​

◦

Production branch：通常选 main​

◦

Build command：纯静态留空​

◦

Build output directory：/ 或项目根目录​

点击 Save and Deploy​

​

Cloudflare Pages 的免费额度是所有平台中最慷慨的——每月 500 次构建、无限带宽、无限站点。对于个人项目来说完全不用担心超限。​

​

6.6 用 GitHub Pages 部署​

✅适用： 简单的静态 Demo、文档站、开源项目主页。​

打开你的 GitHub 仓库 → Settings → Pages​

Source 选择 Deploy from a branch​

Branch 选择 main，文件夹选 / (root) 或 /docs​

点击 Save​

等几分钟，你的网站就会出现在 https://你的用户名.github.io/仓库名/​

❌限制：​

•

公开仓库免费，私有仓库需要 GitHub Pro​

•

不支持自定义构建命令（没有构建流程）​

•

每次推送后部署可能要等几分钟​

•

不适合需要服务端功能的项目​

💡适合的场景： 最简单的项目展示、文档托管、简历页面。​

6.8 上线前检查清单​

部署成功不代表完全没问题。上线前自己走一遍，尤其是纯前端项目，很容易在路径和资源上出小问题。​

首页能正常打开，不是 404​

CSS、JS、图片都能加载（打开浏览器控制台检查有没有红色报错）​

页面刷新后不会白屏​

移动端布局没有明显错位​

核心功能还能用（在手机上实际试一遍）​

如果绑定了域名，https:// 能正常访问​

文档（README、PRD、DESIGN.md）中记录的使用方式是最新的​

​

​

七、域名购买与绑定​

平台给你的免费域名（xxx.netlify.app、xxx.vercel.app）能用，但如果你想要一个自己的地址（比如 md.yourname.com），就需要购买域名并绑定。​

7.1 去哪里买域名​

常见域名注册商：​

​

​

​

域名后缀选择：.com 最通用，.dev 适合开发者，.design 适合设计师，.me 适合个人。价格因后缀不同差异很大，.com 通常一年 50-100 元。​

​

7.2 购买流程（以 Cloudflare 为例）​

打开 cloudflare.com，注册账号​

左侧菜单选择 Domain Registration → Register Domains​

搜索你想要的域名（比如 ricoui.com）​

选择可用的后缀，加入购物车​

填写注册信息，完成支付​

域名通常几分钟内生效​

7.3 绑定到部署平台​

域名买好之后，需要把它指向你的部署平台。以 Netlify 为例：​

进入 Netlify 项目的 Settings → Domain management​

点击 Add custom domain​

输入你的域名（比如 md.yourname.com）​

Netlify 会给你一组 DNS 记录，去域名注册商那里配置​

💡 DNS 配置要点：​

​

​

具体填什么值，以部署平台当时显示的提示为准。​

​

域名解析有时几分钟生效，有时要等几小时。配置好后别急着反复改，等一等再检查。​

​

7.4 HTTPS 证书​

好消息是：主流部署平台（Netlify、Vercel、Cloudflare Pages）都会自动为你配置 HTTPS 证书。域名绑定成功后，https:// 通常会自动生效，不需要你额外操作。​

​

​

八、国内访问与备案​

8.1 为什么教程常用国外平台​

很多教程（包括本文）推荐 Vercel、Netlify、Cloudflare Pages，原因很简单：快。对练习项目、作品集 Demo、开源工具来说，它们不需要复杂服务器配置，也不需要你先学一遍运维。​

8.2 国内访问的三个等级​

•

只是学习和作品展示：先用 Vercel / Netlify / Cloudflare Pages 足够​

•

想要国内访问更稳定：考虑 EdgeOne Pages、国内云厂商静态托管、对象存储 + CDN​

•

商用或做正式业务：通常需要 ICP 备案 + 国内服务器​

8.3 EdgeOne Pages​

EdgeOne Pages 是腾讯推出的静态站点部署平台，对国内用户友好，访问速度快。​

打开 edgeone.eu，注册账号​

创建项目，连接 GitHub 仓库​

配置构建设置（和 Netlify 类似）​

部署​

如果你的项目主要面向国内用户，EdgeOne Pages 是目前最简单的选择之一。​

8.4 ICP 备案​

如果你的项目满足以下任一条件，通常需要做 ICP 备案：​

•

使用国内服务器（阿里云、腾讯云、华为云等）​

•

使用国内 CDN 加速​

•

域名接入国内 DNS 解析​

备案流程一般通过云服务商（阿里云、腾讯云等）的备案系统提交，需要提供身份信息和域名证书。审核周期通常 1-3 周。​

​

​

九、Prompt 模板​

明确身份和解释深度​

​

代码块​

Plain Text

我是一个没有开发基础的新手，请用适合设计师理解的方式解释。​

如果涉及技术概念，请先用一句话解释它是什么，再告诉我为什么现在需要知道它。​

​

选择技术栈​

​

代码块​

Plain Text

我想做一个项目，需求是：​

1. [写你的项目目标]​

2. [写核心功能]​

3. [写是否需要登录、保存数据、后台管理]​

4. [写是否只是展示页面，还是一个可长期使用的工具]​

​

请帮我判断适合用什么技术栈。​

要求：​

- 优先考虑零基础可上手​

- 不要一开始就引入过重的框架​

- 说明哪些功能暂时不需要后端​

- 给出推荐方案、备选方案和不推荐方案​

​

部署上线​

​

代码块​

Plain Text

请帮我检查这个项目是否适合部署到 [Vercel / Netlify / Cloudflare Pages]。​

要求：​

- 判断是否需要构建命令​

- 检查入口文件是否正确​

- 提醒可能出错的资源路径​

​

总结当前项目状态​

​

代码块​

Plain Text

请总结当前项目状态，方便我开启新的 AI 对话继续开发。​

总结内容包括：​

1. 项目目标​

2. 当前技术栈​

3. 已完成功能​

4. 最近一次修改​

5. 重要约束​

6. 下一步建议​

7. 必须测试的场景​

​

​

​

十、常见问题​

Q1：本地图片正常，线上显示不了​

最常见的原因是路径问题。检查以下几点：​

​

💙

•

大小写敏感：本地（Windows/Mac）对文件名大小写不敏感，但 Linux 服务器敏感。代码里写 Banner.jpg，文件实际叫 banner.jpg，本地能显示，线上就 404​

•

中文文件名：有些服务器不支持中文文件名，建议统一用英文​

•

绝对路径 vs 相对路径：检查代码里是否用了类似 /images/xxx.png 的绝对路径，部署在子目录下时会 404。建议用相对路径 ./images/xxx.png 或直接 images/xxx.png​

​

Q2：HTTPS 页面加载不了 HTTP 资源​

如果你的网站是 https:// 但引用了 http:// 的图片或脚本，浏览器会拦截（混合内容安全策略）。​

​

💙

解决方式：把所有 http:// 引用改成 https://，或者使用协议相对路径 //example.com/xxx.js。​

​

Q3：SPA 项目刷新后白屏​

如果你用的是 Vue/React 等单页应用，刷新页面后出现 404 或白屏，是因为服务器不知道所有路径都应该指向 index.html。​

解决方式：在部署平台配置重定向规则。​

​

💙

•

Netlify：在项目根目录创建 public/_redirects 文件，内容为 /* /index.html 200​

​

也可以直接让 AI 帮你处理：​

​

项目是 SPA，刷新页面会白屏，请帮我配置部署平台的重定向规则。​

​

Q4：端口被占用​

启动本地服务器时报 Address already in use，说明端口被其他程序占用了。​

​

💙

解决方式：换个端口就行，比如 python -m http.server 3000 或 npx serve -l 3000。​

​

Q5：部署成功但样式/功能不对​

常见原因：​

​

💙

​

​