Rebuilding the Binary Moon Website

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.

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.

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.

WordPress News

The latest WordPress updates from the WPBriefs Podcast.

Related Posts

23 Mar 2017

New Adventures in Jekyll

I use WordPress a lot, but a couple of weeks ago I decided to rebuild one of my older sites with Jekyll (a static site editor) so that I could host it on Github pages. As I have explained before...
13 Jul 2016

Why My WordPress Themes Site Doesn’t Use WordPress

I’ve mentioned it before but I run a WordPress themes site called Pro Theme Design. On it, I sell premium WordPress themes – but I don’t use WordPress to power the site.This probably seems like a strange thing to do...
26 Aug 2016

My WordPress Wishlist

WordPress 4.6 has recently been released, and now plans are being made for WordPress 4.7. At the start of each new version the WordPress team ask for ideas and suggestions for areas people would like them to focus on. This...
28 Aug 2009

Binary Moon WordPress design vIII

As I briefly mentioned on Monday, I have finally redesigned Binary Moon.I actually started redesigning about 2 years ago. Initially it was going to be an update rather than a totally new look, and I even built most of it,...
01 Apr 2015

The State of WordPress Themes #wcldn

I recently spoke on a panel at WordCamp London 2015e. Lance – who used to be the Theme Team lead at WordPress.com – asked me if I wanted to speak on a panel with him at WordCamp London 2015. I’ve...
14 May 2013

Redesigning the WordPress Post Editor

Ghost is a project born from frustration with WordPress. Ironically it seems to be mostly WordPress power users who want to use it. The Ghost team – led by John O’Nolan – put Ghost on KickStarter last week and it...