最稳妥的静态HTML托管方式是GitHub Pages，零成本免备案且自带HTTPS；需将项目放仓库根目录或docs子目录，通过Settings→Pages启用，访问地址为https://username.github.io或https://username.github.io/repo-name。
直接把 HTML 文件扔到网上，不等于别人能访问到——关键在于「托管」和「可公开访问的 URL」。没有服务器或域名，光有 index.html 文件本地双击打开，只在你电脑上运行，别人根本打不开。
用 GitHub Pages 部署静态 HTML（零成本、免备案、自带 HTTPS）
这是最常用也最稳妥的入门方式。GitHub Pages 专为纯 HTML/CSS/JS 项目设计，不需要懂后端或配置服务器。
- 必须把 HTML 项目放在 GitHub 仓库的根目录或
docs/子目录下（否则默认不识别） - 仓库名格式影响访问地址：
username.github.io仓库会映射到https://username.github.io；其他仓库则为https://username.github.io/repo-name - 开启方式：仓库 Settings → Pages → Source 选
main分支 +/ (root)或/docs folder - 首次部署可能需 1–2 分钟生效，刷新页面看到
404先等一会儿，别急着重传
用 Vercel 或 Netlify 托管（支持自动构建、自定义域名、更友好）
比 GitHub Pages 更适合带构建步骤（如 Vue/React）的项目，但纯 HTML 同样适用，且部署更快、控制台更直观。
- Vercel 默认检测
index.html，上传 ZIP 或连 GitHub 后自动识别静态文件，无需配置 - Netlify 上传时若提示「No build command detected」，直接点「Continue to deploy」就行——它认得出纯 HTML
- 两者都提供免费子域名（如
your-site.vercel.app），也支持绑定自己的域名（需 DNS 解析） - 注意：如果 HTML 中引用了本地路径如
./style.css，确保这些文件和 HTML 在同一仓库中，否则上线后样式丢失
避免常见错误：HTML 路径、相对链接与本地预览陷阱
本地双击打开 index.html 正常，一上传就空白或样式错乱？大概率是路径写死了。
立即学习“前端免费学习笔记（深入）”；
- 浏览器本地打开用的是
file://协议，不支持fetch()、XMLHttpRequest，也不解析某些相对路径（比如../assets/img.png） - 所有资源引用（CSS、JS、图片）建议用「同级相对路径」：如
css/style.css、img/logo.png，不要用../或绝对路径/css/style.css（除非你确定部署在根目录） -
<base href="/>标签容易引发跳转错乱，静态页尽量不用；如果用了，务必确认所有相对链接都按此 base 解析 - 检查浏览器开发者工具（F12）的 Console 和 Network 标签页：404 的请求路径就是出问题的资源位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的作品</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>Hello World</h1> <img src="img/photo.jpg" alt="示例图"> <script src="js/main.js"></script> </body> </html>
路径结构要严格对应：
my-project/
├── index.html
├── css/
│ └── style.css
├── img/
│ └── photo.jpg
└── js/
└── main.js
上线后只要目录结构不变，链接就有效。改名或挪动文件前，先全局搜索旧路径再替换。
