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 wa…


This content originally appeared on DEV Community and was authored by Krutik Raut

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


This content originally appeared on DEV Community and was authored by Krutik Raut


Print Share Comment Cite Upload Translate Updates
APA

Krutik Raut | Sciencx (2021-07-17T11:50:59+00:00) Setting Up Custom 404 Error Page. Retrieved from https://www.scien.cx/2021/07/17/setting-up-custom-404-error-page/

MLA
" » Setting Up Custom 404 Error Page." Krutik Raut | Sciencx - Saturday July 17, 2021, https://www.scien.cx/2021/07/17/setting-up-custom-404-error-page/
HARVARD
Krutik Raut | Sciencx Saturday July 17, 2021 » Setting Up Custom 404 Error Page., viewed ,<https://www.scien.cx/2021/07/17/setting-up-custom-404-error-page/>
VANCOUVER
Krutik Raut | Sciencx - » Setting Up Custom 404 Error Page. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/17/setting-up-custom-404-error-page/
CHICAGO
" » Setting Up Custom 404 Error Page." Krutik Raut | Sciencx - Accessed . https://www.scien.cx/2021/07/17/setting-up-custom-404-error-page/
IEEE
" » Setting Up Custom 404 Error Page." Krutik Raut | Sciencx [Online]. Available: https://www.scien.cx/2021/07/17/setting-up-custom-404-error-page/. [Accessed: ]
rf:citation
» Setting Up Custom 404 Error Page | Krutik Raut | Sciencx | https://www.scien.cx/2021/07/17/setting-up-custom-404-error-page/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts