Gatsby: How do I append `/index.html` to the end of every <a> href route link in my Gatsby build files?

[drake-smith]

Summary

The routes in my index.html files are relative urls (ie. <a href="/articles/article-title" />). I am being asked by IT to add /index.html at the end of every url (making it <a href="/articles/article-title/index.html" /> because their server is not set up to return the index.html file automatically.

I tried adding /index.html to some links and testing ingatsby develop but I get 404s in develop.

Is this possible in the Gatsby build process? If so, how might I be able to?

Relevant information

"gatsby": "^2.16.1",
"gatsby-image": "^2.2.29",
"gatsby-plugin-catch-links": "^2.1.15",
"gatsby-plugin-favicon": "^3.1.6",
"gatsby-plugin-manifest": "^2.2.23",
"gatsby-plugin-offline": "^3.0.16",
"gatsby-plugin-react-helmet": "^3.1.13",
"gatsby-plugin-sass": "^2.1.20",
"gatsby-plugin-sharp": "^2.2.31",
"gatsby-plugin-sitemap": "^2.2.19",
"gatsby-plugin-svgr": "^2.0.2",
"gatsby-source-contentful": "^2.1.49",
"gatsby-source-filesystem": "^2.1.33",
"gatsby-transformer-remark": "^2.6.30",
"gatsby-transformer-sharp": "^2.2.23",

[michaellopez]

@drake-smith Maybe you could try what gatsby-plugin-remove-trailing-slashes is doing in onCreatePage. But instead of removing trailing slash you would add index.html to all paths that end with /. I'm not sure it would work but its the only thing I can think of right now.

Then as the notes state for gatsby-plugin-remove-trailing-slashes you have to make sure all your Links are correct and pointing to .../index.html.

[michaellopez]

@drake-smith I actually tested this out really fast and it works as I expect. Is this what you want?

// gatsby-node.js
exports.onCreatePage = ({ page, actions }, { suffix }) => {
  const { createPage, deletePage } = actions;

  return new Promise(resolve => {
    const oldPage = Object.assign({}, page);
    page.path += 'index.html';
    if (page.path !== oldPage.path) {
      deletePage(oldPage);
      createPage(page);
    }
    resolve();
  });
};

Also don't forget to use <Link to="/about/index.html">About</Link>, only using /about will work, but Gatsby will redirect you...it isn't pretty

[sidharthachatterjee]

Can't answer this better than @michaellopez already has! Their example should have you covered.

Let's close this issue for now. Thanks both of you! 💜