Search code examples
htmlwebhttp-status-code-404http-errorfile-not-found

How do I make a custom 'File not found(404, 500)[http error code]'for my website


I have seen some websites have their own File not found pages with their logos.

I want such a page for my website.

Please tell me how to make a such type of page that shows the user if the file is not found.


Solution

  • First of all you need an HTML or PHP file to show when the 404 is occurs. Let's do a simple HTML file like this:

    <h2> 404 Not Found! </h2>
    <pre> Seems like the resource you're looking for is not found </pre>
    

    Let's call this file 404.html.

    Now you have to configure your webserver to redirect the not found request to your new HTML document.

    If you're using Apache:

    You can do it in different ways, the most common and recommended would be using .htaccess file, which allows you to override Apache configuration of a virtual host. However, to be able to use the .htaccess file in your virtual hosts you need to add allowOverride all inside your apache configuration.

    Example of apache config:

    <Directory /path/to/your/project>
        Options FollowSymLinks
        AllowOverride All # This is the needed option
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
    

    So now you're able to put a .htaccess file in your project, so just create it and put this inside:

    ErrorDocument 404 /path/to/404.html/document
    

    In case you're using Nginx:

    You must add the error page inside the nginx configuration. Follow this guide in order to achieve it:

    https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-to-use-custom-error-pages-on-ubuntu-14-04