Smart Tech for a better Web

Jekyll powered

von

Around christmas I couldn't stop thinking about moving away from WordPress. I already suffered from a hacker attack because I didn't update like I should. But I couldn't migrate that quickly actually: there were too many things to consider. The past weeks I had more time than usual and finally migrated everything.

Why I migrated to Jekyll

WordPress is nice, but its pretty slow compared to static HTML files. There are some caching solutions which help, but nothing beats static HTML.

In addition I didn't like the way I had to work on the templates. In the past years I created my own template which I felt was never complete or optimized for speed. There was a lot of WordPress related things. In my vision I wanted a template which was very easy to modify and which I could easily (!) create from scratch. In WordPress you can extend existing templates today. This is helpful when you need to get started quickly. But this is simply too much for me. I don't want dependencies for my template. And I don't want thousands of lines of CSS which are loaded but never used. Finally the effort to make a WordPress 100% perfect and neat was too much for this blog.

Jekyll Jekyll allows me to put everything in Git and with Bitbucket I can host that privately for free. Website broken? No problem, just do a fresh checkout to a new host and do some DNS magic. Now my posts are versioned and - in theory - I could make the Git repository public and even accept pull requests. This is something I consider for the future.

Jekyll supports Markdown. If you need some more power, you can simply add some HTML to your post. I have my editor and can simply write, without switching between a rendered view and a "plain text" view. Clearly for me editing inside a real Editor is much easier than in a web interface.

Finally I can run a testing version on a different subdomain or locally. Sure, I can do the same with WordPress. But WordPress doesn't allow to transfer posts between instances. You need to login to the "live instance" and copy and paste your full article. If you have images, you need to reupload.

Now I could create a cronjob which runs git pull on the master branch. I preferred to have a simple bash script:

rsync -avz _site/* $host:/home/$myuser/grobmeier.de

This syncs the Jekyll build to my remote host. No big deal.

Things to consider when migrating from WordPress

My migration was not as easy as expected. There are importers available for WordPress. It actually worked to a certain degree: all my posts were put into the right directory.

The devil is in the details.

First I had to make sure the url format does match the old format. This was easy, but then I found out that Disqus which I used for comments was not showing up correctly.

The problem was the Disqus plugin for WordPress creates a Disqus ID for each blog post. I had to put this ID into my Jekyll meta information. If I want to see my comments even in local test, I need to add my domain too.

So I extended my Disqus JS code with that:

var disqus_url = 'http://www.grobmeier.de/{{page.url}}';
var disqus_identifier = '{{page.dsq-id}}';

Fortunately you can export your Disqus IDs from the Disqus web interface. Unfortunately it was not a trivial job to put the ID into all pages meta data. After trying out a few things I finally decided to make this manually. No fun for around 150 posts.

Another problem hit me: most of the posts were in HTML, but I prefer markdown. So I was running Pandoc on the files. Unfortunately it broke my already existing meta data.

I did the following: I made temporary files without meta data, did the pandoc transformation and re-added the original meta data with a shell script. Unfortunately I have deleted the script, otherwise I have included it here. Stack Overflow was a great resource for this problem. I did the job with "sed".

The transformation was not always successful. In many cases it broke my source code. WordPress uses not only the <code> tag. I have had a code highlighting plugin which had it's custom tags... everything made by this tags was broken. It meant a lot of my posts needed manual conversion because I couldn't find a proper fix.

This is a part of a script which transforms some code to the jekyll equivalent.

FILES=_posts/en/*
for f in $FILES
do
  echo "Processing $f"

  sed -i -e 's/\[xml\]/\
  {% highlight xml %}\
  /g' $f

  sed -i -e 's/\[\/xml\]/\
  {% endhighlight %}\
  /g' $f
done
rm _posts/en/*.md-e

Next step was to search Jekyll plugins for RSS and youtube embeds (all linked from the Jekyll documentation).

Another big issue was multiple language support. I have some pages in german and plan to translate a few posts. By default all posts go into a "posts" array which is then iterated on my "all blogs" list.

I wrote a plugin which created two new arrays, one for each language. It looks like that:

site.data['en'] = Array.new
site.data['de'] = Array.new

site.posts.each do |p|
    if (p.data['language'] == "en")
      site.data['en'].unshift(p)
    else
      site.data['de'].unshift(p)
    end
end

Then, I could iterate through the english posts only:

<ul>
  {% for post in category[1] %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

Things which I don't like

So far I have seen one issue which really bugs me: Jekyll is not able to render Liquid tags or variables properly. For the moment I had to disable code highlighting, wrap it with a plain old pre tags and use html entities.

Also Jekyll usually provides a small web-server for live generation of content. This is useful when you edit a post and want to see how it looks without to regenerate the whole site. However the watch flag isn't working for me and I have to restart the server to see changes.

I will also miss a plugin for which sent a Tweet when a new post was published. Since the Plugin was broken recently I am not really sad about the loss.

Conclusion

In the end it was a lot of work but I am glad it is done. It gave ma the chance to look through old posts. In the end I deleted 50 posts which were really crappy. That was something I really wanted to do for quite a while.

Tags: #Jekyll #WordPress

Newsletter

ABMELDEN

BLOG-POST TEILEN

When you load these comments, you'll be connected to Disqus. Privacy Statement.