Some Pixels en / pt

Migrating from Wordpress to Jekyll

Jekyll

Wordpress is awesome. It's a great platform for building your blog and even more complex websites. The problem is that, for most people... it's just too much, isn't it? When you just wanna write, there is too much there to worry about.

So after some research, I've found Octopress. Octopress is a great static blog generator, based on Jekyll, with everything you need to start your own static blog. But for what I need, even Octopress is too much. So I've decided to go with Jekyll. Jekyll allows you to write your posts in Markdown files and generate your entire blog in plain HTML. No distractions, lightweight, customizable and easy to deploy.

How to migrate all posts?

I've used a nice tool called Exitwp, but nothing is that easy. I was using some plugins on my Wordpress, so I've decided to set target_format: html on the config.yaml file and used some regular expressions at body_replace to do most of the Markdown conversions. You can also set download_images: True and it will download all images for you.

Syntax highlighting

Jekyll has built in Pygments integration, the Python syntax highlighter. To use it, make sure you have Pygments installed and set pygments: true on your blog's _config.yml file. I also recommend changing the default Markdown parser to markdown: redcarpet. That way, you can use GitHub Flavored Markdown (GFM) for your code.

Theme

When you run the jekyll new awesome-blog command, Jekyll will generate a blog with the default theme. I've started by removing all CSS and migrating the blog to the HTML5 tags. Then I've included normalize.css and wrote my own CSS style. I'm not too good with design, but I tried to make it really simple and comfortable to read.

Also, Jekyll uses Liquid for templating and it makes things really easy to write your blog's interactions.

Thumbnails and Assets

I'm using the minimagick.rb plugin with custom setting MiniMagick.processor = :gm to generate my thumbnails automatically using GraphicsMagick. Just put the plugin file at the _plugins directory and configure it:

mini_magick:
  thumbnail:
    source: images
    destination: thumbs
    commands:
      - resize: "600x5000>"
      - quality: 100

I'm also using Jekyll Asset Bundler to bundle and compress all my CSS and JS. Don't forget to configure it:

asset_bundler:
  compress:
    js: yui
    css: yui
  base_path: bundles/

RSS

For the RSS Feed, just get one of the RSS templates and put on your root. Then add this to your HTML:

<link rel="alternate" type="application/rss+xml" title="Blog's Title" href="/feed.xml" />

Redirecting old posts

If you don't wanna break your old links, you can also create a .htaccess file with all your 301 (permanent) redirects. To make that task easier, I've found a nice query that will return all your Wordpress permalinks:

SELECT
    wpp.post_title,
    wpp.guid,
    wpp.post_date,
    CONCAT(wpo_su.option_value,
        REPLACE(
            REPLACE(
                REPLACE(
                    REPLACE(
                        REPLACE(wpo.option_value,'%year%',date_format(wpp.post_date,'%Y'))
                    ,'%monthnum%',date_format(wpp.post_date,'%m'))
                ,'%day%',date_format(wpp.post_date,'%d'))
            ,'%postname%',wpp.post_name )
        ,'%category%',wpc.slug )
    ) as permalink
FROM
    wp_posts wpp
    INNER JOIN wp_options wpo on wpo.option_name='permalink_structure' and wpo.blog_id=0
    INNER JOIN wp_options wpo_su on wpo_su.option_name='siteurl' and wpo_su.blog_id=wpo.blog_id
    INNER JOIN (
        select wtr.object_id ID, max(wpt.slug) slug
        from wp_term_relationships wtr
        inner join wp_term_taxonomy wtt on wtt.term_taxonomy_id=wtr.term_taxonomy_id and wtt.taxonomy='category'
        inner join wp_terms wpt on wpt.term_id=wtt.term_id
        group by  wtr.object_id
    ) wpc on wpc.ID=wpp.ID
WHERE
    wpp.post_type = 'post'
    AND wpp.post_status = 'publish'
ORDER BY
    wpp.post_date DESC

Now you can write your redirect rules:

redirect 301 /2013/11/your-post-permalink/ /new_blog/your-post-permalink

Conclusion

That's it! The only other thing that I had to do is the multi language support, but that's a little tricky. I'll have to write about it later. And don't forget to read the page about how you can deploy your blog. There are many tips on how to make the process easier!