根本原因是项目站点的网站根路径为/repo/而非/，导致/css/style.css被解析为错误URL；应通过<base href="/repo/">或构建工具配置base参数统一修正资源路径。
CSS 文件在 GitHub Pages 项目站点里 404，根本原因不是路径写错了，而是你误把“网站根路径”当成了“仓库根目录”。
为什么 /css/style.css 在项目站点里加载失败
GitHub Pages 用户站点（username.github.io）的网站根路径是 /，所以 /css/style.css 解析为 https://username.github.io/css/style.css，能命中；但项目站点（username.github.io/repo）的网站根路径其实是 /repo/，此时浏览器仍按字面解析 /css/style.css → https://username.github.io/css/style.css，必然 404。
浏览器不会自动“降级”到当前子路径，它只认 URL 开头的 / 是网站根，和你 HTML 文件放在哪无关。
- 用户站点：发布源为
main分支根目录 → 网站根路径 =/ - 项目站点：发布源为
main分支的docs目录 或gh-pages分支 → 网站根路径 =/repo/（repo是你的仓库名）
用 <base href="/repo/"> 最快修复
在 index.html 的 <head> 里、所有 <link> 和 <script> 标签之前，加一行：
立即学习“前端免费学习笔记（深入）”；
GInstall OneClick — 一键安装 GitHub 项目：规划、克隆、安装 Node 依赖、运行开发脚本。适用于想要获取 GitHubNode.js 项目的用户。
<base href="/repo/">
之后所有相对路径（比如 css/style.css、js/app.js、images/logo.png）都会自动补上前缀，变成 /repo/css/style.css，正确命中资源。
- 值必须是
/repo/（把repo换成你实际仓库名），不能写./、/或完整 URL - 它会影响页面中所有相对 URL：链接、图片、表单
action，所以只适合纯静态展示页 - 如果页面有跳转逻辑，内部链接也得统一用相对路径（如
about.html），不能写/about.html
Vite / Vue / React 项目必须配 base 参数
构建工具生成的 HTML 默认假设资源在网站根目录（/），不改就必然 404。例如 Vite 项目，vite.config.ts 中的 base 必须设为 "/repo/"（注意开头和结尾的斜杠），否则打包出的 index.html 里所有 assets/ 引用仍是 /assets/xxx.js。
- Vue CLI 对应配置是
publicPath: "/repo/" - Next.js 需设置
assetPrefix: "/repo/" - Webpack 项目需配置
output.publicPath: "/repo/"
CSS 里的 background-image: url() 怎么写
不要用 url(./images/bg.jpg) 或 url(../images/bg.jpg) —— 这类路径依赖 CSS 文件位置，在 GitHub Pages 子路径部署下极易失效。
统一改用根相对路径：url(/repo/images/bg.jpg)（把 repo 换成你仓库名）。
- 这个路径会从网站根开始找，不受 CSS 文件所在目录影响
- 和 HTML 中
<img src="/repo/images/logo.png">写法一致，容易统一维护 - 如果用了
<base href="/repo/">，CSS 里仍要写完整根路径，<base>不影响url()解析
最易被忽略的一点：路径问题常连带引发 JS 报错或 DOM 渲染异常，比如图片加载失败导致 :hover 效果不生效——表面是 CSS 问题，根子还在路径没对上。
