No 404 Page

[jonnysmillie]

It doesn't seem to be possible to create a 404 page in the usual way with this setup. Anyone have a recommended way of doing so?

[donenoyes]

Any update on this @praveenweb or authors?

[bross-privakey]

I think I was able to sort it out. And it's a bit of a hack.

There is a precondition that your hosting provider (in my case gitlab pages) calls a 404 page from the root of your site if it can't find a resource.

The problem with just creating a 404 page in the root of content is that it will auto-magically show up in the navigation. That's not ideal.

So - I started digging around. I couldn't find a way to set the config.js sidebar to easily ignore a particular page in the documentation and looking at the code it looked pretty challenging. However, I sorted out a way to exclude it from the MDX.

As I said, it's a bit of a hack, but here it is. Basically you adjust the gatsby-node.js to set title to an empty string when it finds a particular string or an empty string in the frontmatter for title. The sidebar component won't render and entry when the title is an empty string. It's a one line change. But you'll still need to author a 404 page.

The hack

Create the page

Create your 404 page entitled 404.mdx page in the root of your content directory. Do what ever works for you for the content. But this is important. For the front matter make sure you specify title: 'dontshow' It doesn't need to be dontshow. It could be a blank string. dontshow seemed like a reasonable choice for me; I can't see myself using it for a page title. But, whatever you use here must be replicated in the next step.

Modify gatsby-node.js

Now the one line hack. For me line 106 in gatsby-node.js read:

value: node.frontmatter.title || startCase(parent.name),

Wherever it is in your gatsby-node.js file change it to:

value:
      node.frontmatter.title.length === 'dontshow' ? '' : node.frontmatter.title || startCase(parent.name),

I stopped digging in the code when it worked, but I'm sure with a little bit of effort one could make this lots less hacky. For starters I'd create a new frontmatter entry for a boolean called includeInSidebar and leverage that instead. But I was looking for an expedient fix and didn't want to mess with the sidebar code.

[YasuhiroIhara]

I have a different recommendation.

Modify templates/docs.js

I add 7 lines after line 19 which checks data object is NULL.

if (Object.keys(data).length == 2){
    return (
        <div>
            <center><h1>Page Not Found</h1></center>
        </div>
    );
}

This code checks number of elements in a data object, usually 3, but 2 if 404 occurs.

Hope this works for you, too.