最稳妥的静态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/子目录下(否则默认不识别) - 仓库名格式影响访问地址:
u仓库会映射到
sername.github.iohttps://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(除非你确定部署在根目录) 我的作品 Hello World
@@##@@路径结构要严格对应:
my-project/ ├── index.html ├── css/ │ └── style.css ├── img/ │ └── photo.jpg └── js/ └── main.js上线后只要目录结构不变,链接就有效。改名或挪动文件前,先全局搜索旧路径再替换。

sername.github.io






