Setting Up Custom 404 Error Page

What does HTTP 404 mean?

The HTTP 404, 404 Not Found, 404, 404 Error, Page Not Found or File Not Found error message is a Hypertext Transfer Protocol standard response code, in computer network communications, to indicate that the browser was able to communicate with a given server, but the server could not find what was requested.

---

The Default 404 error pages are not good looking and don't have any type of navigations

Following are some methods you can use to auto-redirect to a custom error page.

• Website Running on Apache webserver

1. Create a custom webpage for 404 error and name it 404.html

2. Create a file name .htaccess

File content: ErrorDocument {error_code} {custom file path}

ErrorDocument 404 /404.html 

OR

ErrorDocument 404 https://yourwebsite.com/404.html 

Now the site will redirect to 404.html whenever the user gets a 404 HTTP response or browse the wrong URL path on your website.

Here are some hosting services that run on Apache webserver

Hostinger	Heroku	GoDaddy
Netlify	BlueHost	1&1
Cloudways	SiteGround	HostGator

---

• Website Hosted on Vercel.com

1. Create a custom webpage for 404 error and name it 404.html

2. Create a file name vercel.json

File content:

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "status": 404, "dest": "/404.html" }
  ]
}

Read more at official docs: https://vercel.com/guides/custom-404-page

---

• Website hosted on Github Page

  The simplest so far

1. Create a custom webpage for 404 error and name it 404.html

2. Add this file to your repository

3. Done

---

• Website running on Heroku

For a PHP app hosted on Heroku follow the same method as of Apache Server

OR

1. Create a custom webpage for 404 error and name it 404.html

2. Run this command on Heroku CLI
   

heroku config:set \ 
ERROR_PAGE_URL=//yourwebsite.com/public/404.html

Read more at official docs: https://devcenter.heroku.com/articles/error-pages

---

Note: Make sure the 404.html is present in your root directory with index.html

Video Tutorial [Apache Server] : https://www.youtube.com/watch?v=QkB5ZxeYaJQ&t

Social Links

Instagram | Youtube | Twitter | Codepen

ThankYou