跳到主要内容
版本:2026 TECHNEST 项目
JOBFUN

部署你的个人网站

学习目标

到本节课结束,学员应当能够:

  • 通过自然语言请求 fork 一个生产级的 Vercel 模板,整个过程不用自己手动 clone 仓库,也不用敲一句 git clone
  • 用大白话描述网站内容 —— bio、项目、链接、主题色 —— 然后看着 Cursor 把这段描述翻译成干净、已 commit 的源代码改动。
  • 用一句提示词触发 Vercel 部署,出错时能读 build log,并通过把错误描述给 AI 来恢复。

核心主题

  • 一个 Vercel 模板如何在一段对话里就变成"你的"网站。
  • "用英文描述内容,让 AI 写 MDX/TSX"——这套模式贯穿第 2–6 周。
  • Deploy-preview 循环:每次 commit 都触发一个预览 URL,可以审完再推到生产环境。
  • 第一次部署故意要"无聊"——刺激的 AI 部分下周再加。

工具 / 技术栈

工具本周角色
Cursor一个聊天窗,所有事都在这里发生。
Vercel MCPAI 创建项目、部署、读日志、设置环境变量。
GitHub每次 commit 推送;Vercel 自动重建。
Next.js 14Magic Portfolio 模板基于的框架。
Tailwind CSS样式;当你描述视觉变化时,AI 改 class。
Magic Portfolio我们 fork 的起点 —— Vercel 模板

课堂计划

时间活动
0 – 15 分钟回顾与 Check-in。 第 1 周第一次拿到 Vercel URL 的同学举手。还卡住的——给两分钟和同学结对解一下。
15 – 40 分钟概念讲解。 "模板优先"模式。为什么 fork 一个好模板比从零开始更划算。一个 next.js 模板的结构是怎样的(内容 vs 代码)。AI 应该 碰什么(内容文件、配置)、不该 碰什么(构建管道)。
40 – 75 分钟现场演示。 讲师对 Cursor 只发一句提示词:"Fork Magic Portfolio,把它改成关于我,然后部署。"全班看着整套流程——fork、clone、改、commit、部署——在一段对话里发生。
75 – 105 分钟动手 Lab。 每位学员上线自己的作品集 URL。每个人挑一种不同的强调色,整个教室会有差异性可供互评。
105 – 120 分钟Q&A + 收尾。 Show-and-tell:三位学员把自己的线上 URL 贴出来,全班反应一下。

动手 Lab

任务。 下课时你应该有一个 yourname-portfolio-*.vercel.app URL,上面有你的照片、一段简介、两个真实项目(或学习项目)和你的邮箱——所有东西都在一个响应式、支持深色模式的站点里。

阶段 1 —— Fork & 搭骨架

PROMPTStep 1 · Say to Cursor:

请把 Vercel 上叫 Magic Portfolio 的那个模板(Next.js 那个)fork 到我 GitHub 账号下一个新的公开仓库,叫 my-portfolio。把它 clone 进当前工作区,用 pnpm 装依赖,然后启动 dev server。dev server 起来以后,在我浏览器里打开 http://localhost:3000。先别改任何代码——我想先看看模板原样长什么样。

VERIFYStep 2 · Verify:
  • 浏览器打开 http://localhost:3000,显示 Magic Portfolio 的 demo 站。
  • 你的 GitHub 账号下出现了 my-portfolio 仓库。
  • 你的文件树里现在有一个 my-portfolio 文件夹,里面是 Next.js 的标准结构。

阶段 2 —— 内容定制

PROMPTStep 3 · Say to Cursor:

现在把这个站改成关于我的。下面是我的资料——请仔细读,把所有 demo 内容(名字、bio、"about" 页、社交链接、photo credit)替换成我的真实信息:

  • 姓名:[你的全名]
  • 一句话简介:[一句话——比如 "在 [学校] 学 CS,正在学怎么把 AI 产品做出来。"]
  • 长简介:[3–4 句话——你是谁、对什么感兴趣、本学期在做什么]
  • 邮箱:[你的邮箱]
  • GitHub:[你的 GitHub URL]
  • LinkedIn(可选):[你的 LinkedIn URL]
  • 强调色:[挑一个——比如 "深青色 #0e7490" 或 "柔珊瑚 #fb7185"]

更新主题配置去用我的强调色。任何模板里现成的占位图片你都可以用——真实照片我后面再换。改完以后用一条清楚的 commit message 提交。

VERIFYStep 4 · Verify:
  • 你的姓名、简介、邮箱出现在了首页和 About 页。
  • 强调色(按钮、链接、hover 状态)和你要求的对得上。
  • git log 能看到 Cursor 替你写的一条带合理 message 的 commit。

阶段 3 —— 加项目卡片

PROMPTStep 5 · Say to Cursor:

Projects 那一栏还在显示 demo 项目。把它们换成我的两个真实项目:

  1. [项目 1 名字] —— [一句话描述]。链接:[URL 或 GitHub 仓库]。如果你有缩略图,用模板自带的占位图。
  2. [项目 2 名字] —— [一句话描述]。链接:[URL 或 GitHub 仓库]

如果我只有一个真实项目,第二个就用本课程的学习项目——比如 "Hello TECHNEST —— 我的第一次 AI 驱动部署",配第 1 周拿到的线上 URL。Commit 然后 push。

VERIFYStep 6 · Verify:
  • 首页 Projects 这一栏显示你两个项目,链接点进去能打开。
  • commit 已经 push 到 GitHub 了——在浏览器里打开你的仓库确认。

阶段 4 —— 部署到生产环境

PROMPTStep 7 · Say to Cursor:

现在把这个站作为生产站点部署到 Vercel。用 Vercel MCP。把项目和我 GitHub 上的 my-portfolio 仓库挂钩,让以后每一次 push 都自动部署。部署完成后在我浏览器里打开生产 URL,并把 URL 给我让我复制。

MANUALStep 8 · Manual (human only):

如果 Vercel 让你授权它的 GitHub App 去访问这个仓库(仅在新仓库的第一次会出现),在弹出的浏览器窗口里点同意。

Why manual: GitHub 的 App-install 同意页需要人点确认——任何 CLI 都没法替你接受仓库权限。

VERIFYStep 9 · Verify:
  • 类似 my-portfolio-*.vercel.app 的生产 URL 在浏览器里打开。
  • 你的姓名、简介、强调色、项目都在线上正确渲染。
  • 在手机上打开这个 URL——移动端也得正常。
RECOVERStep 10 · If stuck, say to AI:

生产构建挂了,报错我看不懂。你能不能通过 MCP 读一下 Vercel 的 build log,找到根因,把源码里需要修的地方修了,commit 并 push 一遍,然后确认下一次部署成功?

阶段 5 —— 通过对话打磨细节

PROMPTStep 11 · Say to Cursor:

站点还行,但有点泛泛。请做三轮小打磨:

  1. 把 hero 大标题加粗一点、字距稍微撑开一点,让我的名字更有"自信感"。
  2. 给项目卡片加一个加载时的 fade-in 动画——别花哨,能让站点"活起来"就行。
  3. 加一个跟强调色搭配的 OG image / favicon,这样我把链接发到聊天里时预览卡片看起来是有设计过的。

每一轮单独一个 commit,方便我读差异。

VERIFYStep 12 · Verify:
  • 刷新线上站点,确认这三轮打磨都上线了。
  • 你的仓库新增了三条带描述性 message 的 commit。
  • 把 URL 粘到 Slack / WhatsApp / 微信里——预览卡片应该显示你的名字和强调色。
如果你有真实照片,赶紧用上

如果你电脑上有头像和两张项目截图,把它们直接拖进 Cursor 聊天窗,然后说:"用这三张图——头像放 About 页,截图分别放在两张项目卡片上。提交前压缩到合理的 web 尺寸。" Cursor 会把文件放进 public/,再把它们接到正确的组件里。

本周作业

做 / 交付。

  • 你的线上作品集 URL,包含真实姓名、简介、两个项目、联系方式。
  • URL 必须在桌面端和移动端都能正常显示。

要求。

  • 仓库必须在你自己的 GitHub。
  • 至少 4 条 commit,全部由 AI 在你的指挥下创作。
  • 生产 URL 必须由 Vercel 提供(即 *.vercel.app 域名,或者指向 Vercel 的自定义域名)。
  • 一张你描述自己 bio(第 3 步)的 Cursor 对话截图——证明你没手改源代码。

提交。 第 3 周开课前把 URL + 截图发到课程 Slack 频道。

资源

文档视频仓库
Vercel 模板:Magic Portfolio讲师 demo:"从模板到线上 URL,20 分钟"vercel/templates/magic-portfolio
Vercel CLI —— 项目管理ai-programming-teaching-project/docs/website/
Next.js 14 App Router —— 基础

真实世界应用

2026 年你将面试的每一位工程师、设计师、创始人,在 Google 你的名字后的最初 5 秒内,都期望能找到一个个人网站。作品集不是 锦上添花,而是基本款。好消息是——它也是你两小时内能造出来的、ROI 最高的东西,而且整学期你每周都会给它升级。

Career

下课后:把线上 URL 贴到 LinkedIn 标题行,再贴到 GitHub profile README 里。在 LinkedIn 上 @TECHNEST 一下——讲师会转发前 5 个这么做的同学。

踩坑提醒 & 小贴士

  • "模板挺好但我想要完全不同的风格。" 对 Cursor 说:"把当前设计换成 [参考站点] 的那种感觉。" 让 AI 先提案,再迭代。别手改 CSS。
  • "Vercel 报 'Build error: module not found'。" 把完整错误粘进 Cursor(用第 1 周的 [RECOVER] 模式)。第一次部署 90% 的报错都是 Vercel 找不到某个 package——Cursor 一句话就能修。
  • "我的照片被拉伸了。" 对 Cursor 说:"把我的 hero 照片裁成正方形,重新导出 600 × 600,不要损失画质。" 描述结果,不要描述 CSS。
  • "Vercel 部署时显示 'Unauthorized'。" 你第 1 周的 token 可能过期了。在 Cursor 里说:"我的 Vercel MCP token 过期了。引导我生成新的并更新你的配置。"
  • "预览 URL 跟生产 URL 看起来不一样。" Preview 部署和 Production 部署可能用不同的环境变量。让 Cursor 比一下:"对比我 preview 和 production 部署的环境变量,列出所有差异。"
如果新 commit 后线上没更新

问:"Vercel 的 GitHub 集成还连着吗?看一下最近一次部署时间和 webhook delivery log。" 如果 webhook 坏了,Cursor 会引导你重新挂上。