This is the third blog post in the
Out-of-the-Box: Step-by-Step series.
This blog series uses the
Lektor static CMS
"out-of-the-box" (without any plugins) to build a demo website in a series of steps.
Each subsequent step will show a step-by-step increase in functionality.
Step 2 is discussed in the
Lektor Out-of-the-Box Step 2 - An HTML Sitemap for Your Site
Step 3 builds on that, so if you haven't already read that post, now might be a good time to do so.
This step adds a custom 404 error page to the website.
Then it (optionally) adds a
site search box to the custom 404 error page.
Demo site with a 404 Page
is hosted on GitHub Pages.
The instructions and output below are Windows-specific.
However, since Lektor is cross-platform, they should be similar on Linux or macOS.
Why You Should Add a Custom 404 Error Page to Your Site
Noone likes receiving a "404 Error" message, or being told that "The requested URL ... was not found on this server."
Regularly validating your site's links with the
W3C Link Checker
can help minimize how often your users see something like this.
Checking the Checker's "Check linked documents recursively" checkbox causes it to check all of the links on your entire site.
And checking "Summary only" prevents it from listing all of the links it's checked.
Instead, it will list only the links which failed its checks in some way.
But even if all of your internal links are correct, if you ever move or delete a page (without redirecting it), any external links to that page will give others a "404 Error".
The same will happen if someone accidentally links to, or accidentally types, the wrong URL for your page.
That's why your site needs
a custom 404 page.
What Should Your Custom 404 Error Page Include?
When looking to add a new feature to this Website, I've found it helpful to see if others have done something similar using
In addition to the many built-with-Lektor Websites featured in the
I came across the
blog site of Animesh Bulusu
its source code on GitLab.io.
I noticed a couple of things about his
custom 404 error page
that I wanted to include on my site.