Free website hosting on JSM-Hosting

JSM-Hosting
Customize 404 error page

 Technical info for free website hosting  
Sorry, we have stopped accepting new applications.

 

When a user clicks on a dead link or types in an erroneous URL on your website, the server opens a rather ugly error page displaying "404 - Not found". You may want to create a nicer one, custom made for your website, such as the one we've created for this website.

Here are the instructions to create it for your website hosted on JSM-Hosting.com (or on any other server using cPanel).

Create a custom 404 error page

  1. First method
    1. Using your website editor, prepare the page that you want to implement as your custom 404 error page, making sure that it contains only absolute links (such as <a href="/mydirectory/subdirectory/filename.htm"> - NOT relative links such as <a href=".../subdirectory/filename.htm"> or <a href="subdirectory/filename.htm">).
    2. Save it as "404.shtm" in your root directory.
    3. Upload it - you're done!
       
      However, the server may at first refuse to upload your "404.shtm" file.
      In which case you have to use your cPanel (configuration panel):
       
    4. Open your cPanel (see instructions here).
    5. In the "Advanced" section (at the bottom), click on "Error Pages".
    6. On the "Edit Common Error Codes" tab, click on "404 (not found)".
    7. Copy in it the code of your custom 404 error page that you prepared above.
    8. Click on "Save". You're done!
       
      Note that if you make subsequent changes to your "404.shtm" page, the server will then accept that you upload it with your website editor.
       
  2. Second method

It must be noted that the server will open your "404.shtm" page from whichever directory the erroneous URL was typed. This is why it must only contain absolute links.

If you need to use a page containing relative links (such as DreamWeaver pages using a template), you will simply have to redirect your "404.shtm" page to your custom 404 error page.

To do so:

  1. Prepare the page that you want to implement as your custom 404 error page (it may contain relative links).
  2. Save it as "404-error.htm" in your root directory (or any other name in any directory) and upload it.
  3. Get in your cPanel and open the "404 (not found)" page (see 1.4 to 1.6 above).
  4. Simply copy the following code in it:
    <SCRIPT LANGUAGE="JavaScript">
    document.location.href="/404-error.htm"
    </SCRIPT>
    (This assumes that your custom error page is indeed located in your root directory and named "404-error.htm").
  5. Click on "Save". You're done!

Note that with some browser (such as IE 10), the "BACK" arrow will not let you go back to previous page when using this method. Therefore I recommend adding the following code line in your custom "404-error.htm" page (as I did):
 <p align="center"><a href="javascript:window.history.go(-2)">Return to previous page</a></p>

  1. Testing

Finally, test that your custom 404 error page appears as you wish by typing an unvalid filename on your browser (for instance "http://www.yourdomain.ext/invalid-filename" AS WELL AS "http://www.yourdomain.ext/valid-directory/invalid-filename" to ensure that all links are OK if you have used the first method).
 

JSM-Hosting wishes you a nice day!

  Contact
Last update on 22-jan-19
Top