This post originated from an RSS feed registered with Java Buzz by Andrej Koelewijn. Original Post: Moving from Wordpress to Jekyll Feed Title: Andrej Koelewijn Feed URL: http://feeds.feedburner.com/AndrejKoelewijn Feed Description: On Oracle, Java and OpenSource Latest Java Buzz Posts Latest Java Buzz Posts by Andrej Koelewijn Latest Posts From Andrej Koelewijn

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.

Work in progress

Useful links:

• How To: WordPress to Jekyll
• Migrating from Wordpress to Jekyll - Part 2: Everything you need to know about Jekyll
• Getting Started with Jekyll
• Jekyll blog on Amazon S3 and CloudFront
• Rsyncing Jekyll

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

Using a javascript based codehightlighter: [google code prettify].

$(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

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

CDNJS

Upload to Dreamhost

rsync --progress --compress --recursive --checksum --delete _site/ user@host.tld:public_html/

Caching with CloudFlare

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

Performance result on webpagetest

Upload to s3

s3cmd sync --dry-run --skip-existing --delete-removed ~/Dropbox/weblog-andrej/site-src/_site/ s3://www.andrejkoelewijn.com

kramdown