Hugo's Fastest Theme Gets a New 404 Page

2 minute read Published:

The Devil is in the detail. About the After Dark 404 page redesign.

As mentioned in Initial Commit, Hack Cabin is powered by the open source After Dark theme for Hugo. When I originally created the theme in , the 404 page contained an MP4 throwback video paying homage to a certain popular screensaver introduced by Berkeley Systems for the Macintosh in 1989.

The video, and the After Dark theme name, were inspired by a website with an interactive After Dark simulator. And though unlikely either of us will ever be sued by Berkeley Systems, I’ve decided to retire the original video, and replace it with a new animated 404 page.

The new After Dark 404 page. Click for live demo.
The new After Dark 404 page. Click for live demo.

Here is a quick rundown of improvements the new page brings:

  • Approximately 98% smaller than the original 404 page
  • Dramatically improved mobile browser experience
  • Improved user experience for desktop and terminal browsers
  • Analytics Tracking with Google Analytics
  • In After Dark fashion, a full page load with 1 HTTP request
  • And some processor intensive JavaScript sure to heat up your device

The new 404 page was inspired by an all-nighter geeking out over CSS keyframe and JS animations on CodePen, and coded in about an hour before dawn.

I’ve left a link to the unminified source code, and a crumb trail leading to the inspiration, in the After Dark source code for you to dig up. Enjoy.