因为项目站点根路径为/repo/，而/css/style.css被浏览器解析为username.github.io/css/style.css，实际文件位于/repo/css/style.css，故404；需用或构建工具配置base为/repo/。
为什么 /css/style.css 在项目站点里 404
GitHub Pages 的项目站点（比如 username.github.io/repo）实际根路径是 /repo/，不是 /。浏览器看到 href="/css/style.css"，就会硬生生拼成 https://username.github.io/css/style.css——这个地址根本不存在。它不会“聪明地”降级到当前子路径，也不管你 HTML 文件在哪儿，只认 URL 字面意思。
<base href="/repo/"> 是最轻量的修复方式
在 index.html 的 最开头加一行：
<base href="/repo/">
注意三点：
- 必须放在所有
<link>、<script></script>之前，否则无效 - 值填
/repo/（把repo换成你仓库名），不能写./或/ - 它会影响页面里所有相对路径（链接、图片、表单 action），所以只适合纯静态页；如果页面有跳转逻辑，内部链接也得统一用相对路径
Vite / Vue / Next.js 项目必须配 base 参数
构建工具生成的 HTML 默认假设资源在根目录，不手动改就必然 404。关键配置如下：
- Vite：在
vite.config.ts里设build.base: '/repo/'（推荐）或'./'（兼容性更好） - Vue CLI：修改
vue.config.js中的publicPath: '/repo/' - Next.js（
next export场景）：设置assetPrefix: '/repo/'
漏掉这一步，打包出来的 index.html 里还是 src="/assets/index.js"，白屏就是必然结果。
手动写 HTML？直接删掉所有 / 开头的路径
如果你没用构建工具，就是手写 HTML + CSS，那就别碰绝对路径。全部改用相对路径：
-
index.html里写：<link rel="stylesheet" href="css/style.css">（不是/css/style.css） -
css/style.css里写背景图：background-image: url("../images/bg.jpg");（从 CSS 文件位置出发算层级） - 确保文件结构和路径一一对应，别依赖 Jekyll —— 在仓库根目录放个空的
.nojekyll文件，避免下划线开头的文件夹（如_css）被忽略
路径问题本质是环境差异：本地开发时 http://localhost:3000/ 是真根目录，GitHub Pages 的项目站点却是个子路径。不显式对齐，浏览器就按字面执行，没有商量余地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
