Gatsby-plugin-create-page-html NPM

gatsby-plugin-create-page-html

Helps prevent 301 redirects of paths without trailing slashes, by creating a .html file in the /public directory for each page. This plugin looks for paths without trailing slashes in order to generate these files, so use it with gatsby-plugin-remove-trailing-slash or a similar solution. See how it works to find out more information.

# Gatsby ./public directory

404/index.html
404.html
blog/post/index.html
index.html
route/index.html
# ...

# With gatsby-plugin-create-page-html

404/index.html
404.html
blog/post/index.html
blog/post.html
index.html
route/index.html
route.html
# ...

Install

$ npm install gatsby-plugin-create-page-html

Configure

// gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-plugin-create-page-html',
    // ...
  ],
}

How it works

By default, Gatsby creates a directory containing an index.html file for each generated page, e.g. public/page/index.html; if the source file has a .html.js extension, Gatsby will create a .html file with the page name, e.g. public/page.html. This plugin looks for pages without a trailing slash on their path — like those modified by gatsby-plugin-remove-trailing-slash — and creates corresponding .html files.

Caveats

File duplication

When opening a /path URL on the browser, Gatsby will look for page data using exactly this path. To avoid breaking the website, this plugin generates a /path.html file and doesn't delete the /path/index.html file. This way, if /path.html is using some URL rewrite scheme, it can look for /path page data and find a related JSON file. It's the same behavior of the Gatsby 404 internal plugin.

Gatsby develop and serve

You will not notice any difference using this plugin with Gatsby develop or serve commands, but you can use http-server or something like PHP built-in server to check if the 301 redirects are really disabled.

Configuring server

Conventionally, paths ending with a trailing slash are treated as directories — this is the cause of the 301 redirects, a URL without a trailing slash trying to open a directory resource. To avoid this, you must configure the server to use the .html files generated by this plugin — like rewriting requests from /path to /path.html. In most cases, the website should work fine without further configuration.

gatsby-plugin-sitemap

You must configure gatsby-plugin-sitemap manually or it'll create entries for both /path and /path.html URLs. URLs ending with .html can be filtered out like in the example below:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-sitemap',
      options: {
        query: `{
          allSitePage(filter: { path: { glob: "!**/*.html" } }) {
            nodes {
              path
            }
          }
        }`,
        serialize: ({ allSitePage }) => (
          allSitePage.nodes.map(({ path }) => ({
            url: path
          }))
        )
      }
    },
  ]
}

Note: this is just a quick example of how to filter out .html URLs, please read the gatsby-plugin-sitemap documentation to find information about how to properly configure it.

License

4 years ago

5 years ago