My blogging needs are simple, and generally always have been, and when I started it as a static blog back in the days of iWeb and .Mac, those tools were all I really needed. However, the demise of those tools led me on a merry-go-round through WordPress — self-hosted and otherwise — Tumblr, and eventually onto Blogger. All tools that are great in their own regard, but have a level of bloat and complexity that I just don’t need for a simple little blog that probably gets about 10 hits a month, if I’m lucky.

I’d been contemplating turning all of it into a static set of web pages a few months ago — an idea that began to gell considering that my email provider of choice, FastMail, offers fast and stable static web hosting that I’m basically already paying for. However, I was left not being quite sure where to start, and the idea of converting everything from Blogger over to a static layout of HTML pages was slightly daunting — not in terms of the complexity, but just in terms of the time commitment.

Realizing there must be a better solution, I did a bit of Googling (when did that word become a verb, exactly?) and discovered several solutions. Although one called “Jekyll” kept coming to the top, I was originally trying to focus more on authoring tools — GUIs tools like RapidWeaver and the like — and less on core building tools. However, as I played with a few of those, and dug more and more into what other folks were doing, Jekyll still kept coming out as the solution a lot of other smart people were going with1.

I’m no slouch when it comes to the finer points of geekery, but I also tend to want to divide my limited time these days betwen those times I want to tinker, and those times I just want to get things done as efficiently as possible. However, upon downloading Jekyll and getting the necessary bits and pieces installed, I was quite surprised at not only how well put together the entire system is, but also how simply it was to import my Blogger blog into a series of HTML pages that rendered more or less properly within the Jekyll world.

Although I’m not as hardcore about simple plain-text tools as some people are, I also recognize that there’s a time and a place for them. I use OmniFocus over Taskpaper, for instance, although the addition of TaskPaper import (and an Editorial workflow) in OmniFocus 2.14 for iOS gives me the best of two worlds — laying out complex projects and templates in a clean, plain-text TaskPaper format, and then managing them through an app that’s more effectively designed for that purpose.

I have similar ideas about writing content on a blog; creating is best done in clean, plain-text formats like Markdown, while the publishing and management is often handled better by tools that can automate the process. This is where Jekyll comes into play — it takes a series of posts, in Markdown format, laying in a _posts folder, and then uses those along with some Liquid-based templates and a Ruby generator to turn all of those into a collection of HTML output files, organized in such a way as to present themselves as a blog. All of the heavy lifting is done while the content is being generated, rather than when it’s rendered to the end user, and the result is a solution that’s ultra-fast, dependent on no server-side processing, and ultimately future proof.

Installing Jekyll was simplicity itself — I’m not new to Ruby and in fact already have several other Ruby scripts on my system, so the Jekyll gems and related code fit right into that mix. Creating a new site and importing my Blogger pages was also ridiculously simple, and from there it was just a matter of familiarizing myself with the Liquid templating language and kramdown, the special flavour of Markdown syntax used by Jekyll 3.0.2

Being a geek at heart, however, it’s more often about the process than the result, and going through and setting this all up was great fun in and of itself. Further, while my previous Blogger posts had been converted to HTML and rendered just fine in the basic Jekyll templates, I decided that wasn’t good enough, so I went thorugh and lovingly converted each of them back to a more basic Markdown syntax, pulling down any images into a localized “assets” folder in the process.

The conversion to Jekyll could have been accomplished in a couple of hours; many more were spent going through my old posts. The command-line implementation of the kramdown converter was somewhat helpful for more complicated or longer posts, as it can do the HTML-to-kramdown conversion, but in many cases there was still enough to fix that it was just far easier to rename the HTML file to MD and then pull it into BBEdit to process the text that way with some of its tools and regex search capabilities. This also allowed me to refine my Jekyll CSS files as I went along, tweaking things here and there so I could call standard classes from my kramdown syntax, rather than coding them into the templates directly. I also discovered a few places where Jekyll/Ruby plug-ins could be best utilized to accomplish certain things, such as embedding YouTube videos, generating alias permalinks, and opening offsite links in a separate tab/window.

The final result is what you basically now see here — all of the historical posts converted, pagination and post excerpts setup, and even a JavaScript-based search engine that uses the minified lunr.js to iterate through a JSON (courtesy of Jekyll Tips).

On the authoring side, I’m using Byword for Mac to handle my Markdown writing, with Marked 2 to handle live previews; thanks to its support for custom Markdown processors and CSS, it allows me to preview my posts almost exactly as they’ll appear when published in Jekyll3. Jekyll’s built-in web server also allows me to preview final results live pretty quickly on my Mac by simply pointing Safari to “localhost:4000” and when it’s time to publish, Transmit’s Sync feature gets it all up to FastMail via FTP4.

At this point, it’s still a work-in-progress, but I’ve been confident enough in it to go live with what I’ve got. I still want to tie in Disqus for comments (just for the heck of it, really — it’s not like I get that many), add a proper year-based and category-based index on the home page, and bring the search dialog box back to the home page somewhere. After that, I may look at a bit more CSS styling, but to be honest I’m quite liking the clean and simple look of the basic Jekyll theme.

  1. In fact, the solutions many other smart people had gone with years ago. I know, I’m late to the party, but what else is new? ↩

  2. I’m no stranger to Markdown, by any stretch of the imagination, but much of my usage of it has traditioanlly been basic and limited to text-based implementations. Active blogging with it required a whole new dimension of Markdown usage when it came to styling images and calling CSS classes. ↩

  3. Marked’s author, Brett Terpstra, actually wrote a great post on how this all fits together. ↩

  4. If anybody has any other suggestions on how to do this, I’d be happy to hear about them. ↩