GitHub Pages部署后出现Resources not found资源加载404问题求助

问题原因 #

核心为Gatsby项目的路径前缀配置缺失：
原仓库的部署场景为根域名，未配置子路径前缀，你fork后部署到GitHub Pages的默认地址为https://<你的GitHub用户名>.github.io/<仓库名>/，属于子路径部署场景。未加前缀时构建出的静态资源引用路径为根路径/xxx.js，实际线上资源存放在子路径/<仓库名>/xxx.js下，因此触发404报错。本地gatsby serve正常是因为本地服务运行在根路径下，资源路径匹配无问题。

修复方案 #

1. 打开项目根目录下的gatsby-config.js，添加pathPrefix配置，参数值为你的仓库名，前后需保留斜杠：

module.exports = {
  // 其余原有配置保持不变
  pathPrefix: "/你的仓库名称/",
}

2. 修改package.json中的deploy命令，给gatsby build增加--prefix-paths参数，开启路径前缀适配：

"deploy": "gatsby build --prefix-paths && gh-pages -d public -b gh-pages"

3. 重新执行npm run deploy完成部署即可解决资源404问题。

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