Anson LowZF Blog

moon indicating dark mode
sun indicating light mode

How I Add 404 Page To Gatsby-Theme-Blog

April 07, 2020 #gatsby-theme-blog

I’m writing How to add Google Analytics to gatbsyjs Site article, when I build the site and search for the Tracking ID. The terminal is throwing a red warning to me

404 page is missing

Oh no, gatsby-starter-blog-theme does not come with 404 page. I don’t aware of this until I wrote my 8th article.

I search related topic in gatsbyjs site and land myself at page

After reading it and I found one paragraph said:-

Because Gatsby creates this page for you by default, there is no need to configure it in your gatsby-node.js file.

404 page is not created by default for gatsby-starter-blog-theme starter. Gatsby’s team should do something about it.

Anyway, I going to add it manually

Next paragraph said:-

When developing using gatsby develop, Gatsby uses a default 404 page that overrides your custom 404 page. However, you can still preview your 404 page by clicking “Preview custom 404 page” to verify that it’s working as expected. This is useful when you’re developing so that you can see all the available pages.

After run gatsby develop, I visit a page not existed /localhost:8000/abc

gatsby development 404 page

I click Preview custom 404 page, a message appear and shown

A custom 404 page wasn’t detected - if you would like to add one, create a component in your site directory at src/pages/404.js.

I create a directory pages In src folder and add a file named 404.js

Then I go to gatsby-starter-default starer github source code to copy the 404.js code and modify a bit

import { Link } from "gatsby"
import React from "react"
import SEO from "gatsby-theme-blog/src/components/seo"
const NotFoundPage = () => (
<>
<SEO title="404: Not found" />
<div
style={{
width: `100vw`,
height: `100vh`,
display: `flex`,
justifyContent: `center`,
alignItems: `center`,
}}
>
<div>
<h1>NOT FOUND</h1>
<p>
{`You just hit a route that doesn't exist... Please visit `}{" "}
<Link to="/" className="link-style">
Homepage
</Link>
</p>
</div>
</div>
</>
)
export default NotFoundPage

Wala… 404.html created as easy as that.

To check out my amazing 404 page, click here


A self-taught developer documenting and sharing his learning experience.
React.js • Gatsby.js • Next.js soon. More about me