github pages页面问题修复记录

问题概括：
GitHub Pages 部署成功后，博客主页 CSS/JS 资源全部 404，页面无样式。

问题类别：
路径引用

影响范围：
GitHub Pages 生产环境的主页（https://stuffren.github.io/chunking-blog/）及所有依赖静态资源的页面。

问题原因：

技术根因： 项目缺少 base 路径配置。Vite 构建时默认以 / 为根路径生成 assets 引用（如 /assets/main.js），但 GitHub Pages 仓库子路径部署的实际根目录是 /chunking-blog/，导致浏览器去错误的绝对路径请求资源。
人话解释： 你住在一个大院子的某间屋子里，但快递单上只写了"院子门口"，没写"哪间屋子"。快递员把包裹扔在大门就走了，你当然收不到。

排查思路：

用户查看主页源码，发现返回的是原始 index.html 模板（引用 /src/styles/... 和 /src/main.js），而非 SSG 预渲染后的完整 HTML。
推断 SSG 生成的 HTML 中 assets 路径也是错误的（缺少 /chunking-blog/ 前缀），浏览器加载 JS 失败后无法执行 Hydration，页面保持为服务器返回的原始 HTML。
结合 GitHub Pages 子路径部署特性，锁定根因：所有绝对路径都指向了根域名，而非子路径。

最佳解决方法：
采用环境变量控制 base path的方案，实现本地零影响、生产自动适配：

vite.config.js：生产构建时读取 process.env.BASE_PATH，本地开发默认 /。
deploy.yml：CI 构建步骤注入 BASE_PATH: /chunking-blog/。
build-ssg.js：所有内部导航链接自动拼上 BASE_PATH 前缀。
router.js：运行时通过 import.meta.env.BASE_URL 识别 base path，导航时自动补全前缀，路由匹配时自动剥离前缀。

验证状态：
用户已确认 —— "现在打开博客地址，一切正常，问题得到完美解决。"

问题概括：
点击文章进入详情页后，浏览器地址栏显示 /posts/1 并返回 404，缺少仓库子路径前缀。

问题类别：
路径引用

影响范围：
GitHub Pages 生产环境的所有文章详情页（如 /posts/1）、分类页、标签页等内部链接跳转。

问题原因：

技术根因： build-ssg.js 中生成的内部链接使用硬编码绝对路径（如 /posts/${post.number}），在根域名部署下正确，但在 GitHub Pages 子路径部署（/chunking-blog/）下，浏览器将其解析为 https://stuffren.github.io/posts/1，实际应为 https://stuffren.github.io/chunking-blog/posts/1。同时 router.js 也未处理子路径 basename，导致 SPA 运行时路由匹配失败。
人话解释： 你给朋友发的邀请函上写的聚会地址是"院子大门"，朋友到了院子找不到你的屋子，只能空手而归。

排查思路：

最佳解决方法：
与问题 1 共用同一套环境变量方案，形成完整闭环：

build-ssg.js：定义 BASE_PATH 常量，所有 <a href="..."> 链接统一改为 ${BASE_PATH}/posts/...、${BASE_PATH}/categories/... 等模板字符串拼接。
router.js：
- navigate() 方法中，若用户点击的 href 是绝对路径且未包含 BASE_PREFIX，自动补全前缀（如 /posts/1 → /chunking-blog/posts/1）。
- resolve() 方法中，若当前 URL 以 BASE_PREFIX 开头，先剥离前缀再进行路由正则匹配（如 /chunking-blog/posts/1 → 匹配 /posts/1）。

验证状态：
用户已确认 —— "现在打开博客地址，一切正常，问题得到完美解决。"