如何搭建一个网站

1 / 48
180 分钟 · 动手工作坊
如何搭建一个网站
三小时。零废话。下课时你会拥有一个真正的网站 —— 上面有你的名字 —— 活在互联网上，全世界任何人都能访问。我们来打开这个黑盒子。
Block 1
网站表面看见的是什么 —— HTML、CSS、JS、DOM、DevTools
Block 2
看不见的另一半 —— 服务器、API、前端 vs 后端
Block 3
从代码到全网 —— Git、GitHub、Cloudflare Pages，部署你自己的网站
Adventure 8
2 / 48
教师导读
这堂课怎么上
核心隐喻：我们打开一个已部署的网站 逆向  —— 先看眼前的（Block 1），再看服务器背后的（Block 2），最后看代码怎么变成 URL（Block 3）。
整堂课的主工具
浏览器自带的 DevTools。每个概念都用 inspect 当场演示。 
三个原点问题
1. "这个东西是被 浏览器看的，还是被 服务器?"
2. "你的 AI Agent 自动帮你做了这个 —— 但 它做的就是这件事。""
3. "你不知道 —— 打开 inspect 看看。""
样本站点： https://ai.ethanxi.com/en/class-demos/website/ —— 整堂课都开着这个标签页。
Adventure 8
3 / 48
课前 · 上课前 5 分钟
让大家都连上线
老师做
打开样本 URL： https://ai.ethanxi.com/en/class-demos/website/
提前打开 5 个标签：样本 URL、ai.ethanxi.com GitHub repo、YouTube、Cloudflare Pages dashboard、GitHub.com
学生做
笔记本电脑 + 鼠标
浏览器登好 GitHub 和 Cloudflare
找到自己 AI 做的网站 URL 和 GitHub repo 链接
点名
每个人举一下手 —— 能登进 CF Pages 吗？能登进 GitHub 吗？ 现在就把卡的修了，不要带到 Block 3。
Adventure 8
4 / 48
Block 1 · 50 分钟
网站表面看见的是什么
Block 1 学完后，你能用自己的话说清 HTML / CSS / JS，知道 DOM 是什么，会对 任意 网站用 inspect。
01
1.1 Hook（0–5 分钟）
用 DevTools 打开 YouTube
02
1.2 Elements 面板（5–15 分钟）
DOM 树 —— 节点、分枝、画面
03
1.3 View Source vs Elements（15–28 分钟）
原始 HTML vs 实时 DOM 树
04
1.4 三层（28–42 分钟）
HTML / CSS / JS 动手
05
1.5 图 + 练习（42–50 分钟）
白板图 + 学生 inspect 自己的网站
Adventure 8
5 / 48
1.1 · Hook · 0–5 分钟
今天我们要打开一个黑盒子
"你们每天都在用 YouTube、TikTok、Instagram。但你有没有想过它们到底是 什么做的？今天我们就要把它们打开看看。每台电脑都自带这个工具，叫 DevTools，浏览器免费送的。"
演示
打开 YouTube 首页
右键 → Inspect（或 F12）
让 DevTools 占据半个屏幕
问全班
"在这个面板里你们看到了什么？" → 预期：很多代码、奇怪的字符
"这些东西从哪儿来？" → 不强求答对；引出"从服务器来的"
过渡
"今天我们不直接拆 YouTube —— 太复杂了。我做了一个最简单的网站，用它来讲。"
Adventure 8
6 / 48
1.2 · Elements 面板 · 5–15 分钟
DOM 树
"看 —— 这是一棵树。最上面是 html。两个分枝：head（看不见的元数据）和 body（看得见的内容）。再往下：每个 section、每个 button、每张 image —— 都是树上的一个节点。"
演示
切换到样本站标签页
F12 → Elements 标签
展开 <html> → <body> → <header> → <h1> → 文字
悬停每个节点 —— 学生看见页面上对应位置高亮
"一个 'node'（节点）就是树上的一个零件。"
问全班
"如果我改一个 <h1> 在 Elements 里的文字，页面会变吗？" → 当场试 —— 会！
"为什么变了？" → 因为浏览器从树画出页面 —— 树变了 → 页面就变
"浏览器干的事：拿到一段 HTML 文字 → 在内存里建这棵树 → 根据这棵树画出页面。"
Adventure 8
7 / 48
📘 概念卡
DOM（Document Object Model）
DOM = 浏览器 在内存里建的树 （读完 HTML 文字之后）。
HTML
The 图纸 —— 原始文字文件
DOM
The 已经建好的房子 —— 浏览器内存里的活树
你看到的页面
画出来的 从树画出来 —— 不是直接从 HTML 文件
JavaScript
可以 修改这棵树 —— 页面立刻 更新
Adventure 8
8 / 48
📘 概念卡
DevTools
DevTools = 浏览器自带的 "内部仪表盘"。任何网站按 F12 都有。
今天我们用到 其中 3 个标签（共 7 个）:
Elements
看 DOM 树 —— 还能实时编辑
Console
直接跑 JS / 看错误
Network
看页面发出去的所有请求
Adventure 8
9 / 48
1.3 · View Source vs Elements · 15–28 分钟
冻结的菜谱 vs 桌上的菜
"看到没？我点了按钮，页面变了，Elements 里的树也变了。但 View Source 里那段文字 —— 纹丝没动。"
演示
在样本站上 Ctrl+U → View Source。"Quote of the Day" 卡里写的是 <p>Click the button below to load...</p>
关掉 View Source，打开 Elements
点 "Quote of the Day" 按钮 → 屏幕上出现一句话
在 Elements 里展开 .quote-card → <p> 内容 变了
再次打开 View Source → 还是原来那段文字 —— 没变
餐厅类比
View Source = 厨房收到的菜谱。
Elements = 桌上的菜。如果厨师加了葱花（= JavaScript），桌上的菜就和菜谱不一样了。
问全班
"在 YouTube 上，Ctrl+U 看到的 HTML 和 Elements 看到的会一样吗？" → 不一样 —— YouTube 是 SPA（单页应用）
Adventure 8
10 / 48
📘 概念卡
View Source vs Elements

View Source (Ctrl+U)
Elements (F12)
显示的是
服务器发的原始 HTML
当前的 DOM 树
何时定下来
页面加载那一刻
实时 —— JS 一动就更新
会变吗？
永不
会，实时
快捷键
Ctrl+U
F12
Adventure 8
11 / 48
📘 概念卡
HTML / CSS / JS
每个网页有三种文件，各管一件事。
HTML
结构 —— 页面有什么内容
类比：骨架（墙、门、窗在哪儿）
CSS
样式 —— 这些内容长什么样
类比：装修（油漆、家具、灯）
JS
行为 —— 用户操作时会发生什么
类比：智能家居（开关 → 灯亮 / 拍手 → 窗帘开）
Adventure 8
12 / 48
1.4 · 三层动手 · 28–42 分钟
演示：当场改东西
跟着做 —— 每一步都在样本站上操作：
步
改什么
在哪改
学生看到
1
<h1> 文字 → "I'm [自己的名字]"
Elements，双击
标题变了
2
.card background → 红色
Elements → Styles
卡片变红
3
Console： document.body.style.zoom = 0.5
Console 标签
整个页面缩小一半
4
刷新（F5）
—
所有改动都消失
"刷新 —— 全没了。 因为 DevTools 改的是内存里的 DOM 树，没碰服务器上的源文件。 下个 Block 我们就去看源文件在哪。"
Adventure 8
13 / 48
1.5 · 图 #1 · 42–50 分钟
完整图：浏览器到服务器
把这张图抄到笔记里：
    What you see on screen (browser paints it)
                     ▲
                     │  browser paints
                     │
           DOM tree (in memory)
                     ▲
                     │  browser reads + builds
                     │
      HTML + CSS + JS (text files)
                     ▲
                     │  fetched via URL
                     │
               (the server)

Block 1 总结： 网站 = HTML + CSS + JS + 资源。浏览器读 → 建 DOM 树 → 画页面。DevTools 让你看见这棵树，并 暂时.
学生练习（5 分钟）
Inspect 你自己 AI 做的网站。找：一个 <h1> 节点、一个有样式的元素、任何一段 JavaScript（在 <script> 里）。完成的举手！
Adventure 8
14 / 48
⏸ 中间休息 —— 10 分钟
伸个懒腰、喝口水，笔记本保持开着样本站。下个 Block 我们要往深里讲。
老师： 休息时确认所有学生都登好了 GitHub 和 Cloudflare。Block 3 之前把认证问题都修了。
Adventure 8
15 / 48
Block 2 · 50 分钟
静态 vs 动态：看不见的另一半
Block 2 学完后，你能说清前端 / 后端 / 数据库、看懂 Network 标签、分辨静态和动态网站。
01
2.1 回顾 + 挂钩（0–5 分钟）
那句话从哪儿来的？
02
2.2 fetch 一句话（5–15 分钟）
Network 标签 —— 看一次实时的 HTTP 请求
03
2.3 真实动态网站（15–28 分钟）
YouTube 的 Network 标签对照
04
2.4 前端 / 后端 / 数据库（28–35 分钟）
幕后的三层
05
2.5 静态 vs 动态（35–43 分钟）
你的网站是哪种？
06
2.6 动手（43–50 分钟）
拆解自己网站的 Network 标签
Adventure 8
16 / 48
2.1 · 回顾 + 挂钩 · 0–5 分钟
那句话从哪儿来的？
"上个 Block 我们看到了眼前的 —— HTML/CSS/JS 在浏览器里搭出页面。但想想：样本站上有个 'Quote of the Day' 按钮，点了之后会出现一句话 —— 那句话从哪儿来？ HTML 里没写吧？"
演示
再次在样本站上 Ctrl+U —— 确认 HTML 源码里根本没有那句话。HTML 里只写了 "Click the button below to load..."
过渡
"答案：从一个我们看不见的地方 —— 一台服务器。这个 Block 就讲那个看不见的地方。"
Adventure 8
17 / 48
2.2 · 关键演示 · 5–15 分钟
看一次实时的 HTTP 请求
"我点按钮的瞬间，浏览器 飞了一封信出去 ，飞到那台机器上问 'give me a quote'。那台机器 回了一封信 ，里面装着那句话。浏览器拿到信、打开、把句子放到页面上。这一去一回？就叫 HTTP 请求。"
演示
打开样本站， 先打开 Network 标签 （刷新一次清空）
点 "Quote of the Day"
Network 里新增一行 —— 指向 v1.hitokoto.cn
点开：Request URL / Status: 200 / Response 是 JSON
指出： Status 200 = "一切正常，这是你的数据。" 这是服务器在说 yes。
Adventure 8
18 / 48
📘 概念卡
服务器
服务器 = 一台一直 开着的电脑，等着回答问题。
你的笔记本
关机了 → 别人就找不到你
一台服务器
永远不关 —— 全世界任何人，任何时刻都能问它点儿什么，24/7
"服务器" ≠ 某种神秘超算。就是一台普通电脑 —— 有时还比你的手机慢 —— 放在某个机房，24/7 通着电，跑着一个程序在听问题。
Adventure 8
19 / 48
📘 概念卡
API
API = "后端的 菜单 —— 它愿意回答的问题清单。"
例子： v1.hitokoto.cn 开放了一个 API：
你问 ?c=i
→ 它回一句中国古诗
你问 ?c=a
→ 它回一句动画台词
你问别的
→ 它不答。菜单上没有。
Adventure 8
20 / 48
📘 概念卡
JSON
JSON = 前后端约定的 数据格式 。
长这样：
{
  "quote": "The only way to do great work is to love what you do.",
  "author": "Steve Jobs"
}
不是代码
它不会跑、不会执行任何东西
不是程序
就是数据 —— 像填好的表格，但用大括号写
两边都看得懂
浏览器和服务器都能完美理解
Adventure 8
21 / 48
📘 概念卡
HTTP / Request / Response
HTTP = 前后端约定的 规矩 浏览器和服务器之间说话的。
1
请求
浏览器问 → "给我 /quote"
前端发出
2
响应
服务器答 → "给你 {...JSON...}"
后端返回
HTTPS 是加密版的 HTTP。同样的对话，但带锁 🔒
Adventure 8
22 / 48
2.3 · 真实动态网站 · 15–28 分钟
YouTube 的 Network 标签
"每次你看见 YouTube 上冒出一个新视频卡片 —— 都是浏览器在问 YouTube 服务器：再给我几个视频。服务器回一段 JSON，浏览器把它变成卡片。我们的样本站只问一次。YouTube 每秒问几十次。 同一件事，只是规模不一样。"
演示
打开 YouTube + Network 标签
刷新一次 → 100+ 个请求 瞬间冒出来
筛选 Fetch/XHR → 只看数据请求
点开任意一个，看 Response → 又是 JSON
滚动首页 → 新请求实时冒出来
学生活动
在 Instagram、Reddit、TikTok 网页版、或 Twitter 打开 Network。
说出一个你看到的请求 URL。 2–3 个学生跟全班分享。
他们看到的每个请求 URL 都是浏览器在 "问" 某台服务器要东西。
Adventure 8
23 / 48
📘 概念卡
前端 / 后端 / 数据库
前端
在你 浏览器里跑的部分 (HTML/CSS/JS)
又叫：客户端（client）
后端
在 服务器上跑的程序，处理逻辑、回答 API 请求
又叫：服务端（server-side）
数据库
后端 长期存东西的地方  —— 把它想成档案柜。YouTube 把所有视频信息都存在数据库里。
Adventure 8
24 / 48
2.4 · 完整链路演示 · 28–35 分钟
YouTube 怎么给你播视频
"YouTube 给你播视频 —— 完整链路是这样： 前端 （浏览器）问 后端 （YouTube 服务器）：给我 10 个视频。 后端 问 数据库：最近哪 10 个最火？数据库返回列表 → 后端打包成 JSON → 前端画卡片。"
数据库查询
Backend API
前端请求
"你 AI 做的网站只有前端 —— AI 把它部署到了 CF Pages（一台静态服务器）。没有后端、没有数据库。所以它只能展示固定内容。"
Adventure 8
25 / 48
📘 概念卡
静态 vs 动态
静态网站
服务器把 现成的文件 原样给你。
例子：你的 CF Pages 站、博客、官网首页
静态 URL → 直接对应一个文件 → 返回那个文件
动态网站
服务器 每次都临时算一个答案，取决于你是谁、问什么、什么时候问。
例子：YouTube 首页、ChatGPT、Amazon
动态 URL → 触发一段程序 → 程序临时生成内容
CF Pages 只给静态站用  —— 它不跑你的后端代码，只是把文件交给浏览器。
Adventure 8
26 / 48
2.5 · 静态 vs 动态 · 35–43 分钟
你的网站是哪种？
"你 AI 做的网站是 静态的。但像样本站这样，你可以用 fetch 连别人的 API，让它'感觉'动态。要做有用户登录、能保存数据的真网站，你需要 自己的后端 —— 那是后面的事了。"
Wikipedia 文章页
静态还是动态？→ 静态 （文章内容很少改）
Instagram feed
静态还是动态？→ 动态 （每次刷新都不一样，按你的账号定制）
ChatGPT
静态还是动态？→ 非常动态 （每一次都生成全新的回答）
关键洞察： 静态前端 + 别人的动态 API 就能做到 80% 想做的事。
Adventure 8
27 / 48
2.6 · 动手 · 43–50 分钟
拆解你自己的网站
每个学生在自己电脑上：
打开自己 AI 做的网站 + Network 标签
数：刷新一次有多少请求？多少是 Fetch/XHR（API 调用）？
打开 YouTube 对比
你的网站
≈ 5–15 个静态请求，0–1 个 API 调用
YouTube
≈ 100+ 请求，几十个 API
"你的网站 = 静态。YouTube = 动态 + 静态混合。差别就是 后端开不开火."
Adventure 8
28 / 48
⏸ 中间休息 —— 10 分钟
快到了。最后一个 Block 是动手部分 —— 你要从零搭一个网站并部署。开始前先确认登好了 GitHub 和 Cloudflare。
老师： 这是修登录问题的最后机会。Block 3.4 需要 GitHub 和 Cloudflare 都能用。卡住的让助教帮一把。
Adventure 8
29 / 48
Block 3 · 50 分钟
从代码到全网：Git + GitHub + Cloudflare Pages
Block 3 学完后，你能说清 Git、从零写一个 hello.html 并部署、改一行字看着它自动重新部署。
01
3.1 Git（0–10 分钟）
代码版的游戏存档系统
02
3.2 完整链路（10–22 分钟）
你的电脑 → GitHub → CF Pages → CDN → 用户
03
3.3 CF Pages 速览（22–26 分钟）
Dashboard 走一遍
04
3.4 动手部署（26–48 分钟）
Step 0–6：空 repo → 上线 URL
05
3.5 图 + 反思（48–50 分钟）
用一张图讲完整条链路
Adventure 8
30 / 48
📘 概念卡
Git / Repository / Commit / History
Git = 版本控制工具。 类比：游戏存档系统。
Repository（repo）
一个项目的所有文件 + 所有历史版本
Commit
一次存档。 给项目当前状态拍个快照，附一句说明 "改了什么"。
History
The 你所有存档的时间线 —— 你能回到任何一个点
"改坏了？别慌。History 还在，随时能回去。"
Adventure 8
31 / 48
3.1 · Git 演示 · 0–10 分钟
浏览真实的 commit 历史
"每次改了什么就 commit 一下 —— 拍个照、写一句说明。所有快照排成时间线 = 你的 history。"
演示
打开样本站的 GitHub repo 页面
点 Commits → 看历史列表
点任一 commit → 看 diff（改了哪几行）
演示怎么时光机回到那个版本
📘 概念卡
GitHub vs Git
Git = 工具，跑在你电脑上。
GitHub = 网站（github.com）；你把 Git repo 上传上去，让别人能看、下载、协作。
Git ≠ GitHub。Git 是工具，GitHub 是 "代码版的 Dropbox + Google Docs，建在 Git 之上"。Git 不是 GitHub 公司发明的 —— 他们只是用它。
Adventure 8
32 / 48
3.2 · 完整链路 · 10–22 分钟
你的电脑 → 全世界
   Your computer → Git → GitHub → Cloudflare Pages → CDN → User's browser

1
Git
用一句 commit 信息存一次档
2
GitHub
Push —— 把存档上传到云端
3
Cloudflare Pages
盯着 GitHub，自动 build，部署到 CDN
4
用户的浏览器
从最近的 CDN 节点拉文件
"你的 AI Agent 干的就是这一整条：写代码、push 到 GitHub、搭一个 CF Pages 项目、绑域名、配 DNS。 它都帮你做完了。下面我们自己跑一遍。"
Adventure 8
33 / 48
📘 概念卡
Build / Deploy / Hosting / CDN
Build
把源代码编译成可发布的文件。我们的样本站只是一个 index.html —— 没什么好 build 的。React/Vue 项目要先 build。
Deploy
把网站文件 放到公网服务器上 ，让别人能访问。
Hosting
租用别人家服务器的空间， 存放你的网站。CF Pages 就是托管服务。
CDN
全球分布的 "快递分发点"。你的文件复制到所有节点上。 用户从最近的节点拉  —— 所以网站才能在全球秒开。
Adventure 8
34 / 48
📘 概念卡
域名 / DNS
域名
The 人能看懂的部分 URL 里的（比如 ai.ethanxi.com)
IP 地址
机器在互联网上真正的 "门牌号"
DNS
The "电话簿" 把域名映射到 IP
类比： 域名是人名（John）；IP 是身份证号。你说 "找 John"，DNS 告诉你身份证号，然后你才能找到他。
Adventure 8
35 / 48
3.3 · CF Pages Dashboard 速览 · 22–26 分钟
Dashboard 长什么样
"Build log = 程序员最好的朋友。下面我们要自己生成一条这样的 log。"
演示（在样本站项目上 3–4 分钟）
登录 dash.cloudflare.com → 打开样本站项目
Deployments 列表 —— 每次 push 到 GitHub 都会自动触发一次部署
点开任意一条 → Build log + Preview URL + 触发它的 GitHub commit hash
Deployments 列表里的每一行 = 有人往 GitHub push 了一次代码。CF Pages 看到了，自动跑了一次部署。
Adventure 8
36 / 48
Block 3 · 3.4 · 动手部署 · Steps 0–6
🎯 关键动手：从零部署一个网站
目标： 每个学生亲手走完整条 pipeline —— 从一个空 GitHub repo 开始，写最简单的 HTML，连接 Cloudflare Pages，看自动部署。然后改一行字，看着它自动重新部署。
在这 22 分钟里 —— 他们就真的懂了。 从零做让链路的每一环都暴露出来。改 AI 已经搭好的 repo 会把最关键的一步藏起来：配置。
1
Step 0
老师演示一遍（2 分钟）
2
Step 1
写 hello.html（3 分钟）
3
Step 2
创建 GitHub repo + 上传（4 分钟）
4
Step 3
连接 CF Pages（5 分钟）
5
Step 4
等 + 访问 URL（3 分钟）
6
Step 5
改一行字 → 看自动重新部署（3 分钟）
7
Step 6
反思（2 分钟）
Adventure 8
37 / 48
Step 0 · 2 分钟
老师演示：先看完整流程一遍
老师在投影上跑一遍完整流程 —— 不解释任何东西。只是为了让学生开始之前先有 "这件事是可行的" 这种感觉。
这一步的目的纯粹是心理上的：学生看到一个陌生人能在 5 分钟内从空 repo → 上线 URL。开始前就让他们觉得 "这事我能做"。
快速过一遍 Step 1–5。不要每点一下都解释。URL 上线时只说一句：
"就这样。这就是你们现在要做的。"
Adventure 8
38 / 48
Step 1 · 3 分钟
写 hello.html
复制这段代码 —— 然后 把 "Sam" 改成你自己的名字:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello — I'm Sam</title>
</head>
<body>
  <h1>Hello, World — I'm Sam</h1>
  <p>This is the first website I deployed myself.</p>
</body>
</html>

存到某个地方 —— 下一步你要把它粘到 GitHub 上。先别担心每行什么意思 —— 你在 Block 1 已经学过 HTML、head、body、h1 是干嘛的了！
Adventure 8
39 / 48
Step 2 · 4 分钟
创建 GitHub Repo + 上传文件
1
打开 github.com/new
Repository name： my-first-site · 设为 Public · 不要 勾 "Add a README"
2
点 "Create repository"
进到一个空 repo 页面 —— 这是正常的
3
点 "creating a new file"
文件名： index.html —— 然后粘 Step 1 的代码
4
拉到底部 → Commit new file
这是你的 第一个 commit。你的代码现在存在 GitHub 上的 Git history 里了。
Adventure 8
40 / 48
Step 3 · 5 分钟
连接 Cloudflare Pages
1
打开 dash.cloudflare.com
进入 Workers & Pages → Create → 切换到 Pages 标签 → Connect to Git
2
（只有第一次）在 GitHub 上 Authorize Cloudflare
选择 my-first-site → Save
3
选 repo → Begin setup
Build settings：Framework preset = None · Build command = 留空 · Build output directory = 留空
4
点 "Save and Deploy"
CF Pages 现在盯着你的 GitHub repo。每次 push 都会自动触发一次部署。
Adventure 8
41 / 48
Step 4 · 3 分钟
等第一次部署 + 访问你的 URL
CF Pages 显示 build log。等 30–60 秒 → 你拿到一个像这样的 URL https://my-first-site-xxx.pages.dev
"现在 CF 那台服务器在：拉你的代码 → 看到只有一个 index.html，没什么好 build 的 → 把文件上传到全球 CDN。等那个绿色对勾出来，你的网站就在全网活着了。"
打开 URL → 所有人看到自己的 "Hello, World — I'm [自己的名字]"。
🎉 这是赋权时刻 —— 暂停 30 秒，让大家欢呼一下。 他们刚刚把一个真网站放到了互联网上。
Adventure 8
42 / 48
Step 5 · 3 分钟
改一行字 → 看自动重新部署
1
回 GitHub → 点 index.html → 铅笔图标
改一下 <h1> 文字 —— 加 emoji、换句话、让它属于你
2
拉到底部 → Commit changes
就这样 —— 不需要其他步骤
3
不用碰 CF Pages —— 只看着
切到 CF Pages 标签：一条 新的部署自动出现了，状态 "In Progress"
4
等 30 秒 → 刷新你的 URL
状态变 Success → 你的改动上线了
Adventure 8
43 / 48
Step 6 · 2 分钟
反思：刚才发生了什么？
"你把 GitHub 当成了一个 触发器 —— 你 push 一次，CF Pages 就自动跑一次部署。这就是 'auto-deploy'：你不用每次手动上传文件了 —— '存档' 这个动作本身就是部署。"
问全班
"如果只 push 到 GitHub 但不连 CF Pages，别人能访问你的网站吗？" → 不能。GitHub 只存代码，不当 web server。CF Pages（或 Vercel、Netlify、GitHub Pages）才是把它公开的那一环。
"如果想加一张图片怎么办？" → push 一张 .jpg 到同一个 repo，HTML 里用 <img src="..."> 引用 —— CF Pages 自动把它一起 deploy。
常见卡点：
CF Pages OAuth 卡 → 用个人 Cloudflare 账号，不是公司或家长的
Build 失败 → 99% 是 HTML typo —— 看 build log 的红色那行
URL 404 → 文件名不是 index.html
Commit 了但没新部署 → 检查分支是不是 main
Adventure 8
44 / 48
3.5 · 图 #3 + 反思 · 48–50 分钟
用一张图讲完整条链路
Your source code (HTML/CSS/JS)
       ↓ git commit + push
   GitHub
       ↓ webhook fires
   Cloudflare Pages (build)
       ↓ uploads artifacts
   Global CDN
       ↓ HTTP + JSON
   User's browser
       ↓ parse → DOM tree → paint
   What the user sees

Block 3 总结： Git = 保存项目历史。GitHub = 把存档放到云上。CF Pages = 盯着 GitHub，自动 build、自动部署。CDN = 把成品放到全球每个角落。Domain + DNS = 人能记住的名字 → 真正的机器。
Adventure 8
45 / 48
"你刚刚做完了一次 真实、完整的部署 —— 从空 repo 到一个全世界都能访问的 URL。每一步都是你自己做的。下次想搭网站？不需要 AI。你自己就能。"
收尾 · 10 分钟
完整图
请 1–2 个学生 用他们自己的话 讲一遍整条链路：从你打字 → 到全世界能看到。
老师补充：
HTML/CSS/JS 三层
浏览器读文件 → 建 DOM 树 → 画页面
静态 vs 动态
前端 ↔ 前后端通过 HTTP + JSON 通话
Git → GitHub → CF Pages → CDN → 用户
Adventure 8
46 / 48
结尾讨论
结尾两个问题
问题 1：你的 AI Agent 替你做了什么？
我们一起列：选技术栈（Next.js、React、Tailwind）、写源代码、配 build 工具、注册 CF Pages、连 GitHub、配置部署流程、处理一堆奇怪的 bug。
问题 2：现在没有 AI 你能做什么？
Inspect 任何网站 · 改文字、颜色、图片 · 从零写一个 hello.html 并部署 · 分清前端和后端 · 见到 fetch + JSON 知道是什么 · 跟程序员对话不再听不懂。
"这就是 赋权  —— 你从 '按按钮、然后祈祷' 变成了 '我懂这个'。"
Adventure 8
47 / 48
课后挑战（自愿）
继续做 —— 三个难度
简单
把今天做的 my-first-site 改成你自己的个人主页 —— 你的名字、爱好、颜色、再加一张图
中等
在 hello.html 里加一个 fetch —— 天气 API 或 quote API —— 让它有动态内容
困难
在样本站上加第三张动态卡片 —— 自选任何公开 API 自己接上
Adventure 8
48 / 48
参考
概念词典（A–Z）
API
后端能回答的问题菜单
Build
把源代码编译成可发布的文件
CDN
全球分布的快递分发点；用户从最近的拉
Client
= 前端
Commit
Git 里的一次存档
Console
DevTools 里跑 JS / 看错误的标签
CSS
决定页面 长什么样的文件
数据库
后端长期存东西的地方
Deploy
把网站文件放到公网服务器上
DevTools
浏览器自带的内部仪表盘
DNS
域名 → IP 的电话簿
DOM
浏览器在内存里建的页面树
域名
URL 里人能看懂的部分
Elements 面板
DevTools 里看 DOM 树的标签
Fetch
JS 里发 HTTP 请求的标准方法
前端
在你浏览器里跑的部分
Git
保存项目历史的版本控制工具
GitHub
上传 Git repo 的网站
History
所有 Git 存档的时间线
Hosting
租用服务器空间存放你的网站
HTML
决定页面 页面有什么内容
HTTP
浏览器和服务器之间说话的规矩
HTTPS
加密版的 HTTP
IP 地址
机器在互联网上的真正数字地址
JS / JavaScript
决定页面 页面的行为
JSON
前后端交换的数据格式
Network 面板
DevTools 里看页面发的所有请求的标签
Node
DOM 树上的一个零件
Push
把本地存档上传到 GitHub
Repository（repo）
一个项目的所有文件 + 所有历史版本
请求
前端发出的一次 "问"
响应
后端返回的一次 "答"
服务器
一台一直开着、等回答问题的电脑
Server-side
= 后端
静态网站
服务器把现成的文件给你
动态网站
服务器每次都临时算一个答案
View Source
服务器最初发的原始 HTML（永不变）
Adventure 8

	View Source (Ctrl+U)	Elements (F12)
显示的是	服务器发的原始 HTML	当前的 DOM 树
何时定下来	页面加载那一刻	实时 —— JS 一动就更新
会变吗？	永不	会，实时
快捷键	Ctrl+U	F12

步	改什么	在哪改	学生看到
1	`<h1>` 文字 → "I'm [自己的名字]"	Elements，双击	标题变了
2	`.card` `background` → 红色	Elements → Styles	卡片变红
3	Console： `document.body.style.zoom = 0.5`	Console 标签	整个页面缩小一半
4	刷新（F5）	—	所有改动都消失

	API	后端能回答的问题菜单
	Build	把源代码编译成可发布的文件
	CDN	全球分布的快递分发点；用户从最近的拉
	Client	= 前端
	Commit	Git 里的一次存档
	Console	DevTools 里跑 JS / 看错误的标签
	CSS	决定页面长什么样的文件
	数据库	后端长期存东西的地方
	Deploy	把网站文件放到公网服务器上
	DevTools	浏览器自带的内部仪表盘
	DNS	域名 → IP 的电话簿
	DOM	浏览器在内存里建的页面树
	域名	URL 里人能看懂的部分
	Elements 面板	DevTools 里看 DOM 树的标签
	Fetch	JS 里发 HTTP 请求的标准方法
	前端	在你浏览器里跑的部分
	Git	保存项目历史的版本控制工具
	GitHub	上传 Git repo 的网站
	History	所有 Git 存档的时间线
	Hosting	租用服务器空间存放你的网站
	HTML	决定页面页面有什么内容
	HTTP	浏览器和服务器之间说话的规矩
	HTTPS	加密版的 HTTP
	IP 地址	机器在互联网上的真正数字地址
	JS / JavaScript	决定页面页面的行为
	JSON	前后端交换的数据格式
	Network 面板	DevTools 里看页面发的所有请求的标签
	Node	DOM 树上的一个零件
	Push	把本地存档上传到 GitHub
	Repository（repo）	一个项目的所有文件 + 所有历史版本
	请求	前端发出的一次 "问"
	响应	后端返回的一次 "答"
	服务器	一台一直开着、等回答问题的电脑
	Server-side	= 后端
	静态网站	服务器把现成的文件给你
	动态网站	服务器每次都临时算一个答案
	View Source	服务器最初发的原始 HTML（永不变）
Join more than 7M pro shoppers
