website/src/pages/404.tsx

import { PageProps } from 'gatsby';
import React from 'react';
import Navbar from '../components/navbar';

export default ({ location }: PageProps): JSX.Element => {
  const messages = [
    <p>
      In your attempt to search for <code>{location.pathname}</code>, you seem
      to have gotten lost instead. Fret not, for there is always a path{' '}
      <a href='/'>home</a>.
    </p>,
    <p>
      Not all who wander are lost, but you seem to be. Go <a href='/'>home</a>?
    </p>,
  ];
  return (
    <>
      <Navbar />
      {messages[Math.floor(Math.random() * messages.length)]}
    </>
  );
};