How to create a custom 404 page?

[lakshyaelite]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

I want to create a custom 404 page for my blog using this code:

---
layout: page
permalink: /404.html
---

<div style="text-align:center;padding:2rem;">
  <h1>🤷 Oops! Page not found</h1>
  <p>Looks like you've wandered off the map.</p>
  <a href="{{ '/' | relative_url }}">← Take me back home</a>
  <div style="margin-top:2rem;">
    <img src="https://http.dog/404.webp" alt="404 Dog" style="max-width:100%; height:auto;" />
  </div>
</div>

Operations you have already tried

I have tried creating both 404.html and 404.md files. But still I am getting the default 404 page.

Anything else?

I am getting these conflit errors every time I ren bundle exec jekyll server using the docker file.

Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /workspaces/lakshyaelite.github.io/_site/404.html
                     - 404.md
                     - assets/404.html
                    
          Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /workspaces/lakshyaelite.github.io/_site/robots.txt
                     - assets/robots.txt
                     - /workspaces/lakshyaelite.github.io/robots.txt
                    
                    ...done in 15.775792981 seconds.

[SoumyaK4]

@lakshyaelite
Here's mine
https://github.com/SoumyaK4/SoumyaK4/blob/main/assets/404.html

[lakshyaelite]

Oh thanks! This removed the conflit errors and it works now!