Week 4 · Build & Ship

01 · Where we are, and today

• • You have An idea page, research, and spec.md on GitHub Everything from weeks 2–3. Today the same repo grows up. Recap
  • Part 1 Ship it — your project goes live today Polish your page with AI, deploy it with Vercel, walk out with a live URL. ~50 min
  • Part 2 Know the June 20 midterm, exactly The format, the eight sections, the two integrity rules — no mystery left. ~35 min

02 · Your whole project is one file

From today your project is a single index.html — plain HTML, CSS and JavaScript. It opens with a double-click: no build, no framework, nothing to break. The only reason we need Node.js at all is the Vercel command line that puts it online in section 04. Let your AI check your machine first — paste this:

请检查我的电脑环境,为接下来用命令行把网站部署上线做准备:依次运行 node -v、npm -v、git --version,把结果用中文解释给我听。如果 node 没装:我是 Windows 就指导我去 https://nodejs.org/zh-cn 下载 LTS 版 .msi 安装包,我是 Mac 就下载 .pkg;如果官网下载太慢,改用国内镜像 https://npmmirror.com/mirrors/node/ 里最新 v22 目录下的对应安装包。装完后让我重开终端再跑一次 node -v 验证。如果实在装不上也别卡住,告诉我可以改用浏览器网页的方式部署(本页 04 节的 Plan B,完全不需要 Node)。

• • Gotcha 1 Reopen your terminal after installing A fresh install doesn't show up in old windows. Close the terminal — or restart Cursor — then run node -v again. PATH
  • Gotcha 2 Windows says "running scripts is disabled" If PowerShell refuses to run npm, tell your AI — it will switch you to cmd or run Set-ExecutionPolicy RemoteSigned -Scope CurrentUser. Win
  • No Node? You still ship today Can't install it in time? Deploy from the browser instead — Plan B in section 04 needs no Node at all. Flag Mia and keep moving. OK

03 · Make your page — one index.html

One prompt turns your weeks 2–3 work into a single index.html — a real, openable page with one interaction that actually works. No framework, nothing to install, nothing to break. Paste it whole — it already routes around the trap we tested live (the main file that isn't named index.html):

我要把我仓库里的内容做成一个单文件作品页 index.html。我是零基础,请一步一步来:
1. 先读我仓库里现有的 HTML 文件和所有 .md 资料(尤其 spec.md、research 里的东西),理解我这个作品是关于哪个社会议题、要做成什么(网站/工具/小游戏)、给谁用。
2. 生成或完善一个 index.html:要有一个清楚的标题、一段话说明这个作品解决什么社会问题、给谁用,以及一个最简单但真能用的交互(按钮 / 输入框 / 选择器,用 JavaScript 真正实现功能,不要只是个摆设)。我原有的中文内容要保留。
3. 全部写成纯 HTML + CSS + JavaScript,放在这一个 index.html 文件里,不要引用任何外部文件或网络资源(不要 /static/xxx.css、不要 CDN 链接、不要图片外链)——这样浏览器双击就能打开,部署也绝不会出错。
4. 文件名必须正好是 index.html(全部小写),放在仓库最外层根目录。这点很重要:Vercel 默认只找 index.html,名字不对、放错文件夹,网站打开就是 404。如果我已经有别的页面(比如 indexChinese.html、或带空格的文件名),把最完整的内容整合进 index.html。
5. 仓库里原有的 .md 资料和旧文件都原样保留,不要删。现在只改本地文件,不要部署、不要 git push。
做完用中文告诉我两件事:① 让我双击 index.html 在浏览器里看,我应该看到什么;② 这个页面现在能做哪些操作。

Double-click index.html — it opens in your browser, right there on your machine. Looks right? Now let's put it on the internet.

04 · Ship it — Vercel

Three commands put it on the internet: login → link → deploy. Your AI runs all of them end to end; you touch the browser at most twice, where it says you. Paste this and watch:

请帮我把当前文件夹的项目部署到 Vercel,并绑定 GitHub 仓库,实现以后 git push 自动部署。我是零基础初学者,请逐步执行并用一句话解释每步在干什么:

1. 先做两个检查:(a) 仓库根目录要有一个名叫 index.html 的文件——运行 ls(Windows 用 dir)看一下,如果没有、或主页面叫别的名字(比如 indexChinese.html),先帮我复制或重命名出一个 index.html 放在根目录,Vercel 默认只认这个名字,没有它网站打开就是 404;(b) 运行 `node -v` 和 `git remote -v`,如果没有 node 命令先停下来告诉我怎么安装 Node LTS,之后任何 npm/npx 下载很慢或超时,先运行 `npm config set registry https://registry.npmmirror.com` 再重试。
2. 运行 `npx -y vercel@latest whoami` 检查我是否已登录 Vercel。如果显示用户名就跳到第 3 步;如果开始出现 "Visit https://vercel.com/oauth/device?user_code=..." 字样,立刻把这个完整链接原样展示给我,并提醒我:「用浏览器打开这个链接 → 用 GitHub 账号登录 Vercel → 核对页面上的代码和终端一致 → 点确认」。在我完成前命令会一直显示 Waiting for authentication,这是正常的,请耐心等待,不要中断。
3. 在项目根目录运行 `npx -y vercel link --yes` 创建 Vercel 项目。仔细看输出:如果有 "Connecting GitHub repository ... Connected",说明 GitHub 自动绑定成功,跳到第 5 步。
4. 如果没自动绑定,运行 `npx -y vercel git connect --yes`。如果报错 "Failed to connect ... to project",这不是打错字,而是我的 GitHub 账号还没安装 Vercel 应用——请告诉我:「用浏览器打开 https://github.com/apps/vercel ,点 Install(或 Configure),选 All repositories 完成安装」,我装好后你再重新运行这条命令。
5. 运行 `npx -y vercel deploy --prod --yes` 部署到生产环境。纯 HTML 没有构建步骤,上传完几秒就好,把最终的网站地址(https://xxx.vercel.app)用大字告诉我,并提醒我:如果在国内网络打不开这个地址,部署其实已经成功,换网络或开代理就能看到。
6. 运行 `npx -y vercel project ls` 做最终确认,然后告诉我一句话结论:「以后只要 git push,网站就会自动更新」。

通用规则:所有 vercel 命令都用 npx -y 前缀,不要全局安装;能加 --yes 的命令都加上;任何一步报错就停下,把完整报错原文给我看,并明确告诉我是否需要我去浏览器做什么操作。

When the terminal stops and waits, it's waiting for you. The two moments only a human can do:

• • You click ① Authorize the login in your browser The terminal prints Visit https://vercel.com/oauth/device?user_code=... and waits. Open it, sign in with GitHub, check the code matches the terminal, confirm. It expires in ~10–15 min — just rerun if it does. Browser
  • You click ② Install the Vercel GitHub App — only if asked If connecting the repo fails, open github.com/apps/vercel → Install → All repositories, then let your AI retry. Browser
  • From now on git push = the site updates itself GitHub and Vercel are now connected. Push your repo and Vercel rebuilds automatically — deploying stops being a thing you do. Auto

05 · When it doesn't open right

Plain HTML has no build step, so it can't "fail to build" — but a live page can still open as a 404, blank, or with broken styling. The fix is AI-native: the symptom is your next prompt. Open your URL, press F12 → Console for any red errors, then paste:

我的网站部署后打开不对劲,请帮我修。现象是这样的:
[描述现象:比如打开是 404 / 页面空白 / 样式乱了 / 某个按钮点了没反应]

请你:
1. 先用中文告诉我最可能是什么原因。(提示:如果是 404,十有八九是仓库根目录没有名叫 index.html 的文件,或者名字拼错、放错文件夹了。)
2. 直接在我的代码里把它修好。
3. 修好后帮我 git add、git commit、git push 推上去,Vercel 会自动重新部署,然后提醒我等一两分钟刷新页面再看。

如果浏览器控制台(按 F12 → Console)里有红色报错,这是报错原文:
[把红色报错复制到这里;如果没有就删掉这两行]

• • Most common A 404 means no index.html at the root Vercel serves the file literally named index.html. Wrong name or wrong folder → 404. Ask your AI to fix the name and push. 404
  • The loop Fix → push → auto-redeploy Every push triggers a fresh deploy. Repeat until it looks right — that's the whole job. Repeat

06 · Prove it

Shipped means someone else can open it. Two proofs before you move on:

• • Proof 1 Open your URL on your phone Not localhost — the real https://xxx.vercel.app, on mobile data if you can. Phone
  • Proof 2 Post it on the deployment wall Paste your live URL in the class group chat — nine projects, nine URLs. Group
  • Heads-up vercel.app may not open on some China networks If it won't load, your deploy still succeeded — try another network. (Fixing this for everyone is exactly what a custom domain is for — coming later.) Normal

07 · The midterm defense — June 20

Part 2. Switch gears: next Saturday, June 20, is your midterm defense — the same format as the final defense, one week from today. Here's everything it asks:

• • Format 10 minutes each: 7 + 3 A 7-minute talk in English with your PPT, then about 3 minutes of comments and questions in English and Chinese. 6/20
  • The deck All English · Times New Roman · ≥ 12pt · 1.15 line spacing Built on the official template — and delete the instructions page before you submit. Rules
  • Submit first Upload your PPT to the Feishu form before the defense Advisors read it in advance: https://rwz06e4m52t.feishu.cn/share/base/form/shrcntRnWynBNiOQwMqybSRhfXd Feishu
  • No grades Pass / fail only — a checkpoint, not a trial It exists to catch problems early. Don't stress; prepare steadily and you'll be fine. Breathe

08 · The eight sections

The official template is eight sections. Think of each as one question your slide must answer:

• • Slide 1 Title Project title, your name, your research advisor. 1
  • Slide 2 Research Question What are you trying to find out — and what do you expect to find (your hypotheses)? 1
  • Slide 3 Background Why does this issue matter, and to whom? Why should a stranger care? 1
  • Slide 4 Literature Review What's already known, what's still unsolved — and where your project fits in. 1–2
  • Slide 5 Research Design & Method How you'll collect data, how you'll analyze it — and the method's limits. 1–2
  • Slide 6 Research Plan & Challenges Your steps with dates, where you are now, what might block you — and your plan B. 1
  • Slide 7 Preliminary Results What you have so far — your live prototype counts. Interpret it honestly. 1
  • Slide 8 References At least 3 key sources, APA format, alphabetical order. 1

Plus one short thank-you slide at the very end. Tomorrow's class is exactly this: writing all eight sections in English, with AI, from what's already in your repo.

09 · Two rules — honest results, real references

Everything else is style. These two are integrity — break them and the midterm doesn't hold:

• • Rule 1 Slide 7 shows what's real A screenshot of your live prototype + what you honestly expect to find. "We expect…" is a strong sentence. Honest
  • Never Invent user data No made-up user counts, ratings, or quotes. You haven't run the study yet — and the advisors know it. Hard rule
  • Rule 2 References must be real and findable Search each title on Google Scholar yourself. It only goes on slide 8 if you can open it. Verify
  • AI cites Treat AI's citations as leads, not sources AI sometimes invents perfect-looking papers. Scholar finds it, or it doesn't go in. Leads

10 · Leave with

• • Today A live URL anyone can open Your project on the real internet — a link you can send anyone. Done
  • Today You know exactly what June 20 asks Eight sections, 7 minutes, in English, pass / fail — no surprises left. Done
  • Homework Come tomorrow with spec.md and research/ ready Sunday's class writes your full midterm talk from them, section by section. Sun
  • Not live yet? Wednesday office hour fixes it first Blocked by network or Node? Deployment is the first thing we solve in your OH slot. Wed

11 · Before you go — class feedback

Two minutes, every class. Tell us what landed and what didn't — it directly shapes next week's class.