I rebuilt Hermitclock with Wagtail & Django

Introduction

Last year, I launched a website called Hermitclock, dedicated to sharing the local times of the active Hermitcraft members. If you’re unfamiliar with Hermitcraft, it’s a Minecraft survival, multiplayer server full of content creators. Hermitclock was built using Laravel, a popular PHP-based full-stack framework for website development. Since then, I have put a lot of work into making Hermitclock a better platform by improving upon the design, functionality, and overall performance. It feels a little strange to then say that I’ve almost entirely rebuilt the website using Django with Wagtail. Let’s dive into why.

The Issues With Laravel

To be clear, these aren’t generic issues that live within Laravel. These are issues with the Laravel version of Hermitclock.

• No true content management system.
• No image optimisation.
• Limited caching due to server-side rendering.
• Overcomplicated feature implementations.

Here’s some context for the above points:

I’d originally built Hermitclock as a weekend-long project with the intention of it being a one-and-done piece of work. It was only after it received high praise from the community surrounding Hermitcraft that I decided it would be worth expanding upon the idea. This meant that I was adding features to a system that wasn’t designed to be expanded, even with Laravel’s naturally modular structure.

A great feature of Laravel is Livewire. Livewire allows you to build components that can be interacted with on a single page, similar to React, but using the server via requests to change the page content, instead of doing it client-side via JavaScript (Like HTMX). I leaned into using Livewire as a time-saving measure during development, but this introduced a big problem with page caching: Pages would look different for some users based on their filter selections. This meant that I couldn’t cache pages statically using Cloudflare’s free tier, as this doesn’t include granular configuration for the cache keys. For this to work, I’d have needed to set a different cache to generate based on cookie values.

From the influx of suggestions and my excitement from the strong reception, I was adding features without considering them fully. Dynamically grouping Hermits on the homepage, a widget for comparing time differences, and a contact form for feedback. None of these were bad features, but I don’t think they add value to the platform and its purpose. My new mentality is that a product should focus on doing one thing well.

Why Django & Wagtail?

Since January, I’ve worked full-time as a Django and Wagtail developer. This means I’ve spent 37 hours a week for over 4 months straight doing nothing but building a complicated, singular product with Django and Wagtail. This has made me incredibly comfortable and confident with the frameworks, and they’re now my first choice for building websites. Spending so long away from Laravel and seeing the shiny features of Django made me demotivated to maintain Hermitclock as a Laravel project.

Beyond preference, Wagtail solves some of the bigger issues plaguing the old setup: A proper CMS with great image optimisations built in. Previously, the images for each Hermit’s skins were all in a storage bucket and required a specific naming convention to be accessed correctly. They would also display on the page as their original size and file type. It wasn’t pretty. However, I can now edit each Hermit’s images, content, and event preview the final result, all live from within Wagtail.

Sizing the images on the front-end is as simple as using Wagtail’s image system:

{% image hermit.icon fill-8x8 format-webp-lossless class="size-12 pixelated" %}

The above code outputs the Hermit’s icon (their Minecraft skin’s face) onto the page at just 8×8 pixels. This is the actual size of the face texture’s resolution. It outputs the image as a lossless (uncompressed) Webp file, and adds some classes to apply to the HTML image tag. The beauty of this is that I can upload a face at a slightly incorrect resolution, say, 32×32, and it’ll get converted to this size automatically. The same goes for the file type, I can upload a PNG and Wagtail will do its magic under the hood and deliver an optimised format of my choosing without me having to lift a finger.

One feature I wanted to keep, even if it is tangential to the purpose of Hermitclock, is the recent YouTube uploads. Rewriting the script for periodically importing the recent uploads from the YouTube API isn’t ideal, but fortunately, Python is great for writing some quick, functional scripts. In just an hour, I had a custom Django CLI command written to import all uploads and store them in the database.

Changes Which Aren’t Django Or Wagtail-Specific

Outside of the backend power provided by Django and Wagtail, I rewrote the JavaScript powering the clocks to ensure that they do all of their magic client-side. This means that the pages are now fully cached, making it a lot harder for the website to be crashed by a heavy influx of traffic.

For asset management, I’m now utilising Vite. I have a love-hate relationship with Vite. I love the power of Vite when it works, but I hate setting it up, as it seems like there’s always something new that I manage to break. Thankfully, it’s all done now. Thanks to a better-considered asset system, the overall size of each page on Hermitclock has gone down massively.

The Future For Hermitclock

If you’ve made it this far, you might be thinking that I’ve put in a lot of work just to make Hermitclock less functional. Honestly, you’re not wrong. But here’s the benefit: It’s now very easy for me to improve upon where I see fit. Moving forward, I’m going to carefully consider all feature implementations. Hermitclock will remain a minimal system: it serves one purpose, and it should do that very well above all else.

That being said, some ideas are floating around in my head, such as using the data already contained within the database to list out a feed of recent uploads for the Hermits. Making and documenting a public API might also be good for supporting other community projects where people might want access to the information collected within Hermitclock.

If you are following Hermitclock’s development, or have never heard of it before and yet took the time to read this article, then thank you.