Site Logo

Pixel-in-Gene

Exploring Frontend Development with Design / Graphics / Technology

Switching to the Octopress Blogging Engine

wordpress to octopress

I have been using Wordpress for few years now and have been very happy with its features. In the past year, I have tried several times to change the theme on my blog and also semantify my posts by using Markdown as my de facto style. Of course, none of it happened and I was still using a combination of HTML and Rich Text Editor for formatting my posts.The more I delayed, the more I realized that there were a lot more reasons to NOT like Wordpress:

  • I wanted to use Markdown to write all my posts and Wordpress forced me to use HTML. I could certainly use some plugins to upload a markdown file which would then convert it into html, but that meant I had to store these markdown files in the wordpress database: less than optimal.
  • Code formatting was not an easy task. I used Live Writer as my primary blog editor and it had a few plugins that can give you inline code highlighting. Although you get real time view of your syntax highlighted code, it internally converted everything to HTML and discarded the original code snippet. Also you had to be careful about editing around that code snippet as a simple delete in the wrong place would require redoing the whole process. I felt it was too much work just to get some code highlighting.
  • The Backup and local testing scenario was involving. For backup, I could either export all my posts in WXR format or take a dump of my database. To re-create my blog locally meant getting an installation of MAMP and then importing the WXR or the database backup. I would have preferred a less intrusive approach to try out my wordpress site locally.
  • The wordpress technology stack was not very exciting for me. I never really enjoyed PHP and learnt it only to maintain my Wordpress site.

Exploring beyond Wordpress

I had seen a few bloggers use GitHub as their blogging engine with the Jekyll framework to auto-generate their HTML pages from their markdown posts. This was very inviting except for the fact that I had to store all my posts publicly on Github. Even if I purchased a private plan from Github, the storage allocated was quite minimal. GitHub for me was definitely not cost effective.

About this time, I saw a tweet from Matt Gemmell where he migrated from Wordpress to a different engine called Octopress. After reading his blog entry, I realized this was exactly the kind of framework I wanted. Matt has lot more content than I do and seeing him convert his blog successfully gave me the courage to do the same. Thus began an almost 10 day journey to convert my Wordpress blog to an Octopress blog!

octopress logo

There are many things to like about Octopress:

  • Write all my posts in Markdown
  • Default theme is very beautiful with rich support for styling via Compass/SASS
  • Modifying the theme is simple as its based on Jekyll. If you haven’t explored Jekyll yet, I strongly encourage to give it a try.
  • Writing plugins is also quite simple and uses the Liquid templating system
  • My entire blog is contained within a folder from which I can generate the HTML
  • Uploading is taken care with a rake task to deploy (Did I mention Octopress uses Ruby!)
  • I can preview my site locally with a simple rake preview command that starts up a local web server. It monitors changes to my blog and auto generates the html. This is great for composing posts and testing on the fly.
  • Excellent integration with social features like Google+, Twitter, Disqus, etc.
  • The Octopress tagline says its “the blogging framework for hackers” :-)

Migrating Wordpress posts

This was the most elaborate part of the process. Octopress requires that you do write all your posts in Markdown or Textile, however my Wordpress posts were all plain html. So I needed some converter that would do this transformation for me. Luckily on Matt’s blog I read about the exitWP plugin that takes care of this conversion. Although not seamless, exitWP did give me a good starting ground since it converts all the posts to a Jekyll-compliant site.

I did have to go in and change several of my posts that used code snippets. I had been using a variety of code prettifiers over the years and the corresponding HTML was not the best for a Markdown conversion. It did mess up lot of my posts and I spent several hours touching up the Markdown text.

I also got the chance to fix some of my old Urls that were still pointing to my old blog on Live Spaces. I also decided to make all my internal blog links relative and this required a combination of grep/awk and some manual intervention to fix up all the links. Overall it was a fun exercise experimenting with some bash shell commands and a mix of some ruby scripting.

Migrating Wordpress comments to Disqus

disqus logo

Octopress has excellent integration with Disqus, a hosted comment management system. Disqus works by linking all the comments to a specific Url. As long as your posts maintain the same Url you can just use Disqus to import all of your comments into your octopress blog. In my case, my comments were all on Wordpress and I had to first import them into Disqus. As it turns out, this wasn’t a straightforward process.

I started by exporting my comments from Wordpress in the standard WXR Xml format. When I tried to import this file into Disqus, it choked by complaining that the <link> tags were missing. The <link> tag contains the url that links the post to the comments. To fix that I wrote some simple ruby code to update the WXR with the proper <link> tags. Now trying the import again inside Disqus went through without issues and all my comment threads got pulled in. The threads however were using the raw wordpress url (http://blog.pixelingene.com/?p=123) and I wanted to use a more semantic url of the form http://blog.pixelingene.com/year/month/the-post-slug. To fix this I created a simple Url map (CSV) and used the Disqus Url Mapping Tool to fix these links.

Finally with all that done, my comments were safe and sound inside Disqus, with the right permalink-Urls. Now the next part was to link them up with my blog. Luckily this is as simple as specifying a disqus_short_name in the Octopress config file!

Url Rewrites and other changes

Now that I had chosen to use a semantic permalink to my posts, I also had to make sure my existing links to the posts continued working. This was a matter to having some redirects set up on my website. I used the standard Apache directives (RewriteCond, RewriteRule) in my .htaccess to permanently redirect all of my old urls.

A few other things I had to do include:

  • 404 page
  • Plugins (Liquid Tags) to embed Silverlight apps and Youtube videos
  • Change the feed Url from the default /atom.xml to my FeedBurner url

The one thing I havent’ done yet is modify the theme from the default. I’ll probably get to it one of these days.

Epilogue

So that’s my experience with the Wordpress to Octopress migration. Although not a smooth transition, it wasn’t terribly bad and I actually enjoyed the process using a variety of tools. I have tried my best to make sure that all existing wordpress links, images, download links, demos, etc. continue working, but there is always that infinitesimal probability of missing something. If something does break, I’ll find out in one way or other. Until then “enjoy the new blog!”

Switching to the Octopress Blogging Engine
Pavan Podila
Pavan Podila
September 12th, 2011