GitHub Pages、Vercel、Netlify 托管静态 HTML 项目时，核心要点是：用相对路径引用资源，确保 index.html 命名准确且大小写敏感，避免绝对路径；GitHub Pages 要求仓库公开、默认支持根目录或 /docs；Vercel 需检查 Build Output Directory 并慎用 SPA fallback；Netlify 需配置 _redirects 文件支持多页访问；所有平台均需通过浏览器 Network 面板验证资源请求路径是否正确。
GitHub Pages 直接托管静态 HTML 项目最简单
只要你的项目是纯 HTML/CSS/JS（无后端、不依赖 Node 或 PHP），GitHub Pages 是零成本、免配置、全球可访问的首选。它不运行服务器，只托管静态文件，所以不需要 package.json、server.js 或构建步骤。
- 仓库必须是公开的（私有仓库需升级 GitHub Pro 才能启用 Pages）
- 默认只支持根路径（
/）或/docs文件夹；选main分支根目录最直观 - 首页文件名必须是
index.html，大小写敏感，Index.html或INDEX.HTM都会 404 - 所有资源路径用相对路径，比如
/images/logo.png（会从域名根开始找，容易跨子目录失效）
Vercel 托管时为什么 CSS/JS 404？
常见原因是本地双击打开 index.html 能运行，但部署后样式丢失——这往往不是 Vercel 问题，而是你用了 file:// 协议下的相对路径，而 Vercel 运行在 HTTP 环境下，且默认开启 SPA fallback。根本解法是检查浏览器开发者工具的 Network 标签页，看哪些 .css 或 .js 返回了 404，并确认路径是否拼错或大小写不符。
- Vercel 会自动识别
index.html，无需配置，但若项目含public/或dist/目录，需在项目设置里指定为“Build Output Directory” - 如果用了
- Vercel 默认启用
SPA redirect，适合单页应用；纯多页 HTML 项目建议关闭，避免/about.html被重定向到/404.html
Netlify 托管后点击链接跳转 404 怎么办？
这是典型的前端路由或路径映射缺失问题。Netlify 不像本地文件系统那样允许直接通过文件路径访问 about.html，它需要明确知道哪些路径对应哪些文件。如果你的 HTML 项目有多页面（如 index.html、contact.html），必须确保每个页面都真实存在且命名准确。
- 检查
_redirects文件是否误写了全局重定向规则，例如/* /index.html 200会拦截所有请求，导致contact.html实际没被加载 - 若想保留干净 URL（如访问
/contact显示contact.html），需在项目根目录放_redirects文件，内容写：/contact /contact.html 200
- Netlify 的“Asset Optimization”默认压缩 JS/CSS，偶尔会破坏内联脚本或特殊注释，可临时关闭验证是否由此引发异常
本地开发和线上路径不一致的坑在哪？
最隐蔽也最常被忽略的是 和 的 src/href 值是否带前导斜杠。例如：href="/style.css" 在 GitHub Pages 子路径（如 https://user.github.io/repo/style.css）下会去请求 https://user.github.io/style.css，直接 404。
立即学习“前端免费学习笔记（深入）”；
- 一律使用不带斜杠的相对路径：
href="style.css"、src="js/app.js" - 如果项目必须部署到子路径（如
https://example.com/my-project/），可用 - 不要依赖
window.location.pathname拼接资源路径，它在不同托管平台的路径结构中行为不一致
路径问题没有银弹，唯一可靠的方式是在部署后打开浏览器开发者工具，逐个检查 Network 中的请求地址是否符合预期。很多“托管失败”其实只是资源加载失败，而非托管本身出了问题。
