Kev's Avatar Kev Quirk

Goodbye WordPress, I've Switched To Jekyll

After lots of thought and consideration, I have decided to leave my trusty WordPress site behind and switch to a Jekyll based static site.

Why switch to Jekyll?

There are a number of reasons as to why I’ve decided to make the switch from WordPress to Jekyll. This isn’t something I’ve taken lightly, dear reader.

I realised that I was spending an inordinate amount of time pissing about with the design of my blog instead of actually writing. The design was fun and cool, but I couldn’t help but constantly tweak little things here and there.

Add to this the fact that PHP8 is coming soon, which potentially brings a whole host of incompatibility problems with it, I just couldn’t be bothered with the upkeep anymore. I need to get back to writing.

The WordPress site was also becoming expensive for what it was. The site cost around £30/month to run, which was split between hosting fees and the cost of a number of premium WordPress plugins.

For this new Jekyll site, hosting is provided by Netlify and there are no premium plugins that I have needed to buy - everything has been hand coded by little old me.

Deciding to go with Jekyll

First I considered yet another redesign of the WordPress blog to something really minimal so I’m not tempted to mess about with it. But I realised that I’m tempted to tweak things every time I log into the WordPress dashboard to write a post.

I’m a sucker for fiddling with settings, so the WordPress dashboard is like an irresistible sparkly thing that I can’t ignore. By choosing Jekyll (or any SSG for that matter), there is no dashboard to play with. That is unless I chose to use something like Netlify CMS, which I didn’t.

I had a long hard think and started to consider whether a static site with a minimal theme may be a viable option. Jekyll is the static site generator (SSG) I know the most about, so I decided to start there.

The requirements

From the outset I decided that if I’m going to take the time to completely rebuild my site with Jekyll, it needed to have the same front-end features as the WordPress site. That’s a fairly long list; and honestly, I wasn’t sure I could do it all. After some consideration, this was the minimum viable feature list I came up with:

Whoo! That’s a lot to expect from a static site, considering I’m fairly new to all this. But my tenacity paid off and I managed to complete the list above, albeit with some caveats.

Ability to search posts

WordPress does search really well right out of the box. That’s because WordPress uses a database to store all the page and post content, so it’s trivial to search that data.

However, static sites like Jekyll don’t have any of that tomfoolery, so implementing a search engine within the site was going to be difficult. There is the simple search plugin for Jekyll, but I didn’t want to make the site any more complicated than it needed to be at this point.

I decided to ditch the idea of having an embedded search engine and simply went with a HTML form that searches this site on DuckDuckGO instead. Here’s what the HTML looks like:

<form method="get" action="https://duckduckgo.com/?q=" target="_blank">
	<input type="hidden" name="sites" value="kevq.uk" />
	<label for="search" class="visuallyhidden">Search this site on DuckDuckGo</label>
	<input type="text" name="q" id="search" placeholder="Search kevq.uk on DuckDuckGo" class="search"><br>
	<input type="submit" name="submit" value="Search" id="submit"/>
</form>

I was then able to use Jekyll’s liquid system to embed that form anywhere on my site, like this:


Honestly, it’s a bit of hack, but it’s one less thing for me to manage while I find my feet with all this static site stuff. In the future I might go with the plugin option, but for now this does the job just fine.

A category system

With search done, the next thing I turned my attention to was a categorisation system for my posts. Again, WordPress does this really well out of the box, but so does Jekyll. If I want to add a post to the blogging and web categories, all I have to so is add the following to the frontmatter on my posts:

---
category: [Blogging, Web]
---

That’s literally it! I now have my posts categorised. But I still needed to integrate this into my theme so visitors could see which categories a post belongs to. I also wanted to have these categories hyperlinked so people can click to see all the other posts in that category.

Once again this was made simple with the use of liquid filters. To display the categories as links on my blog page, I use the following code:


{% for category in categories %}
	<span class="post-meta"><a href="{{site.baseurl}}/categories/#{{category|slugize}}">{{category}}</a></span>
	{% unless forloop.last %}&nbsp;{% endunless %}
{% endfor %}

I then have the following liquid filter on the categories page that sorts all the posts automagically:


<h2 class="category-head">🏷️ {{ category_name }}</h2>
    <a name="{{ category_name | slugize }}"></a>
    {% for post in site.categories[category_name] %}
        <article class="archive-item">
          <p><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a><br>
          <span class="post-meta">📅 {{ post.date | date_to_string }}</span></p>
        </article>
   {% endfor %}

RSS all the things

Now, I love RSS feeds so having a rich RSS experience was extremely important to me. I cover more than just tech on this site, so wanted to ensure that people who are interested in fishkeeping for example, can subscribe to just my Fishkeeping posts.

This is where the Jekyll Feed plugin came in. By default the theme automatically creates a feed of all your posts, but adding support for categories is really easy. All I needed to do was add the following to my _config.yml file:

# RSS feeds
feed:
  posts_limit: 20
  categories:
    - Blogging
    - De-Googling
    - Fishkeeping
    - Newsletter
    - Notes
    - Opinion
    - Privacy
    - Security
    - Technology
    - Web

The RSS plugin then goes away, does its thing and generates all the feeds I needed. Job done. If you want to discover all my feeds, check this page out.

If you subscribe to my RSS feeds, you will have seen a load of old content be displayed as new content (20 posts to be exact). That's due to the migration, as it's a new feed and the old one redirects. Sorry about that.

Separate blog posts and notes

I added a notes page quite some time ago, and I really like the distinction between long-form posts, like this, and shorter thoughts/notes. They’re very different things, so I think it’s important to make the distinction.

I already had categories setup and working. So the easiest thing to do here was to filter out the Notes category from my main post feed and display that on a separate page. Once again liquid had my back here.

To filter out the Notes category I added a simple if filter:


{% for post in site.posts %}
  {% if post.category != "Notes" %}
    [...markup for displaying posts...]
  {% endif %}
{% endfor %}

Then, to display only my notes on the notes page I added the following liquid filter:


{% for post in site.posts %}
  {% if post.category contains "Notes" %}
    [...markup for displaying notes...]
  {% endif %}
{% endfor %}

Newsletter sign-ups

🚨 Shameless plug alert! 🚨 Before we get into this one, did you know I have a newsletter? If not, why not go sign up now? :-)

Many third party newsletter companies offer sign up forms that you can integrate into your site. However, I don’t use a third party hosted tool. Instead, I self-host a Sendy instance so I can ensure your privacy.

On WordPress I had a plugin that managed all that for me. Sendy isn’t all that widely known though, so there’s no plugin available for Jekyll to my knowledge.

Not a problem - integration is just a HTML form away. I also found that Sendy offer a form template in their admin dashboard, so I took that template and made into a sign up form.

Like my search form, I used the _includes method built in to Jekyll to display a sign up form below all my posts. I also made a mini form that I can add wherever I want, like this:


Guestbook

Ok then, the guestbook. This is where things became difficult as I wasn’t sure how I was going to manage this. As I said earlier, Jekyll doesn’t have a database that I can store dynamic data in, like comments. So I decided not to broach that and went with a different solution instead.

I decided to simply clone my old WordPress site, strip everything out apart from the Guestbook and re-code the theme so it looks pretty much identical as this new Jekyll site. The result is an almost seamless experience that I’m really happy with.

Guestbook Screenshot

Little JavaScript

When I started The 512KB Club I did an audit of my site and noticed that it was using 50KB of JavaScript. Now, I’m not one of those people who are adverse to JavaScript, but I personally feel like it should be used to enhance the user experience. Things should not break if you disable JavaScript.

After some testing on my WordPress site, I learned that the mobile menu broke when JavaScript was disabled. Nothing else was affected though, so 50KB of JavaScript for a mobile menu is excessive in my opinion. That’s when I made the decision to do away with as much JS as possible.

I’m happy to say that I was able to completely remove JavaScript from this site, with one exception - analytics.

A lot of people hate analytics, and for good reason too. Google Analytics is a disgusting mess of privacy violations and tracking. I’m not using Google Analytics though. I’m using Goatcounter, which is a privacy respecting alternative to Google Analytics. They don’t even store visitor IP addresses (you can read their privacy policy here).

Goatcounter dashboard

I have analytics because I find it useful to know what’s popular and what isn’t; it’s a yardstick as to what people like reading here. I may remove analytics completely at some point, which will mean this site will then be 100% JavaScript free.

Excellent performance

Having an optimised site is important to me, so even with WordPress things loaded pretty darn quick. Websites that are multiple megabytes in size are par for the course these days, and I was able to optimise WordPress down to roughly 280KB, which is pretty slim.

But that’s still fairly large for a blog which, by its very nature, is mostly text. This site is now just 38KB - that’s an 86% reduction in size, and it was easy to do too!

What’s more, the site hasn’t lost any functionality either, which is really cool.

This new Jekyll site scores pretty highly on Google’s Lighthouse metrics):

Performance Accessibility Best Practices SEO
99 96 93 100

Minimal & unique design

I don’t think there’s much to say here. As you can see from the site, things are pretty minimal. One challenge I did have was deciding how best to implement a menu. They can be tricky because of the various screen sizes we have these days.

Do I go with a full width jobby that shrinks down to a hamburger menu? Shall I just go with hamburger for life? Maybe a separate page with a button, like I used to have?

I decided to go with something completely different - a sausage menu. It’s the exact same menu on all screens which scrolls horizontally. Super simple and really easy to manage.

Conclusion

Switching from WordPress to Jekyll has been a lot of work - especially migrating all my posts. But it’s been fun. I’ve now come out the other end with a good looking, content focussed and performant site that hopefully I won’t spend too much time pissing about with.

I’m really happy with the result. There are still a few things I need to tweak here and there, but generally I’m happy. What do you think of the redesign? Hopefully it’s my last one for a while!


📰 Cool people get newsletters!

Do you want all your friends to look up to you and think “I wanna be like them!” If so, you need my newsletter! To find out more click here.

Warning: Reading my newsletter will not make you any cooler and is likely to significantly reduce your intelligence. May contain nuts 🥜.


💬 Looking for comments?

I don't have comments on this site as they're difficult to manage and take up too much time. I'd rather concentrate on producing content than managing comments.

Instead of leaving a comment, you could 📝 sign my guestbook or ✉️ contact me instead.