第二阶段 未开始

把你的网页发布到互联网

让全世界都能访问你的作品

为什么要发布到互联网？

本地写好的网页只有你能看到，发布到互联网后，任何人都可以通过网址访问你的作品。

这是从"自己做着玩"到"做出可用的产品"的关键一步。你会经历完整的发布流程，理解网站是如何从本地走向线上的。

好消息是：对于纯静态网页（HTML + CSS + JS），有很多免费的托管平台可以选择。

主流托管平台对比

先认识这些常用平台，根据你的需求选择合适的方案。

首选推荐

Vercel

部署最快，自动 HTTPS，全球 CDN 加速。支持拖拽上传，新手最友好。

适合入门

GitHub Pages

免费稳定，与 GitHub 深度集成。适合代码托管 + 网站托管一体化。

功能丰富

Netlify

功能强大，支持表单处理、函数计算。适合需要后端能力的静态站。

国内友好

Cloudflare Pages

国内访问速度快，免费额度充足。适合面向国内用户的项目。

发布流程概览

无论选择哪个平台，基本流程都是相似的：

Step 1

准备文件

确保你的 HTML、CSS、JS 文件都在项目目录中，首页命名为 index.html

Step 2

选择平台

注册账号，创建新项目，选择部署方式（拖拽上传或 Git 连接）

Step 3

上传部署

上传文件或连接 Git 仓库，平台会自动构建和部署

Step 4

访问验证

获取平台分配的网址，打开浏览器确认网站正常运行

Vercel 快速上手

Vercel 是新手最友好的选择，支持拖拽上传，无需配置 Git。

1. 准备文件 把你的网页文件放在一个文件夹里，确保有 index.html
2. 访问 Vercel 打开 vercel.com，用 GitHub 或邮箱注册账号
3. 拖拽上传 点击 "Add New" → "Project"，选择 "Import Git Repository" 或直接拖拽文件夹
4. 等待部署 几秒钟后部署完成，你会得到一个 xxx.vercel.app 的网址
5. 访问验证 打开分配的网址，确认你的网站正常显示
💡
小贴士

Vercel 会自动为你配置 HTTPS，网址前面的 🔒 锁图标说明连接是安全的。

GitHub Pages 方式

如果你已经会用 Git，GitHub Pages 是更稳定的选择。

1. 创建仓库 在 GitHub 上创建新仓库，比如叫 my-first-website
2. 上传代码 把本地文件 push 到仓库，或者在网页上直接上传
3. 开启 Pages 进入仓库 Settings → Pages，选择分支和目录
4. 访问网站 几分钟后访问 username.github.io/repo-name

自动化部署

当你的项目需要频繁更新时，手动上传会很麻烦。这时候可以配置自动化部署。

原理很简单：每次你 push 代码到 Git 仓库，平台会自动拉取最新代码并重新部署。

基础

Git Hook

连接 GitHub/GitLab 仓库，push 后自动触发部署

进阶

CI/CD

配置 GitHub Actions，实现测试、构建、部署一体化

高级

预览环境

每个 Pull Request 都有独立的预览网址

💡
新手建议

先用拖拽上传完成第一次部署，等熟悉流程后再学习自动化部署。

常见问题

网页打不开？ 检查文件名是否正确（index.html），检查文件路径是否匹配
样式丢失？ CSS 文件路径使用相对路径，避免使用本地绝对路径
图片不显示？ 图片文件也要一起上传，路径区分大小写
更新不生效？ 清除浏览器缓存，或等待几分钟让 CDN 刷新

本关任务打卡

完成你的第一次线上部署，体验"作品上线"的成就感。