html怎么用github pages部署_HTML项目如何免费部署到GitHub-html教程-PHP中文网

github pages部署需严格匹配仓库名或分支结构：用户主页须为username.github.io且文件在main/master根目录；项目页可任意命名但需在settings中指定源分支/文件夹；资源路径须用相对路径或base标签；不支持服务端逻辑；spa刷新404问题可通过同内容404.html解决。

html怎么用github pages部署_html项目如何免费部署到github

GitHub Pages 要求仓库名或分支名必须匹配

GitHub Pages 不是随便 push 就能上线的，它严格依赖仓库命名或分支结构。如果你用的是用户/组织主页（比如 username.github.io），仓库名必须是 username.github.io，且内容得在 main 或 master 分支根目录下——不能套在 /src 或 /dist 里。

常见错误现象：404 Not Found 页面，但 GitHub 上明明有 index.html；或者页面空白，控制台报 Failed to load resource: the server responded with a status of 404 ()，大概率是路径没对上。

个人主页：仓库名必须为 username.github.io，文件放在 main 分支根目录
项目页（Project Pages）：任意仓库名，但需在 Settings → Pages → Source 里手动选分支 + 文件夹（如 gh-pages 分支，或 main 分支下的 /docs 文件夹）
不支持子目录部署为独立域名，比如 username.github.io/myapp 只能通过项目页实现，且路由要配相对路径

HTML 中的资源路径别写死成绝对路径

本地双击打开 index.html 能看到图片和 CSS，一推到 GitHub Pages 就全挂了？八成是用了 /css/style.css 这种以 / 开头的绝对路径。GitHub Pages 的项目页地址是 https://username.github.io/repo-name/，浏览器会把 /css/... 解析成 https://username.github.io/css/...，而不是你仓库里的位置。

正确做法是统一用相对路径，或用 <base href="./"> 控制基准 URL（注意结尾斜杠）。

图片、CSS、JS 全部用 ./css/style.css、../images/logo.png 这类写法
如果用了 <base href="/repo-name/">，那所有相对路径都会拼上去，适合项目页，但每次改仓库名都要同步改 href
Vite / React 等构建工具默认输出带 / 前缀的资源路径，部署前务必配置 base: "./"（Vite）或 homepage: "."（Create React App）

GitHub Pages 默认不运行服务端逻辑，纯静态才稳

GitHub Pages 就是个 HTTP 文件服务器，不执行 PHP、Node.js、Python，也不支持 .htaccess 重写规则。你放个 api.php 或 server.js，它只会被当文本下载，不会运行。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

想做表单提交、用户登录、数据库交互？要么换平台（Vercel、Netlify），要么前端调第三方 API（比如 Formspree、Airtable、Supabase）。

所有 JS 里的 fetch("/api/submit") 必须指向外部服务，否则会 404
本地测试时用 python3 -m http.server 或 VS Code Live Server，别依赖双击打开，因为 file:// 协议下 fetch 会被 CORS 拦截
如果用了路由库（如 Vue Router、React Router），启用 history 模式后，刷新 404 是正常的——GitHub Pages 不会自动 fallback 到 index.html，得靠 404.html 曲线救国（见下条）