GitHub Pages部署时相对路径失效问题求助

1. 相对路径解析的核心差异 #

本地运行时，页面基准URL是项目根目录（如http://localhost:3000/），但部署到GitHub Pages后，站点基准URL变为https://<用户名>.github.io/<仓库名>/。你用的../assets/data/staticSet.json是基于当前页面URL层级解析的，比如当前页面是https://jamestroxel.github.io/NASA-JPL-NEO/index.html，../assets会被解析到https://jamestroxel.github.io/assets/，直接跳过了仓库名，自然出现404。

2. 静态单页应用的直接修复方案 #

• 改用带仓库名的根相对路径：把路径硬编码为/NASA-JPL-NEO/assets/data/staticSet.json，这种写法从域名根目录开始定位，直接指向仓库下的资源，不受页面层级影响。
• 动态获取基准路径：不想硬编码仓库名的话，用JS动态提取当前路径的仓库名：

  const repoName = window.location.pathname.split('/')[1];
  d3.json(`/${repoName}/assets/data/staticSet.json`).then((data) => {
    // 数据处理逻辑
  });
  

3. _config.yml不生效的原因 #

Jekyll的baseurl配置只对Jekyll生成的页面（比如用Liquid语法引用的资源）有效，纯静态HTML/JS项目不会自动读取这个配置，所以加了也没用。

4. GitHub Pages的隐性变化排查 #

最近GitHub Pages对静态资源路径解析可能有调整，之前的相对路径写法可能依赖本地与部署环境的URL层级巧合，现在这种巧合不存在了。额外检查两点：

• 确认部署分支正确（比如gh-pages分支或主分支的部署配置），确保构建后的文件里确实包含assets/data/staticSet.json。
• 查看仓库的GitHub Pages设置，是否开启了自定义域名——如果开启，基准URL会变成域名根目录，路径写法也要对应调整。

5. Angular项目的专属处理 #

Angular项目部署到GitHub Pages时，必须在构建时指定--base-href参数：

ng build --prod --base-href="/NASA-JPL-NEO/"

这样Angular会自动给所有资源路径加上基准前缀，避免路径错误。

内容的提问来源于stack exchange，提问作者JRT