header image troyscott.ca - powered by jigsaw

Migrating a Blog to Jekyll

by Troy Scott


A few months ago i migrated my troyscott.ca WordPress blog to Jekyll which allows you "transform your plain text into static websites and blogs".   If your read through the documentation you can quickly see the Jekyll does require some technical skill to implement. However, from and IT perspective it could save you a lot of time and money in the the long run. For those that don't mind a little bit of "hacking" to get their site up and running, it can also be rewarding creating your site from scratch.

Learning how to use Jekyll doesn't take long and the jekyll.com documentation is thorough and easier to understand. But Jekyll is not an end to end solution to blogging like WordPress and Blogger. If you just want to maintain a personal blog and not care about the technical details the Jekyll is not for your.

The first challenge when migrating your site or blog to Jekyll is migrating the content from your current platform to Jekyll. Jekyll does provide migrating tools for exporting your content from sites like WordPress. This tool will export all of your html files and assets. If your want to Jekyll you need to ask yourself is it worth the effort to migrate my old content. If your blog posts are mostly simple text and a few links to external site the migration will not be difficult. However, if your blog posts contain multiple images per post (more than a couple) the effort can be significant. When i used WordPress, over time I used different blog editors:

  • Windows Live Writer
  • Microsoft Word
  • WordPress Online Editor

Each one of these editors produced different HTML. If a blog post had layout or display issues after migrating the site to Jekyll it was time consuming trying to fix the issue. Here are some tips for migrating content:

  • Only migrate content that has value
  • Leverage frameworks like bootstrap to simplify the new layout
  • Use a script or even find/replace to clean up web markup
  • Use Jekyll Includes to automate and simplify your layout

The last suggestion, Jekyll Includes, can save you a lot of time. I created a thumbnail.html include to automate the formatting of the sites images:

{% gist 8641162 %}

When you add an image to a post in WordPress it would create 2 images. The main image (image1.png) and a thumbnail (image1-thumb.png). I wanted a simple way to create a thumbnail with a link to the main image.

Once you migrated your blog to Jekyll you need to determine how to deploy your site. But that is a subject for another post.