Customize the 404 Page in Quartz

Apart from the fact that the intended page doesn’t exist, I usually connect a private note to a public one.

In Quartz, this renders as a 404 page because the note is private. So, I add an explanation to the 404 page, along with an animated image, to make it feel less monotonous.

These are the changes I made to the code:

quartz/components/pages/404.tsx

return (
  <article class="popover-hint">
    <h1>404</h1>
    <p>{i18n(cfg.locale).pages.error.notFound}</p>
    <p>{i18n(cfg.locale).pages.error.apology}</p>
    <a href={baseDir}>{i18n(cfg.locale).pages.error.home}</a>
    <img
      src="./assets/burning_tree.gif"
      alt="Burning tree pixel art"
      style={{
        maxWidth: "35%",
        height: "auto",
        margin: "1rem auto",
        display: "block",
      }}
    />
  </article>
)

You can also add something like an image—in this case, I added an animation using a GIF file located in the /content/assets folder. Alternatively, you can place it in the quartz/static folder.

quartz/i18n/locales/definition.ts

error: {
  title: string
  notFound: string
  apology: string
  home: string
}

quartz/i18n/locales/en-US.ts

error: {
      title: "Not Found",
      notFound: "Either this page is private or doesn't exist.",
      apology: "I sometimes link from public notes to one of my private notes, sorry about that!",
      home: "Return to Homepage",
    },

quartz/i18n/locales/en-GB.ts

    error: {
      title: "Not Found",
      notFound: "Either this page is private or doesn't exist.",
      apology: "I sometimes link from public notes to one of my private notes, sorry about that!",
      home: "Return to Homepage",
    },

Reference

• My Quartz + Obsidian Note Publishing Setup by Oliver Falvai

---

Related:

Quartz Obsidian