Skip to main content

Docusaurus Customize 404 Page

This is similar to the solution for Adding a Comment System to Docusaurus.

Execute in the root directory of the project​

 yarn swizzle @docusaurus/theme-classic NotFound

This will generate the file src/theme/NotFound/index.js.

Then you can modify this index.js file.

Source of the solution: How can I customize the 404 page

If you want your custom 404 page to be wrapped by header and footer​

For example:

You can use <Layout>:

import Layout from "@theme/Layout"; // Import CSS file

export default function NotFoundWrapper(props) {
  return (
      <>
          <Layout>

              ...Your page content
          </Layout>

      </>

  );
}

tip

Also, I guess you are looking for interesting 404 pages. There is a topic on GitHub specifically about this.

Click: 404-page