Skip to main content

Migrating from Octopress to Jekyll

·4 mins

Simplify #

The layout and the design has changed of this blog. It got simplified. Before the change, the blog was based on Octopress, which itself is a framework for Jekyll.

I wanted less, so I got rid of Octopress and realized this blog with Jekyll only. The post that follows outlines the steps I took for migrating from Octopress to Jekyll.

Welcome Jekyll #

At first, I have set up a “blank” Jekyll blog by creating a new directory mkdir new_blog and changed into it.

Then I have created a Gemfile with the following content:

{% highlight none %} source ‘https://rubygems.org’ gem ‘jekyll’ {% endhighlight %}

With bundle install, the gem got installed.

Now I was ready to generate the blog and have a first look at it in the browser with

{% highlight none %} bundle exec jekyll new . -f bundle exec jekyll serve {% endhighlight %}

After those quick steps I was presented with that nice homepage:

Content Migration #

Time was up for migrating the content from my old blog to the new one, but first I had to fix something.

When I have clicked on the first example blog post, the URL looked like this:

{% highlight none %} http://localhost:4000/jekyll/update/2015/01/14/welcome-to-jekyll.html {% endhighlight %}

That is not what I wanted. I had to change the file _config.yml and added the line

{% highlight none %} permalink: /blog/:year/:month/:day/:title.html {% endhighlight %}

to get a URL like so:

{% highlight none %} http://localhost:4000/blog/2015/01/22/welcome-to-jekyll.html {% endhighlight %}

Better :-)

Then I went ahead and copied everything from my Octopress blog from directory /source/_posts into my Jekyll blog under /_posts.

Since I have used some Octopress specific tags, I had to change them.

In Octopress, I have formatted code examples with

{% highlight none %} {% raw %} {% codeblock %} {% endraw %} … some code … {% raw %} {% endcodeblock %} {% endraw %} {% endhighlight %}

That need to be changed to

{% highlight none %} {% raw %} {% highlight none %} {% endraw %} … some code … {% raw %} {% endhighlight %} {% endraw %} {% endhighlight %}

In order to make that work though, a gem called rouge had to be installed and the line highlighter: rouge had to be added in _config.yml.

I have also used the Octopress tag for including images, e.g. {% raw %}{% img <path_to_image> Title %}{% endraw %} and changed them to![Title] (<path_to_image).

When I was done, I previewed everything with

{% highlight none %} bundle exec jekyll serve {% endhighlight %}

Going Live on Heroku #

At that point, I had my new blog ready on my local machine. Of course, I wanted everything back on Heroku.

I have found this wonderful post that explained it all, how to setup your Jekyll blog to run on Heroku.

First add the following to _config.yml

{% highlight none %} exclude: [‘vendor’] {% endhighlight %}

Create a new file called Procfileand add

{% highlight none %} web: bundle exec jekyll build && bundle exec thin start -p$PORT -V console: echo console rake: echo rake {% endhighlight %}

Edit the Gemfile again and append the following lines

{% highlight none %} gem ‘rake’ gem ‘foreman’ gem ’thin’ gem ‘rack-contrib’ {% endhighlight %}

Another file had to be created, called config.ru with the following code

{% highlight ruby %} require ‘rack/contrib/try_static’

use Rack::TryStatic, :root => “_site”, :urls => %w[/], :try => [’.html’, ‘index.html’, ‘/index.html’]

run lambda { |env| return [404, {‘Content-Type’ => ’text/html’}, [‘Not Found’]] } {% endhighlight %}

Am not going to explain much in this blog what all this actually doing. As a pointer checkout the individual gems in the Gemfile to get a first view on things.

Then I have installed the Heroku Toolbelt and fired the following commands into my terminal window:

{% highlight none %} bundle install git init git add . git commit -m “My initial commit." heroku git:remote -a <my_heroku_blog_name> git push heroku master —force heroku open {% endhighlight %}

Et voilà, welcome to my new blog

Maybe I change back to Octopress someday. Octopress 3 just got announced with some interesting stuff and addressing some caveats from the past.

Done for today!