Moving from Wordpress to Jekyll

<< Remote debuggen van mobiele applicaties

January 3, 2013

Moving from Wordpress to Jekyll

Work in progress

I’m a slow mover here, far behind the hype-curve, but this blog is currently being moved to jekyll. The following are some notes and links from this process.

Reasons to migrate:

Cheaper hosting - this blog is currently hosted on DreamHost. By migrating to a static site using Jekyll, cheaper options become available, for example Amazon S3 or Github.
Learn something new -10 years ago this blog started on Moveable Type, which also generated static html pages. In 10 years we’ve gone from full dynamic back to static, mostely thanks to javascript. The dynamic parts in many pages can be generated using javascript and external APIs. I wanted to see how well this works using Jekyll and S3.
Security - Wordpress blogs are a frequent target of attacks, my weblog has been hacked once so far. A static website should be a lot more secure. I’m also trying Cloudflare as an extra defence mechanism.
Speed - A static website should be a bit faster than a dynamically generated wordpress site. Also interested to see if Cloudflare speeds up things.
Readability - it’s time for a cleaner design, i do most of my reader on a tablet these days. I want to create a better reading experience on tablets by removing all the sidebars, etc.

Some usefull links i’ve found:

converting wordpress posts

This is where is spent most of my time. There are automatic conversion scripts, but i still need to do a bit of manual work on every post to create nice markdown formatted posts.

The following gedit external tool script helps converting html posts to markdown posts:

#!/bin/sh
sed 's/\r//g' | \
  sed 's/\[sourcecode.*\]/<pre><code>/g' | \
  sed 's/\[\/sourcecode\]/<\/pre><\/code>/g' | \
  sed 's/\[code.*\]/<pre><code>/g' | \
  sed 's/\[\/code\]/<\/pre><\/code>/g' | \
  sed 's/^$/<div\/>/g' | \
  pandoc -f html -t markdown --reference-links --indented-code-classes=code

Some manual changes:

Replace image links.
Modify embed tags used to include svg images. Now using image tags.

The result is much cleaner post text.

syntax highlighting

You can do code highlighting when generating the static pages using one of the markdown engines. I’ve chosen to implement it client side, leaving the generated html as clean as possible.

[Google code prettify] will determine the correct programming language so you don’t have to specify it yourself. The following javascript lines enable prettify on all pre tags:

$(document).ready(function(){
    $("pre").addClass("prettyprint");
    prettyPrint();
});

Images

Automatic conversion of image links in html to markdown didn’t work as well as i hoped. The following was created for html links showing a thumbnail image and linking to a fullsize image:

[![][]][]
[![][]]: http://www.andrejkoelewijn.com/wp/wp-content/uploads/2010/03/Screenshot-1.png

I manually replaced these with the following:

[![screenshot alt text][screenshot thumbnail]][screenshot]
[screenshot]: http://www.andrejkoelewijn.com/blog/images/2010/03/Screenshot-1.png
[screenshot thumbnail]: http://www.andrejkoelewijn.com/blog/images/2010/03/Screenshot-1-320x240.png

Comments

Disqus

Keep url the same comments:true Add disqus javascript to post template

Objects

Svg animations using objects - replaced by img tag, link to html page with object Problems with html generation using kramdown

Search

Google Custom Search Engine

Socialite.js

Urls

url in wordpress everything is path, no resource:

http://www.andrejkoelewijn.com/wp/2010/03/05/jee-cdi-tip-target-unreachable-identifier-resolved-to-null/

Default in jekyll, ends with html page:

http://www.andrejkoelewijn.com/blog/2013/01/03/moving-from-wordpress-to-jekyll.html

This can be configured in _config.yml

permalink:   pretty

Javascript

Javascript libraries are used from CDNJS

Upload to Dreamhost

For now this weblog is still hosted on Dreamhost, i’ll look into S3 when the migration to Jekyll has been completed.

Deployment is done using rsync:

rsync --progress --compress --recursive --checksum --delete _site/ [email protected]:public_html/

Caching with CloudFlare

Cloudflare CDN to cache all content Pagerule to host html pages: www.andrejkoelewijn.com/wp/20////

Performance result on webpagetest

Upload to s3

To deploy to Amazon S3 the following s3cmd line can be used:

s3cmd sync --dry-run --skip-existing --delete-removed ~/Dropbox/weblog-andrej/site-src/_site/ s3://<bucket name>

Andrej Koelewijn