第十一章 从想法到上线（端到端做出自己的产品）

一、为什么要"上线"？

1.1 上线之前 vs 上线之后

上线 = 从"自己玩"变成"被世界看见"。

1.2 上线"贵"吗？

整套流程下来：

最低成本：75 元/年（一个域名）就能拥有"个人品牌"。

二、本章你会做出什么

我们一起把"个人简历网站"从 0 做到 1：

最终结果：
- 网址：yourname.com（你的真实姓名拼音）
- 内容：自我介绍 / 经历 / 作品 / 联系方式
- 功能：可以下载 PDF 简历 / 可以发邮件
- 性能：3 秒内打开，移动端完美
- 分析：你能看到"谁打开了你的简历"
- 续费：除域名外不用任何持续费用

完成后你将拥有：

• 一个能写在简历上的网址。
• 一份"全自动同步"的工作流——Trae 改代码 → 推 Git → Vercel 自动重新发布。
• 给爸妈、相亲、客户、HR 都能 show off 的"个人品牌入口"。

三、上线全流程（10 步）

第1步：在 Trae 里做出网页（30 分钟）
   ↓
第2步：装 Git + 注册 GitHub（10 分钟，仅首次）
   ↓
第3步：把代码推到 GitHub（5 分钟）
   ↓
第4步：在 Vercel 一键部署（5 分钟）
   ↓
第5步：买域名（10 分钟）
   ↓
第6步：把域名绑到 Vercel（10 分钟）
   ↓
第7步：测试 HTTPS / 移动端 / 速度（5 分钟）
   ↓
第8步：加访问统计（5 分钟）
   ↓
第9步：加自定义邮箱（10 分钟，可选）
   ↓
第10步：SEO 优化 + 提交搜索引擎（10 分钟）

总计：约 90-120 分钟（首次），后续每次更新只要 1 分钟

四、第 1 步：在 Trae 里做出网页

4.1 项目结构

新建一个文件夹 ~/Documents/trae-projects/my-portfolio，用 Trae 打开它。

4.2 完整提示词

@Builder

帮我做一个个人简历网站，最终是要上线的。

【个人信息】
- 中文名：李明
- 英文名：Li Ming
- 职位：高级运营经理
- 工作年限：8 年
- 城市：上海
- 邮箱：liming@example.com
- 微信：limingwx（点击复制）
- LinkedIn：linkedin.com/in/liming
- 一句话定位："让数据驱动增长的运营操盘手"

【页面结构】
1. Hero（首屏）
   - 左侧：个人头像（用占位图）
   - 右侧：名字 + 一句话定位 + 三个 CTA（看简历 PDF / 发邮件 / 加微信）
   - 背景：极简渐变

2. 关于我（About）
   - 一段 200 字的自我介绍
   - 4 个数字：8 年经验 / 5 个公司 / 30+ 项目 / 千万级 GMV

3. 工作经历（Experience）
   - 时间轴样式
   - 每段：公司 + 时间 + 职位 + 3 条核心成就（带数字）

4. 代表作品（Portfolio）
   - 卡片网格 3 列
   - 6 个项目，每个：图、标题、一句话描述、用到的技能 tag

5. 技能（Skills）
   - 进度条 / 标签云
   - 硬技能：数据分析、用户增长、运营策略、内容营销、活动策划
   - 软技能：跨部门协作、团队管理、商业洞察

6. 联系方式（Contact）
   - 邮箱（点击直接 mailto）
   - 微信（点击复制）
   - LinkedIn（点击跳转）
   - 一个简单留言表单（用 Formspree，免费）

7. Footer
   - © 2026 Li Ming
   - 备案号占位
   - 三个社交图标

【视觉】
- 配色：白底 + 深灰文字 + 焦糖色（#D97706）点缀
- 字体：思源黑体（中文）+ Inter（英文）
- 圆角 0.75rem
- 移动端必须完美
- Hero 区有微妙的入场动画

【技术栈】
- 单文件 HTML（方便部署）
- TailwindCSS CDN
- 原生 JS

【SEO】
- title: 李明 - 高级运营经理 - 个人简介
- description: 8 年互联网运营经验，专注数据驱动的用户增长
- 加 og:image / twitter:card

【附加功能】
- 暗色模式切换（按钮在右上）
- 一键下载简历 PDF（先用占位 PDF）

【交付】
- index.html
- assets/ 文件夹（头像、作品图占位）
- resume.pdf（占位）
- README.md（之后用来部署的说明）

【先告诉我方案，我确认后再写】

4.3 微调

第一版做出来后，在浏览器打开 index.html 看效果。

不满意的地方就跟 Trae 说：

@Builder
把 Hero 区的渐变改成左上到右下的浅蓝到米白。
工作经历的时间轴线条改成虚线。
头像加一圈细金色边框。

直到你满意。

五、第 2 步：装 Git + 注册 GitHub

已经装好 Git 和有 GitHub 账号的，跳到第 3 步。

5.1 装 Git

让 Trae 帮你装：

@Builder
检查我电脑是否装了 Git，如果没装，按 macOS 的方式帮我装好。

或者手动：

• Mac：终端运行 git --version，没装会提示安装。
• Windows：去 git-scm.com 下载装。

5.2 注册 GitHub

去 github.com 注册账号——

• 用户名建议用你的英文名（比如 liming），因为这会成为你的 GitHub 主页 github.com/liming。
• 邮箱用你常用的。

5.3 配置本地 Git

git config --global user.name "Li Ming"
git config --global user.email "liming@example.com"

5.4 认证

GitHub 现在不再支持密码推送，要用 SSH Key 或 Personal Access Token。

最简方式——让 Trae 帮你：

@Builder
帮我配置 SSH Key 用于 GitHub 认证。
1. 生成新的 SSH Key（用我的邮箱 liming@example.com）
2. 把公钥复制到剪贴板
3. 告诉我接下来去 GitHub 哪里粘贴
4. 验证连接是否成功

按照 Trae 的提示，把公钥粘到 GitHub → Settings → SSH and GPG keys。

六、第 3 步：把代码推到 GitHub

6.1 在 GitHub 创建仓库

去 GitHub 主页 → 右上角 "+" → "New repository"——

• Repository name: my-portfolio
• Description: 一句话介绍
• Public（公开，方便 Vercel 拉取）
• 不要勾"Add a README"（避免冲突）

创建后会得到一个仓库地址：git@github.com:liming/my-portfolio.git

6.2 用 Trae 推代码

@Builder

帮我把当前项目推送到 GitHub。

仓库地址：git@github.com:liming/my-portfolio.git

具体操作：
1. 在当前目录初始化 git
2. 写一个合理的 .gitignore（排除 .DS_Store、.trae/local/ 等）
3. 全部 add 并 commit，commit message 用："feat: 初始化个人简历网站"
4. 关联远程仓库
5. 推送到 main 分支
6. 验证推送成功

Trae 会自动跑这些命令，结束后告诉你"推送成功"。

刷新 GitHub 仓库页面，你能看到所有文件已上去。

七、第 4 步：在 Vercel 一键部署

Vercel 是最适合个人静态站的免费部署平台——一键、HTTPS、全球 CDN、无限带宽。

7.1 注册 Vercel

去 vercel.com，点 "Sign Up"，用 GitHub 账号登录（这样它能直接读你的仓库）。

7.2 导入项目

登录后：

1. 点 "Add New..." → "Project"。
2. 找到 my-portfolio 仓库，点 "Import"。
3. 配置页面：
   • Framework Preset: 选 "Other"（我们是纯 HTML）
   • Root Directory: ./（默认）
   • Build Settings: 全留空（静态站不需要 build）
4. 点 "Deploy"。

等 30 秒-1 分钟，Vercel 会给你一个网址，比如：

my-portfolio-liming.vercel.app

打开这个网址——你的简历网站已经在全世界可访问了！

7.3 自动部署机制

Vercel 默认配置了"git push 自动部署"：

• 你在 Trae 改代码 → git add . && git commit && git push
• Vercel 检测到 push，自动拉新代码、重新发布
• 30 秒后线上就是最新版

让 Trae 给你写一个"一键发布"脚本：

@Builder

写一个 deploy.sh 脚本，功能：
1. 检查是否有未提交的改动
2. 如果有，让用户输入 commit message
3. git add . && git commit && git push
4. 提示"已推送，1 分钟后访问 yourname.com 看新版本"

以后改代码后，终端跑一下 ./deploy.sh 就完事。

八、第 5 步：买域名

vercel.app 子域名虽然能用，但不专业。是时候买一个 yourname.com 了。

8.1 域名注册商推荐

新手推荐：阿里云万网（国内访问快、客服中文、可备案）。

8.2 选域名的 5 条原则

1. 拼音 / 英文名：liming.com、mingli.com，简单好记。
2. 短：≤ 10 个字符最佳。
3. 避免连字符 / 数字：li-ming.com、liming2026.com 都不好。
4. 优先 .com：其次 .net / .me / .dev。避免 .top / .xyz / .work 等"廉价后缀"。
5. 拼写无歧义：别人听一遍能拼对的最佳。

8.3 操作步骤

1. 去阿里云万网（wanwang.aliyun.com）。
2. 输入想要的域名（比如 liming.com）。
3. 如果"已被注册"，试试同名的 .net / .me / .top，或加上职业（liming-pm.com）。
4. 选好后加入购物车，注册年限选 1-2 年（先试水，下年再续）。
5. 实名认证（国内购买必须实名，需身份证）。
6. 付款。

完成后你会在阿里云控制台看到这个域名。

九、第 6 步：把域名绑到 Vercel

9.1 在 Vercel 添加域名

1. 登录 Vercel → 选 my-portfolio 项目。
2. 进 "Settings" → "Domains"。
3. 输入你买的域名，比如 liming.com，点 "Add"。
4. Vercel 会让你"配置 DNS 记录"。

9.2 在阿里云配置 DNS

1. 阿里云控制台 → 域名 → 找到 liming.com → 点"解析"。
2. 添加两条记录：
   • 主机记录: @ 类型: A 记录值: 76.76.21.21（Vercel 的 IP，以 Vercel 给你的实际值为准）
   • 主机记录: www 类型: CNAME 记录值: cname.vercel-dns.com
3. 保存。
4. 等 5-30 分钟（DNS 全球生效需要时间）。

9.3 验证

在 Vercel "Domains" 页面看到你的域名状态变成绿色 "Valid Configuration"。

打开浏览器访问 liming.com —— 这就是你的简历网站了！

https://liming.com 也能用——Vercel 自动配置了 HTTPS。

9.4 国内备案（可选但建议）

如果你想让国内访问更快，建议做 ICP 备案——

但 Vercel 在国外，备案后访问 Vercel 不一定立刻有效。备案的另一个用途是：让你能合法在网页放二维码、放收款码、放公众号引流。

操作：在阿里云域名后台找"备案"入口，按指引填资料 → 等 7-15 天审核 → 获得 ICP 号 → 加到网页 Footer。

新手第一次上线可以先不备案——等到你确实要"商业化"时再办。

十、第 7 步：测试 HTTPS / 移动端 / 速度

10.1 三方测试工具

让 Trae 帮你跑一遍：

@Builder

帮我测试 https://liming.com 的：
1. HTTPS 证书有效性（用 SSL Labs API）
2. 性能评分（用 PageSpeed Insights API）
3. 移动端友好度
4. 主要 SEO 元数据是否正确
5. 给一份测试报告，TopX 个值得改的问题

或者手动跑：

• HTTPS：ssllabs.com/ssltest
• 性能：pagespeed.web.dev
• 移动端：手机扫二维码 → 实测体验。

10.2 性能优化方向

如果分数低于 90，常见优化：

• 图片：用 WebP 格式 + 懒加载 + 合理尺寸（不要用 4K 头像）。
• 字体：用 font-display: swap，避免阻塞渲染。
• CSS/JS：minify（让 Trae 帮你压缩）。
• CDN：Vercel 已经全球 CDN，不用额外配。

让 Trae 帮你优化：

@Builder

PageSpeed 给我的网站打了 78 分，主要问题是：
- LCP 4.2 秒（图片大）
- CLS 0.15（布局抖动）

帮我：
1. 把头像图片换成 WebP，限制宽度 400px
2. 给所有图片加 width 和 height 属性（避免抖动）
3. 给字体加 font-display: swap
4. minify CSS

【先告诉我方案，我确认后再写】

十一、第 8 步：加访问统计

你想知道：谁打开了我的简历？什么时候？从哪个链接来的？

11.1 推荐方案

新手推荐 Vercel Analytics——一键打开，免费，数据漂亮。

11.2 启用 Vercel Analytics

1. Vercel 控制台 → 你的项目 → "Analytics" 标签。
2. 点 "Enable"。
3. Vercel 会让你在代码里加一行 <script>，让 Trae 帮你加：

@Builder

帮我在 index.html 的 </body> 之前加上 Vercel Analytics 脚本：
<script defer src="/_vercel/insights/script.js"></script>

加好后 commit & push。

部署后等几个小时就能看到访问数据：访问量、独立访客、来源、地区、热门页面。

11.3 自定义事件

想知道"谁点了'下载简历'按钮"？

@Builder

给"下载简历 PDF"按钮加一个 Vercel Analytics 事件追踪，
事件名：download_resume

让我以后能在 Vercel Analytics 里看到这个按钮被点了几次。

十二、第 9 步：加自定义邮箱（可选）

12.1 为什么要 yourname@yourdomain.com

• liming@gmail.com → 像学生
• liming@liming.com → 像专业人士

12.2 推荐方案（中国用户）

新手推荐腾讯企业邮箱——免费、稳定、移动端 App 好用、跟微信 / 邮箱客户端兼容。

12.3 操作流程

1. 去 exmail.qq.com，注册企业邮箱（用你的域名）。
2. 验证域名所有权（在阿里云加 TXT 记录）。
3. 配置 MX 记录（邮箱解析）。
4. 在邮箱后台创建账号 liming@liming.com。
5. 验证 → 收发测试。

再让 Trae 帮你：

@Builder

我已经在腾讯企业邮箱开通了 liming@liming.com，
现在需要在阿里云域名解析里添加这些记录：
（粘贴腾讯给的 MX / SPF / DKIM 记录）

帮我列出每条记录的"主机记录 / 类型 / 记录值"，
我对照阿里云后台一个一个加。

十三、第 10 步：SEO 优化 + 提交搜索引擎

13.1 SEO 基础优化

让 Trae 帮你检查：

@Builder

帮我把 index.html 做 SEO 优化：

1. <head> 里：
   - title 优化（55 字以内，含"姓名 + 职位 + 城市"）
   - meta description（150 字以内）
   - meta keywords
   - canonical URL
   - og:title / og:description / og:image
   - twitter:card

2. <body> 结构：
   - 一个清晰的 <h1>
   - 合理的 h2/h3 层级
   - img 都加 alt 属性

3. 性能：
   - 图片懒加载
   - 字体 preload

4. 内容：
   - 给我一段建议的 description（80-120 字，含我的核心关键词）

【做完后跑一下 PageSpeed 给我看分数】

13.2 生成 sitemap.xml

@Builder

生成一个 sitemap.xml，列出我的网站所有页面，
URL 用 https://liming.com 前缀，

写一个 robots.txt：
- 允许所有搜索引擎抓取
- 指向 sitemap

把这两个文件放到根目录。

13.3 提交到搜索引擎

国内三大：

• 百度站长：ziyuan.baidu.com
• Bing 站长：www.bing.com/webmasters
• Google Search Console：search.google.com/search-console

每个都：

1. 添加你的网站。
2. 验证所有权（一般是放一个 HTML 文件到根目录）。
3. 提交 sitemap.xml。
4. 等 1-2 周开始有自然搜索流量。

让 Trae 帮你做验证：

@Builder

百度站长让我下载一个 baidu_verify_xxx.html 验证文件，
帮我把这个文件放到项目根目录，然后 commit & push。

十四、上线后的"长期运营"

14.1 内容更新节奏

• 季度大更新（每 3 个月）：换一张新照片、加新作品、更新职位。
• 月度小更新（每月）：加新文章 / 项目 / 思考。
• 即时：换工作时立刻更新。

14.2 把网站作为"流量入口"

简历网站不只是"展示"——可以引流到：

• 公众号 / 视频号：放一个二维码。
• 副业 SaaS：放一个产品入口。
• 付费咨询：放一个 Calendly 链接预约。
• 课程 / 知识星球：放一个加入入口。

14.3 监控网站健康

让 Trae 帮你做一个监控脚本：

@Builder

帮我做一个 Python 脚本 check_site.py：
1. 每天 9:00 检查 https://liming.com 是否正常（HTTP 200）。
2. 检查首页加载时间是否 <3 秒。
3. 检查 SSL 证书剩余天数（<30 天发警告）。
4. 异常时通过邮件通知我。

附 launchd plist 配置，让它自动定时跑。

十五、本章你完成的成就

打勾庆祝一下：

• 用 Trae 做出了个人简历网站
• 注册了 GitHub 账号
• 把代码推到了 GitHub
• 在 Vercel 部署了网站
• 买了一个 .com 域名
• 把域名绑到了 Vercel
• 测试了 HTTPS / 移动端 / 速度
• 加了访问统计
• 设置了自定义邮箱（可选）
• 做了 SEO + 提交搜索引擎

完成 8/10 以上 = 你已经从"AI 玩家"升级为"AI 创作者"。

十六、本章常见的疑问

Q1：我没买域名能不能上线？

可以——Vercel 给的 xxx.vercel.app 子域名也能正常用。但不专业——给客户 / HR 看时建议买域名。

Q2：Vercel 在国外，国内访问慢吗？

正常情况 1-3 秒能打开，对个人简历网站够用。如果你做严肃商业站点，国内用户密集，建议改用阿里云 OSS + CDN（让 Trae 帮你做迁移）。

Q3：我可以用一个域名做多个网站吗？

可以——通过子域名：portfolio.liming.com、blog.liming.com、tools.liming.com。每个子域名指向 Vercel 的不同项目。

Q4：Vercel 免费版有没有限制？

有但对个人项目够用：

• 100 GB 带宽/月
• 无限项目
• 无限部署
• HTTPS 无限

只有月访问超过百万级别才需要升级。

Q5：怎么把"普通 HTML 简历"升级成"博客"？

可以让 Trae 帮你迁移到 Astro / Next.js / Hugo 等静态博客框架，但这是"进阶"——读完整本书后再考虑。

Q6：我以后改了网页会不会丢数据？

不会——所有版本都在 Git 历史里，可以随时回退。Trae 也会保留历史记录。

Q7：网站做出来后我应该把它写在哪？

建议放在：

• 简历最上方（联系方式那一行）
• 微信个性签名
• 公众号简介
• LinkedIn / 即刻 / 小红书 简介
• 邮件签名

让"liming.com"成为你的全网通行证。

十七、本章一图回顾（文字版）

个人产品上线 10 步法
    │
    ├─ 1. 用 Trae 做出网页
    ├─ 2. 装 Git + 注册 GitHub
    ├─ 3. 推代码到 GitHub
    ├─ 4. Vercel 一键部署 → xxx.vercel.app
    ├─ 5. 买域名 yourname.com
    ├─ 6. 域名绑 Vercel → yourname.com
    ├─ 7. 测试 HTTPS / 速度 / 移动
    ├─ 8. 加访问统计
    ├─ 9. 加自定义邮箱
    └─ 10. SEO + 提交搜索引擎

成本结构
    │
    ├─ GitHub: 0
    ├─ Vercel: 0
    ├─ 域名: 75 元/年
    ├─ HTTPS: 0
    ├─ 邮箱: 0
    └─ 总计: 75 元/年

工作流形成
    │
    └─ 改代码 → git push → 1分钟后 yourname.com 自动更新

下一章 第十二章 避坑指南与持续成长 ——让你知道新手 90% 会踩的 8 个大坑，以及如何用 Trae 做"长期主义者"。