Gatsby createPages接口创建的页面部署到Github Pages后404如何解决

问题根因 #

Github Pages 默认会将项目站点部署在对应仓库名的子路径下，你本地开发时站点运行在根路径，createPage生成的页面路径没有匹配部署后的子路径前缀，因此部署后访问返回404。

修复步骤 #

• 第一步：在gatsby-config.js中添加pathPrefix配置，值为你的Github仓库名称

module.exports = {
  // 此处填写你的仓库名，和Github上的仓库名保持完全一致
  pathPrefix: `/giorgio-martini`,
  // 保留你原来的所有其他配置
}

• 第二步：修改package.json中的build命令，添加--prefix-paths参数让路径前缀配置生效

{
  "scripts": {
    "build": "gatsby build --prefix-paths",
    // 保留原来的其他脚本配置
  }
}

• 第三步：校验yaml中的路径配置
  你yaml文件里定义的路径如果是/probable-future这类带前导斜杠的格式不需要修改，Gatsby会自动拼接前缀，最终生成的部署路径为/giorgio-martini/probable-future，和Github Pages的路径规则匹配。
• 第四步：确认跳转逻辑
  页面内所有跳转请使用Gatsby官方提供的Link组件，不要用原生a标签，Link组件会自动适配pathPrefix，不需要手动给跳转路径加前缀。

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