Moving to Jekyll

5-minute read
Jekyll • CMS • Admin

Listening to Brett Terpstra’s podcast Systematic, I found out about the static website generator Jekyll. After hearing and reading about it for a while I startet wanting to try it for my own website.

There are some great tutorials out there that describe the basic setup of a new Jekyll website, like Jekyll From Scratch by Mike Greiling, so I don’t want to talk about that. What I want to talk about, though, are the bits and pieces that these tutorials were missing for my very own situation. There might be some more people with a similar setup. There were three major questions I still had after reading the different tutorials:

  • How do I migrate my old posts?
  • How do I reflect password-protected pages?
  • How do I make the website handle old links?
  • How do I handle stats? I somehow don’t want to use Google Analytics.

My website up until today was a self-hosted WordPress at blog.flohei.de. flohei.de would automatically redirect to the subdomain and not hold any information itself. I was using pages and posts for my content. A few pages were kinda hidden and password protected. I was watching the site stats using the built-in Jetpack module. I was the only author.

Import

Jekyll comes with importers for different other blogging systems. The importer for self hosted WordPress instances did not work for me so I tried using the one for WordPress.com sites. That one uses an WordPress export file that your backend can provide.1

ruby -rubygems -e 'require "jekyll-import"; 
JekyllImport::Importers::WordpressDotCom.run({ "source" => 
"/Users/flohei/Downloads/wordpress.xml" })'

Cleanup

After that import I got a bunch of HTML files for all those old posts and pages.

First things first: As always, when moving my blog, I revisit my old posts and remove/archive the most embarrassing ones as they’re probably to no good use for anybody. I think that’s only fair to all the internet people.

All the remaining posts were then manually converted from HTML to markdown. That took some time but it also gave me the chance to fix some typos and adapt some of the old links.

Most of the important pages were just recreated in markdown since they’re not that many. I got rid of the old ones as well.

Password protected pages

Unfortunately, I did not yet find a way to migrate my password protected pages. I’ll let you know once I find a way. If you have an idea feel free to drop me a line.

Update 2014-11-12: I wrote a post about a htaccess based apporach.

Keeping the links up was one of my main goals. The problem was devidable into two sub-problems.

In WordPress I used /YYYY/mm/title for my permalinks. Setting the same format in _config.yml was easy. The corresponding line looks like this:

permalink: /:year/:month/:title/

This would keep all the old links up once I replace the WordPress site with the Jekyll data at blog.flohei.de.

Re-routing Requests

I had the idea to take the migration a step further and drop the blog subdomain in favor for the cleaner flohei.de itself. I remembered, that there was an option for the .htaccess file to re-route requests by preserving everything behind the TLD. A quick question on StackOverflow brought up the solution:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^blog\.(flohei\.de)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [L,R=301,NE]

This works like a charm.2

Feed-Fowarding

Update 2014-07-06: Turns out, the original approach did not work. I wrote an extra post about how to fix it here. Hint: It works using the .htaccess file.

Stats

As I said, I somehow did not want to use Google Analytics. So I remembered that Daniel used Piwik for a few web projects in the past. I don’t care too much about my stats so I’m not that familiar with all the features these tools have but from what I can tell Piwik looks a lot more useful than Jetpack and a lot less cluttered than Google Analytics.

The setup was as easy as downloading the package to the server, unzipping it in a special subdomain, creating a database and following the on-screen instructions.

Other Plugins

To make life a bit easier I installed a few plugins into my Jekyll site.

YouTube

This YouTube plugin adds a new tag that allows me to add a YouTube video to a post using just this single line {% youtube youtubeid %}, where youtubeid is the id that you would find in the URL for any video.

Flickr

The Flickr plugin works pretty much the same. It does have some options to manipulate the size of your photo. It also requires you to create an app on the Flickr developer page to acquire a API scecret and a API key. Once you got those just add them to your script and use it with these few charactes3:

{% flickr_image 12543944883 b %}

DuckDuckGo

Now that I’m trying something new I figured why not give DuckDuckGo a shot. I’m using this script in my header.html. I’m not sure yet if I will keep it this way. I might change this to Google or an internal solution later.

Todos

There are still some bullet-points on my list left to figure out. I might want to adapt the style a bit (though I kinda like this clean and simple layout), I might want to include the old tags and categories somewhere on the site and I might want to add the comments back. I migrated them to Disqus before leaving WordPress so I still have them. But I’m not too sure if I need them anyway.

Other Resources

Hope this helps.

  1. The other importer did not work for me since my provider Uberspace does not allow connecting to the database from another machine. ↩︎

  2. For more information on .htaccess files see the full documentation over on the Apache website: http://httpd.apache.org/docs/current/rewrite/intro.html. ↩︎

  3. For the Flickr and the YouTube plugins I created TextExpander snippets that allow me to even faster add those to new posts. ↩︎