把网站发布到互联网，获得真实网址

三个页面都做好了。现在把它发布到互联网——让任何人都能通过一个链接访问你的网站。

这一关用 Cloudflare Pages 部署，完全免费，不需要买服务器，不需要买域名，10 分钟搞定。

什么是"部署"？

你现在的网站只存在于你的电脑上。当你双击 index.html 打开，浏览器读取的是你本地硬盘上的文件。别人没有办法访问，因为他们的电脑上没有这个文件。

部署就是把你的文件上传到一台 24 小时在线的服务器上，让全世界的人都能通过网址访问。

传统的部署方式需要：租服务器（每月几十到几百元）、配置环境、处理安全问题……对新手来说门槛很高。

Cloudflare Pages 解决了这个问题：它是一个专门托管静态网站的平台，完全免费，上传文件就能用，不需要任何服务器知识。

静态网站 vs 动态网站的部署区别

| 类型 | 特点 | 部署方式 | 费用 | |------|------|---------|------| | 静态网站 | 只有 HTML/CSS/JS 文件 | Cloudflare Pages、GitHub Pages | 免费 | | 动态网站 | 有后端代码、数据库 | Vercel、Railway、AWS | 有免费额度，超出收费 |

这一章做的是静态网站，用 Cloudflare Pages 就够了。第二章开始会用 Next.js 做动态网站，那时候会换到 Vercel。

第一步：注册 Cloudflare 账号

打开 dash.cloudflare.com/sign-up，用邮箱注册，免费的。

注册时会发一封验证邮件，去邮箱点击确认链接。

---

第二步：上传你的网站

登录后，按以下步骤操作：

1. 点左侧菜单 「Workers 和 Pages」
2. 点 「创建」 → 选 「Pages」 标签页
3. 选 「直接上传」（不需要连接 Git）
4. 项目名填 food-explorer（这会成为你的网址：food-explorer.pages.dev）
5. 点「上传资产」，把 food-explorer 文件夹里的所有文件拖进去
6. 点 「部署站点」

等 10-20 秒，部署完成。

注意：上传时要把文件夹里的文件直接拖进去，不要把整个文件夹拖进去。确保 index.html 在最顶层。

---

第三步：验证上线，把链接发出去

部署成功后，点击 Cloudflare 给你的链接（格式：https://food-explorer.pages.dev），用手机也打开试试。

如果一切正常，把这个链接发到朋友圈、微信群，或者任何你想分享的地方。

你做出来的东西，值得被人看到。

---

如何更新已部署的网站

以后你修改了代码，想更新线上版本，操作很简单：

1. 打开 Cloudflare Pages，进入你的 food-explorer 项目
2. 点「创建部署」→「上传资产」
3. 把更新后的文件重新拖进去
4. 点「部署站点」

每次部署都会生成一个新版本，Cloudflare 会保留历史版本，如果新版本有问题可以回滚。

---

关于自定义域名

Cloudflare 给你的默认域名是 xxx.pages.dev，这个域名是免费的，可以一直用。

如果你想用自己的域名（比如 myfoodsite.com），需要：

1. 购买域名（在阿里云、腾讯云或 Namecheap 购买，每年几十元）
2. 在 Cloudflare Pages 的项目设置里绑定自定义域名
3. 按提示修改域名的 DNS 设置

这门课不要求配置自定义域名，但如果你想让网站看起来更专业，可以自己研究一下。

---

通关条件

完成以下三步即可通关：

1. 选择托管平台并上传网站文件
2. 通过链接成功访问到线上网站
3. 把链接发给朋友或发到社交平台

卡住了？

• 注册时收不到验证邮件？检查垃圾箱，或者换一个邮箱试试
• 上传后显示 404？确保 index.html 在上传文件的最顶层，不要套在子文件夹里
• 页面样式丢了？确保 CSS 文件也一起上传了，HTML 里引用的路径用相对路径（./style.css 而不是绝对路径）
• 项目名已被占用？换一个名字，比如加上你的名字缩写：food-explorer-lz
• 实在搞不定？发邮件：[email protected]