How to Create a 404 Page #188362

EiJackGH · 2026-03-01T13:21:42Z

EiJackGH
Mar 1, 2026

Select Topic Area

Show & Tell

Body

How to create a 404 page in GitHub Pages?

File Path:

404/
404.html
style.css

Code:

404.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>404 Page Not Found</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="error-container">
       <h1>404</h1>
       <p>Oops! The page you're looking for isn't here.</p>
       <a href="/">Go Back to Home</a>
   </div>
</body>
</html>

style.css

body {
   background-color: #f4f4f4;
   font-family: Arial, sans-serif;
   text-align: center;
   padding: 50px;
}
error-container h1 {
   font-size: 100px;
   color: #ff6b6b;
}
error-container p {
   font-size: 20px;
   margin-bottom: 20px;
}
error-container a {
   text-decoration: none;
   background-color: #333;
   color: white;
   padding: 10px 20px;
   border-radius: 5px;
}
error-container a:hover {
   background-color: #555;
}

Testing the Page

Save the files as 404.html and style.css.
Configure your web server (Apache, Nginx, or hosting provider) to serve this file for 404 errors.
Visit a non-existent URL on your site to verify it loads correctly.

Best Practices

Keep the design consistent with your site’s branding.
Include navigation links or a search bar to help users find content.
Make it mobile-friendly for better accessibility.
Optionally add creative visuals or animations for engagement.

SIMARSINGHRAYAT · 2026-03-01T14:01:51Z

SIMARSINGHRAYAT
Mar 1, 2026

Nice template! For GitHub Pages specifically, the key thing to know is that GitHub Pages automatically serves a 404.html file when a requested resource isn't found.

For static site hosting on GitHub Pages, here's what you need to do:

Create a 404.html file in the root of your repository (or in the docs folder if you're using /docs for GitHub Pages)
Place it at the correct path:
- If your Pages source is the root: 404.html in the root
- If your Pages source is /docs: 404.html in the /docs folder
GitHub Pages will automatically serve this when a visitor hits a 404 error

For Jekyll sites (if using Jekyll on GitHub Pages):

The 404.html should be in the Jekyll root directory
GitHub Pages recognizes it automatically

Testing locally:

If using Jekyll, run bundle exec jekyll serve and test with a non-existent URL
For static sites, you might need a local server. Use Python: python -m http.server and check developer console for 404 errors

Your HTML and CSS look great! Just make sure the file is committed and pushed to your repository. GitHub Pages should pick it up automatically within a few minutes.

Hope this helps! Let me know if you run into any issues with your GitHub Pages setup.

0 replies

Sabari-Vasan-SM · 2026-03-01T14:04:23Z

Sabari-Vasan-SM
Mar 1, 2026

✅ How 404 Works in GitHub Pages

If you’re using GitHub Pages, you must place:

/404.html

👉 Directly in the root of your published branch (usually main or gh-pages)

NOT inside a folder like:

404/404.html ❌

It must be:

/404.html ✅
📁 Correct Folder Structure

For a basic GitHub Pages site:

/index.html
/style.css
/404.html

If you're using a project repo (username.github.io/repo-name), same rule — 404.html must be at the root of the published branch.

⚠️ Small Bug in Your CSS

You forgot the . before error-container.

This:

error-container h1

Should be:

.error-container h1

Because it's a class.

✅ Fixed style.css
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}

.error-container h1 {
font-size: 100px;
color: #ff6b6b;
}

.error-container p {
font-size: 20px;
margin-bottom: 20px;
}

.error-container a {
text-decoration: none;
background-color: #333;
color: white;
padding: 10px 20px;
border-radius: 5px;
}

.error-container a:hover {
background-color: #555;
}

0 replies

vivekkale109 · 2026-03-01T14:47:08Z

vivekkale109
Mar 1, 2026

To create a custom 404 page in GitHub Pages, you simply need to place a file named 404.html in the root directory of your repository (not inside a separate 404 folder). After committing and pushing it to GitHub, GitHub Pages will automatically serve this file whenever someone visits a non-existent URL on your site. No server configuration is required. Also, make sure your CSS selectors are correct (for example, use .error-container instead of error-container) so the styling works properly.

0 replies

ajm19826 · 2026-03-01T15:09:27Z

ajm19826
Mar 1, 2026

put it in the root of the repo

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

How to Create a 404 Page #188362

Uh oh!

{{title}}

Uh oh!

Replies: 4 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

GitHub Community

How to Create a 404 Page #188362

Uh oh!

EiJackGH Mar 1, 2026

Select Topic Area

Body

How to create a 404 page in GitHub Pages?

File Path:

Code:

404.html

style.css

Testing the Page

Best Practices

Replies: 4 comments

Uh oh!

SIMARSINGHRAYAT Mar 1, 2026

Uh oh!

Sabari-Vasan-SM Mar 1, 2026

Uh oh!

vivekkale109 Mar 1, 2026

Uh oh!

ajm19826 Mar 1, 2026

EiJackGH
Mar 1, 2026

SIMARSINGHRAYAT
Mar 1, 2026

Sabari-Vasan-SM
Mar 1, 2026

vivekkale109
Mar 1, 2026

ajm19826
Mar 1, 2026