html5网页发布关键在于路径正确、服务可用、域名可达;github pages需严格遵守仓库名和分支规则,vercel/netlify需配置路由回退,ftp部署须注意路径、大小写与权限,调试优先查network面板。

index.html 放对位置,就能被访问——HTML5网页本质就是一堆静态文件,发布不靠“上传完事”,而靠“路径正确 + 服务可用 + 域名可达”。
用 GitHub Pages 免费托管,但必须注意仓库命名和分支规则
GitHub Pages 是最轻量、零配置的免费方案,但它有硬性约定:用户主页站点只认 用户名.github.io 这个仓库名,且默认从 main(或 master)分支根目录提供服务。
- 如果你建了别的名字(比如
my-portfolio),即使推上index.html,也不会自动变成可访问的网站;必须手动在 Settings → Pages 中启用,并选/ (root)目录 - 本地项目结构必须扁平:所有资源(
css/、js/、images/)和index.html都放在仓库根目录下,不能套在子文件夹里,否则相对路径会断 - 浏览器地址栏输入
https://用户名.github.io后,GitHub 自动查找该仓库根目录下的index.html;如果文件名是home.html或大小写写成Index.html,页面将 404
用 Vercel 或 Netlify 部署更稳,但需留意 SPA 路由回退问题
这两个平台对前端项目更友好,支持 Git 关联、一键预览、自动 HTTPS,但单页应用(如用 history.pushState 的 HTML5 路由)上线后容易出现 404 错误——比如访问 /about 页面直接报错,而不是回退到 index.html。
- Vercel 要在项目根目录加
vercel.json,写入:{"rewrites": [{"source": "/(.*)", "destination": "/index.html"}]} - Netlify 则需在项目根目录放
_redirects文件,内容为:/* /index.html 200
- 若没配,用户从外部链接点进
/contact会看到 404,但刷新首页再点导航又正常——这是典型路由未兜底的表现
别把 FTP 当万能钥匙,路径权限和大小写敏感才是真坑
用 FileZilla 传完文件不代表万事大吉。虚拟主机看似简单,实则隐藏三类高频故障:
立即学习“前端免费学习笔记(深入)”;
-
public_html和www不是同个目录,传错根目录会导致域名打开空白页;建议先连上 FTP 看清右侧远程窗口实际路径名 - Linux 服务器区分大小写:
Images/logo.png在代码里写成images/logo.png,本地 Windows 打开没事,一上传就 404 - 图片、CSS 文件权限设成
644,文件夹权限设成755;如果用网页端文件管理器上传,常把权限错设为600,导致资源无法被 HTTP 读取
发布后打不开?先关掉浏览器缓存再验证
很多“发布失败”其实是缓存假象:你改了 index.html 并上传,但浏览器仍加载旧版本,尤其当页面含内联脚本或未加版本号的 CSS 引用时。
- 测试时用无痕窗口访问,或强制刷新:
Ctrl+Shift+R(Windows/Linux)、Cmd+Shift+R(macOS) - 检查浏览器开发者工具的 Network 标签页,看
index.html状态码是否为 200,再逐个点开css/、js/请求,确认每个src或href返回的都是 200 而非 404 - 如果所有资源都显示 200 却页面空白,大概率是 JS 报错阻塞渲染,切到 Console 标签页看有没有
Uncaught ReferenceError或跨域加载失败提示
真正卡住人的从来不是“怎么传上去”,而是“为什么路径对了却加载不了资源”——多看一眼 Network 面板里的请求地址,比重传十遍都管用。










