How to Set Up a Custom 404 Page With Hugo

Published: 2024-04-28 | Updated: 2024-05-16
Posts Enable a Site in Nginx Docker Disk Maintenance One-Command PiHole Update Boilerplate Nginx Config File Certbot TLS with Nginx Domain Validation Challenges with Certbot List In-Use Docker Ports Hugo Static vs Assets Folders Hugo Docker Development Environment Golang Slugify Function Hugo Remove List Duplicates Loop Variable Captured by Func Literal Golang Friendly Date Converter Hugo Install on MacOS One-Liner to Update PiHole Page Folder Name Google Tags to Hugo Site Debounced Scroll-To-Top Button Hugo Custom 404 Page Reboot or Power Down Ubuntu System Apache Cheatsheet Ubuntu Apache Global Servername Customize Hugo Page Type Hugo Most Recent Posts Hugo Most Recently Updated Posts Digital Certificates with Certbot Site Content Best Practices Ubuntu Certbot Install Sample Apache vhost.conf

The problem

When I built this site using Hugo I didn’t give much thought to putting up a custom 404/Not Found error page. But after all the excitement of launching a new thing died down I discovered my site was snowing very ugly Apache error page when a 404/Not Found error occurred.

Here’s how I set up a custom 404/NotFound page for this site.

The Solution

First, create a 404.html page in your layouts folder. I simply copied my home.html - an easy choice because most, if not all 404 pages I’ve run accross link back to Home anyway. So why not?

Second and last, I needed to reconfigure and reload Apache.

Done. Navigate to some non-existent URI on your site and behold the glory of your custom 404.html

Custom Page Hugo NotFound 404