Athena's blog

Version 2.1 & Jekyll

Athena Lilith Martin

Published on

If you're seeing this post, that means I've rolled out Programmingwave.com 2.1, based on Jekyll.

I decided recently that maintaining the site as a set of raw HTML files was too difficult. After considering the options, I went with Jekyll, a static site generator with support for Markdown and Liquid-based templating.

I am not the first person to convert a more complex, harder to maintain site to Jekyll. It was, however, an interesting experience for me.

As many others before me, I began by installing Jekyll on my local machine and creating a new blank site. I then extracted the common components of all pages on the site and converted them to a Jekyll layout (_layouts/main.html).

I then copy-pasted most of the site's content into .md files, and converted them from HTML to Markdown. It only took a couple of hours to convert all of the 'normal' content.

Once I was done converting my 'normal' content (essentially static pages that don't use a submenu), I moved the navbar from _layouts/main.html to an include (_includes/navbar.html), and added some Liquid code to handle current-page highlighting and submenus. Submenus now worked.

At this point, everything except /gallery/ and blog.programmingwave.com worked on my local machine (jekyll serve is incredibly helpful). I converted the SQL-based PHP for /gallery/ to Jekyll datafile-based Liquid, and copied the content.

Only one challenge remained: this blog. You might think that this would be the hardest part, but Jekyll is actually built to support blogging, so it was a matter of creating a layout for blog posts (_layouts/blog.html, which actually 'inherits' from _layouts/main.html) and writing a bit of Liquid to display posts on the /blog/ page.

Converting the blog content was an easy job; I just copy-pasted the post contents from the Wordpress site into .md files, fixed some formatting, and added Jekyll YAML metadata.

Note: I did not migrate the entire Wordpress blog; you can still see some of the history that used to be there at the About page.

You may notice from looking at the source of the current pages that the indentation is completely screwed up, and that there are lots of seemingly random blank lines. This is a consequence of two things: Jekyll's blind include and layout content mechanisms (which simply inject the text without regard for indentation), and Liquid control tags leaving blank lines for no apparent reason.

All in all, 2.1 was a fairly easy move, taking me only a couple days, and making it far easier to develop the site (I no longer had to copy-paste everything if I changed common code). If you have a complex site that you'd like to simplify, I'd recommend Jekyll. I may release my 'framework' (common site-agnostic components) on GitLab sometime in the near future.

Changelog for version 2.1

  • Switched to Jekyll and used templating.
  • Removed Wordpress and switched to Jekyll for blogging as well.
  • Blog moved to /blog/, from blog.programmingwave.com.

Tagged: