Converting a Wordpress blog to Jekyll and Twitter Bootstrap
This is how I converted my long neglected blog from a Wordpress using some random theme to one powered by Jeykll using Twitter Bootstrap.
Tools you’ll need (and I assume you have installed)
gem install jekyll jekyll-import compass
- Install Grunt, bower, Yeoman and the Yeoman Jekyll generator if you don’t already have them.
npm install -g grunt-cli npm install -g grunt npm install -g bower npm install -g yo npm install -g generator-jekyllrb
- Bootstrap your jekyll site with yeoman
mkdir your-site-name cd your-site-name yo jekyllrb
Follow the prompts to configure your website as you see fit.
This process assumes you use the Compass sass compiler, the Redcarpet markdown compiler and use the default Jekyll site template.
If you’re using a git based deployment (i.e. Github Pages or Heroku) you may be interested in enabling grunt-build-control.
Name the xml file
wordpress.xml and place it in the
app directory created in step 3.
- Import wordpress backup with jekyll
From the same directory as in step 4 run:
ruby -rubygems -e 'require "jekyll-import"; JekyllImport::Importers::WordpressDotCom.run()'
This will place a markdown file for each wordpress post in your
Re-format HTML to Markdown.
Unfortunately Jekyll-import does not convert the HTML from your wordpress website into Markdown. I wrote a simple nodejs module to help convert the HTML posts to Markdown.
npm install -g jekyll-html-md
appdirectory of your jekyll website created in step 3, run the following command.
With any luck it will convert your HTML posts to Markdown, leaving a backup of the HTML files in
_posts_html. You can delete this directory when you’re satisified the conversion was successful. If it breaks, hit me up on Twitter @edave
Ensure your URLs are the same as before.
If after migrating your blog will have the same URL (i.e. it’s not a Wordress.com blog) you will want to ensure the URLs to your posts remain the same. For me that was just a matter of removing the
:categories portion from the
permalink config setting in
_config.yml. This will depend on which URL format you used in Wordpress.
My final config looks like:
- Copy over any images
If you uploaded any images to your wordpress blog, you’ll need to copy them over.
For this I simply copied all of the files located in
wp-content/uploads to the
img directory in the
app directory. I then did a bulk replace on any absolute paths in my posts to match this new location.
- Install Twitter Bootstrap using bower
bower install sass-bootstrap --save
To import Bootstrap into your css, add the following line to the top of
main.scss in the
- The dev loop
The yeoman jekyll generator comes with a decent dev loop. To work on your website, from the root of the directoy you created in step 3, run the following command.
This will run a small web server locally on port 8000 and open it in your browser automatically. When a change is detected the site will be regenerated and the website will be refreshed.
- Get hacking
Do whatever it takes to get your website looking great!
- Publishing your website
To publish your website you’ll need to
Subsequently you can use
grunt deploy if you chose to set up grunt-build-control.
Personally I use grunt-rsync.
Please let me know on Twitter @edave if a step doesn’t work. I no doubt missed something.