A Web Design Community curated by Chris Coyier

404 Page on a Static Site

By: Chris Coyier on 10/29/2008

Here’s a very quick, but very useful trick. You can catch 404 errors (page not found) on a static site and serve up a custom 404 page with a one-liner in your .htaccess file:

ErrorDocument 404 /404.php

The “/404.php” part is the path to whatever file you want to serve up as the error page.

In other words…

Remember that the .htaccess file works onApache servers only. I say “static” sites, because if you are using a CMS system already (like WordPress), there is already a system in place for catching 404 errors and this is unnecessary.

12 Responses

  1. Rick Nunn says:

    Nice little trick. I’m only just realising how handy the .htaccess file can be.

  2. frujo says:

    Simple, but yet nice technique.

  3. kyle steed says:

    sweet. went ahead and updated mine. thanks.

  4. Michael says:

    I still need to do mine. One of those simple things that dramatically improve the user experience.

    This is still the best one I’ve seen: http://www.orangecoat.com/blah

  5. @Michael: Ha! That’s awesome. I love me a good flow chart.

  6. Farid Hadi says:

    I’ve seen some pretty neat 404 pages.
    Sadly a lot of developers, including myself, tend to ignore creating a custom 404 page.

  7. Mike Summers says:

    One thing to watch out for though… keep it small!

    I had a test oscommerce area on one of my sites for a while and then removed it. However, various bots had indexed it and now continue to search for each of the missing pages all day long. Each request results in a 404 error. If the 404 page is excessive, that could add up to an awful lot of unneccessary bandwidth.

  8. Tony says:

    Is incredible how a cool presentation can change a very basic post in an interesting article… I already know and use this old trick but now I spend longs minutes to realize that, searching for something else blinded by that cools screenshots :)

  9. Fabian says:

    In wordpress you can also easily customize your 404 page by customizing the 404.php file in your theme. :)

    This one is funny too: http://www.lileks.com/404

  10. 404 says:

    When I use
    ErrorDocument 404 http://example.com/404.php
    non-existing files report to be succesfully found.
    This does not occur if the 404 URL is relative, but that’s no option in my case because my 404 is on another domain. Also if it’s on the same domain all relative links on the 404 page are broken.

  11. Thanks for your tip ,

This comment thread is closed. If you have important information to share, you can always contact me.

* This website may or may not contain any actual CSS or Tricks.