Introduction to Jekyll
For as long as I have written up my more worthwhile/esoteric thoughts on this blog, I have sought a much less painful way to do so. I always found Wordpress slow and clunky, with little recourse for adding in a nice photo gallery when the occasion called for it. More recently, I found an inability to wrest creative control from its restrictive interface hampering my efforts to complete a blog post within the 6 months I had given myself.
Ultimately, a tweet spurred my imagination to think beyond the world of Wordpress:
Every Xmas break, I plan to overhaul my personal website and start with New Year with something I can be proud of. I’d like to actually do it this year. Anyone else want to join in? Maybe we can start a group to cheer each other on. We have two-ish weeks. Personal websites FTW!— Jen Simmons (@jensimmons) December 20, 2017
Two short days later with Jekyll, I am sure I will never look back.
Features I Need
In a blogging platform, I need/demand:
- Performance (Wordpress is terribly slow)
- Attractive code snippets, with highlighting support (I could never find a good plugin for wordpress)
- A simple but pleasant aesthetic
- Image gallery support
- Maintaining current link scheme
- Bonus: inline video
In all a not insurmountable list, but each of these seemed more of a stumbling block than opportunity.
How I Got Exactly What I Wanted
Image Gallery Support
I found Olivier Pieters’s image gallery to work quite well! There are two parts to it:
- A generating script creates the galleries and a YML file which details the photos to be shown in the gallery, and
- The page generating material, in the above Github repository.
I made some modifications to the generating script, mainly to sort photos in descending filename, which happens to implement reverse chronological order — my preference. Those changes are available in a forked Gist on my Github. To create the galleries, it’s worthwhile following along Olivier’s blog post, and keeping in mind that you should run
gallery_creator.py, then regenerate your Jekyll site.
If you’d like to see the gallery in action, check out my mural post.
Jekyll already comes with an agreeable aesthetic, for mine. Instead of complex design elements and many buttons, I prefer minimalism, allowing the content to be the centrepiece.
One area that can fall down, particularly on sites that discuss data as often as I do, is on tables. Luckily, it’s very easy to implement DataTables, which can spruce up any ol’ group of data. It’s easiest to follow along this guide, and you’ll have nice-looking tables in no time!
An example of my implementation is available on my crash statistics redux post
I’m a firm believer in the permanence of URLs, so was keen to ensure that old links to my posts were maintained. Fortunately, the migration tool I used imported
wordpress_id, so this was a value available to a smart parser, such as Jekyll.
I came across Jekyll-alias-generator, which will generate redirecting pages based on values of
alias. I altered this to use the value provided by
wordpress_id: this modified plugin is available on my Github site
Not a huge priority, but considering I had a demo screencast on one of my Editorial posts, I was hopeful to transfer it across too. Less than 5 minutes of googling later, I came across jekyll-youtube-embed, which I managed to convert into a general-purpose video plugin. It’s also available on my Github website as a gist.
All the while, I managed to score the following features without any additional effort:
- Performance — static files get my site up to the top percentile of site speed in Australia
- Attractive code snippets — even the default theme makes markdown files render nicely
- Security — last year I got used as a mail relay for spam, because I got lax with permissions
All up, Jekyll’s a very easy and delightful platform to move over to. I no longer feel a pang of dread when I think of topic for a new blog entry, and it’s very easy to get started, and keep going. I hope these resources encourage you to give Jekyll a try, too.