Moving from Wordpress to Jekyll (and a new design)

February 09, 2011 • Tagged: linux

Over the last few months, I got really tired of the old design and terrible performance of this site. A redesign was clearly in order. We use Jekyll at Nutshell, and I’ve started to like it, so I figured I’d try using it for this site.

I had decided a long time ago that the next iteration of this site would focus on my activity across various social networks, since that’s where most of my online activity is. (I rarely blog.) I created a clean, new design with a social-network-focused home page and lightweight content pages. To all the designers reading this: any critique is welcomed!

The site is now nearly done. I have some content updates to complete, and eventually I might clean up some of the CSS (it’s a mess right now), but I’m content with this site as it is now.

I figured I would share some useful things in the hope that I help someone else deploy a Jekyll-based site on Dreamhost. I assume basic familiarity with Jekyll and Liquid templating; I just cover some of the trickier points here. I’ll also refer you to my delicious boookmarks about Jekyll for a lot of useful info.

I’ll update this post over the next week or so as I remember important stuff (I really should have started writing this two weeks ago when I started redoing the site).

Importing from Wordpress

To get my posts from Wordpress to Jekyll, I had to export from Wordpress to an XML file. I initially tried importing from MySQL using the importer included with Jekyll, but I couldn’t get the importer to run on my (Windows) machine. (I blame that mainly on my unfamiliarity with Ruby, etc.)

I then used the Ruby script from this Gist to convert from the XML into post files (with Textile markup). They required some manual cleanup, but it wasn’t too bad.

For comments, I simply installed the Disqus Wordpress plugin and let it import all my comments. I knew I’d be keeping the post URLs the same, and this is how Disqus identifies posts on your Jekyll-based site. You will run into horrible issues if you try to change your post URLs. To keep the URLs the same, you’ll need to add a line to your _config.yml with something that matches your current permalink structure:

permalink: /blog/:year/:month/:title.html

Generating a Sitemap

Generating a sitemap was easy thanks to the generate_sitemap plugin from recursive design. Remember to edit the plugin to use your own domain!

I did, however, find that Jekyll wouldn’t run the plugin unless you run Jekyll from the site source directory.

Deploying on DreamHost

I wanted something like Github Pages, where I could checkout my site’s source from anywhere and the site would be regenerated whenever I push to the source repo. This works really well for me since I do a lot of work from my desktop, netbook, and the computers in UMich’s libraries.

First, you’ll need to get Jekyll installed on your Dreamhost account. This requires a newer version of gem than is installed by default (as of Feb 8, 2011). This isn’t too difficult; these instructions on the Dreamhost wiki should get you started.

I needed to add my gems bin directory to my path in order to run Jekyll. After installing everything, the relevant part of my .bashrc looks like this:

export PATH="$HOME/local/bin:$HOME/local/gems/bin:$PATH"
export LD_LIBRARY_PATH="$HOME/local/lib"

export GEM_HOME="$HOME/local/gems"
export GEM_PATH="$GEM_HOME:/usr/lib/ruby/gems/1.8"
export RUBYLIB="$HOME/local/lib:$RUBYLIB"

export PYTHONPATH="$HOME/local/lib/python:/usr/lib/python2.5"

(I install everything to ~/local instead of just ~ to keep my home directory cleaner; I don’t need to see bin, lib, etc. all the time.

You should make sure that you modify the path in .bashrc and .bash_profile so that these changes take effect for both interactive and non-interactive shells. I usually do this by making all my changes in .bashrc and including something like this in .bash_profile:

if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

You can follow these instructions from Tate Johnson to set up the git hook for deployment. Note that you’ll want to use Python 2.5 for Pygments (not 2.3 as indicated) and the latest version of Pygments.

I made two important changes to the generation script from Tate:

Change to the temporary clone directory before generating. I found that jekyll won’t execute plugins unless you’re running it from the site source directory.
Add $RANDOM to the temporary clone directory name to reduce the chances of a naming conflict.

Here’s the updated generation script:

#!/bin/bash

GIT_REPO=$HOME/site.src/chris.dzombak.name.git
TMP_GIT_CLONE=$HOME/temp/chris.dzombak.name.$RANDOM/
PUBLIC_WWW=$HOME/web/chris.dzombak.name/

git clone $GIT_REPO $TMP_GIT_CLONE

pushd $TMP_GIT_CLONE
jekyll $PUBLIC_WWW
popd

rm -Rf $TMP_GIT_CLONE

exit

High Performance with Jekyll

Thanks to Jekyll, I have achieved my goal of a high-performance site. This graph shows the time (in milliseconds) it took Google to download pages from the site for indexing:

Time spent downloading a page (in milliseconds)

The precipitous drop at the end of January is when I made the switch from Wordpress to Jekyll.

Comments Welcomed

Any comments/questions are welcomed.

I know I wanted to write about more than is included in this post, but at the moment I can’t remember what else I wanted to include. I’ll update this post over the next week or so as I think of additional topics to cover.