I have recently rebuilt the Binary Moon website. It’s been something I’ve been thinking about for a while, and a recent issue with my web host pushed me to finally make a start. In this post, I’ll share some of the changes I made and how they’ve improved the site.
Jekyll
The biggest change I made was swapping from WordPress to Jekyll. While I still like WordPress as a platform, I don’t enjoy building for it as I once did. I think the move to Gutenberg is great for users, but I don’t enjoy it as a developer. With Jekyll, I feel excited to create again.
Plus, now that all of my content is in Markdown format, it’s much easier to edit everything entirely in a text editor which is something that really appeals to me.
ElementalCSS
To build the site, I used my own CSS framework called ElementalCSS. It’s a simple CSS library inspired by TailwindCSS but more opinionated and much smaller. The best part about using ElementalCSS is that you can use it without any build process!
This library is already being used on my sites Brush Ninja and WPBriefs - now Binary Moon has joined as well! There are only 30 lines of custom CSS; everything else uses ElementalCSS.
One day I will finish the ElementalCSS website and make it all public. For now, you can find it on Github.
Markdown
Since the site is now powered by Jekyll, I had to convert all of the content to markdown format. To do this, I started with the WordPress Jekyll exporter and then used several scripts that made sure everything worked correctly.
These scripts were written in PHP and did various things like correcting heading hierarchy, fixing image urls, simplifying categories, finding low-quality content and more.
Custom Post Colours
I’ve long wanted to have something like this with WordPress but it was always a bit awkward to setup and now it’s finally possible. I can now set custom properties for each page or post; this includes the background colour, foreground colour, link colour and font. With these controls I can make some really different looking pages with minimal effort.
This is largely possible because of my switch to ElementalCSS and the minimal (some might say brutal) design I have chosen.
Related Posts
I wanted to have related posts on the site, but I couldn’t find a good Jekyll plugin so decided to make my own system. Having used PHP scripts for other tasks I thought I could use them here too.
In simple terms, I used PHP to generate keywords for each blog post, and then used the Jaccard Similarity calculation to work out content similarity. I then save the data in the post front matter so it can be generated on each page. Sounds complicated but I used AI to work out how to do this (the Jaccard bit in particular). I also created a PHP script that I run before publishing the site that keeps the related posts up-to-date each time I add new content.
Search
Since Jekyll generates HTML, there’s no database. So, instead of relying on a traditional search method, I decided to use the keywords I generated for the related posts’ along with post titles to create a content index. This is then searched through using the fuse.js fuzzy search library. Everything goes onto its own page, and uses autocomplete to make a fast effective search system that works on a static site.
Contact Captcha
Finally, I implemented a contact page that is anti-spam. I spent quite a bit of time working out a good way to do this, but think I managed to make something that is fun, unique, and hopefully will stop spam. I use Formspree for the actual contact form, but the captcha challenge was all mine!
Hosting on Firehost and Cloudflare
As I mentioned at the start - I had a problem with my host, and so I wanted to move to something more modern. I’m actually using a VPS that is costing me over $125 a month, which is too much for what I use. But I need to move everything over to a new server before I can downgrade (or cancel).
So, I decided to use Firehost and Cloudflare. With this combination I can get very fast free hosting for a static site. Using Firehost (a component of Firebase) I can host static content easily, and deploy using their commandline controls. So I don’t have to worry about setting up a server, or even a build process. I just run firebase deploy and everything is done for me. Firebase also has staging servers, and versioning so I can easily test, and rollback if there are problems.
I actually use this combination for Brush ninja as well, and it’s working great - and for free! I’ll probably end up paying for them at some stage, but I’m going to enjoy using them for free while I can.
I’m really pleased with how the website has come together and look forward to updating it more frequently now that everything is much simpler! By switching over to Jekyll from WordPress and using my own tools (like ElementalCSS), everything feels more streamlined - and I feel more in control. I’m excited for this new chapter in the Binary Moon website.
Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).
Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.