Well so much for Jekyll encouraging me to blog more! But it has been a busy year since I got my site redesign up. Namely, my short film D.N.E. won BEST SCI-FI SHORT at Dragon*Con, I got my U.S. Permanent residency, and, oh yeah, I got married.

But excuses aside! Let us delve into the technical details of my moving to Jekyll. Or if you want, skip ahead!

Migrating my old Posts

Jekyll’s documentation provides two ways to migrate posts from Wordpress. The first method was unfortunately a non-starter; the blog was being hosted on a shared server instance, which severely restricted my ability to install gems.

Instead, I went with generating an export file, functionality available in any Wordpress install, and running the “wordpressdotcom” migrator. This worked for the most part … Except for a bunch of bad character encodings in the posts!

Particularly line breaks, quotations, and other common characters were coming out all wrong. So wrong that Jekyll could not even start up properly! Using various sed and PERL commands I managed to clean up most files.

Finally, as Google had already indexed my site, in order to ensure that search results did not lead to dead-links, I needed to maintain the paths of posts. This was done simply enough in the config.yml:

Stylishly Bootstrapping

Next up was laying out the site both structurally and design-wise. After many years of playing the CSS reset, redefine, and tweaking game, I was getting frustrated with having to establish on all the basic styles of a site over and over again, none of which turned out particularly well; you just have to take a look at Galacticast’s for proof.

Which is why Bootstrap to developers like me. Yes, there have been many styling frameworks that provide grid layouts and other components. But Bootstrap goes beyond by establishing a decent, pleasant style.

Now keep in mind, I didn’t avoid all the hard work. I still had to go through the “tweak” step, adding site specific styling behavior. Sometimes this was simply a matter of using the “appropriate” class to get the behavior I wanted, like declaring the <section /> containing the content of posts a hero-unit to get the larger, readable font. Hackish I know, but it works.

But some behavior required a lot of labour. Particularly, while Bootstrap provides responsive functionality, I spent a lot of time recreating the transforming navigation bar I had seen on other sites. Still, I can definitively say this would have been much harder without Bootstrap.

Responsive Video

Another responsive effect I wanted was to scale video to fill the width of the main column across any device. As many of you know, video has been a big part of my web-life, so showcasing on any platform was very important. Luckily, better people than me have already solved this problem.

I added the following to my site CSS:

Then all I have to do for any video embed is ensure it’s placed within a div tag with a video style class. Loverly.

Flying without Plugins and Databases

A big part of Wordpress' appeal was the built-in commenting and the ability to extend functionality with plugins like Jetpack. The flat-files Jekyll generates can’t actually DO anything on the server side; can’t store anything, can’t process form responses, etc. Commenting is easily provided with Disqus or Facebook; I chose the former as I didn’t want to favor any particular social network.

For my contact form I went with Simpleform which delivers exactly what its name promises. You signup with the email you want form data to be sent to, and you will receive a token which you then pass back in the action path you submit the form to. And that’s it! Any fields you place in your HTML form are captured with no further configuration. For example, here is my form:

As for other functionality like sharing plugins, and auto-formatting? Well, the other benefit of moving to Jekyll hosted on Github was that alot of that stuff became difficult, if not impossible. Which made me realize that I really didn’t need it in the first place. The goal, after all, was simplification.

Feeding the Feeds

Finally, as feeds are not automatically provided by Jekyll, I had to generate my own. Plenty of examples exist in the repos of other Jekyll based sites, including the original. Here is mine for RSS:

For Atom:

Additionally the site map for search engines:

Note in all cases the need to set layout: nil in the YAML front-matter. Otherwise, it would be wrapping them in the default layout of the site, which would produce invalid XML.

Next?

Well there you have it, some of the small tips and tricks I used in moving to Jekyll from my Wordpress install. What will I do next? I may try to re-introduce tags or categories to my posts. But in the meantime I am happy with what I have and look forward to get into the blogging groove.

TL;DR

• There are many options to migrate Wordpress data but be prepared to fix the data.

• Bootstrap provides a great foundation for responsive site design.

• Use Disqus for commenting and simpleform for contact forms.

• Remember to generate your own feeds; sample templates can be found in multiple repos or here