通过 Gatsby createPages 节点 api 创建的页面，部署到 Github 页面时不起作用

Question

I am creating some pages with the Gatsby createPages node api as mentioned here: https://www.gatsbyjs.com/docs/programmatically-create-pages-from-data/#creating-pages

But when I deploy to github pages, those pages give a 404 for example this page: https://giorgioremindme.github.io/probable-future

This is what I have in my gatsby-node-js:

const fs = require(`fs`)
const yaml = require(`js-yaml`)
exports.createPages = ({ actions }) => {
  const { createPage } = actions
  const ymlDoc = yaml.safeLoad(fs.readFileSync(`./src/content/index.yaml`, `utf-8`))
  ymlDoc.forEach(element => {
    createPage({
      path: element.path,
      component: require.resolve(`./src/templates/basicTemplate.js`),
      context: {
        pageContent: element.content,
        links: element.links,
      },
    })
  })
}

https://github.com/GiorgioRemindme/giorgio-martini/blob/main/gatsby-node.js

Locally works fine though...

You can visit these new pages by clicking on the thumbnail you see on this page: https://giorgioremindme.github.io/giorgio-martini/code ignore the last thumbnail, that one is broken, is missing a valid link, but the rest do work locally, but not deployed.

Any ideas on what i need to do to make this pages work when deployed?

Answer 1

If you enter to: https://giorgioremindme.github.io/giorgio-martini/code (without trailing slash. You can remove it by clicking "Code" link in the header).

And then you navigate, the site works smooth and no 404 are returned.

However, if you enter to https://giorgioremindme.github.io/giorgio-martini/code/ (note the trailing slash), your pages return a 404 when trying to navigate to them.

There's nothing wrong with your gatsby-node.js as the pages are properly created and they exist. Your issue is in your in-app linking/navigation, so in the views.

Nevertheless, my guess is that you are prefixing paths manually adding /code directly while Gatsby link should do it on their own. Try using withPrefix helper when building your links manually.

Double-check this behavior and the build locally to be sure where the source of the issue is (locally or in GitHub's environment) because the solution can vary depending on that.