There were several org-mode & jekyll setups I've read. But these two were quite useful.

I also had to write some code to fix the links to images included in each blog post. But, instead of writing a bash script, I decided to just use something small, a search & replace one-liner to fix the problem in the form of a wrapper to org-html-publish-to-html .

(defun blog-html-publish-to-html (plist filename pub-dir)
  (let* ((generated-html-file  (org-html-publish-to-html plist filename pub-dir))
         (fix-cmd1 (concat "perl -p -i -e 's{src=\"org-}{src=\"/assets/org-}' "
                           generated-html-file
                           " 2>/dev/null")))
    (shell-command fix-cmd1)
    ))

In addition to this, the org-publish setup is required in order to tell org-mode where your .org files are and where the generated files should go(org-mode code blocks can generate images/data).

(setq org-publish-project-alist
      '(
        ("org-blog"    :components ("org-blog-docs" "org-blog-static"))

        ("org-blog-docs"
         :base-directory "~/myprojects/blog.source"
         :base-extension "org"
         :publishing-directory "~/myprojects/wsdookadr.github.io/_posts"
         :recursive t
         :publishing-function blog-html-publish-to-html ;; custom publish function
         :headline-levels 4
         :html-extension "html"
         :body-only t
         )

        ("org-blog-static"
         :base-directory "~/myprojects/blog.source"
         :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf"
         :publishing-directory "~/myprojects/wsdookadr.github.io/assets"
         :recursive t
         :publishing-function org-publish-attachment
         )))

Another fix was positioning the TOC(table of contents). Whenever you use Org headlines, a TOC is being created by default. That will tend to mess up the styling produced by jekyll. In order to avoid that, you can disable the TOC, and place it further down in the document like so:

#+OPTIONS: toc:nil 
...
#+TOC: headlines 2
...

Also, here's some boilerplate for one blogpost

,# -*- coding: utf-8 -*-
#+OPTIONS: ^:nil toc:nil num:nil
#+MACRO: LINK @@html:<a href="$1">$2</a>@@
#+HTML_HEAD:
#+HTML_HEAD_EXTRA:
#+BEGIN_HTML
---
layout: post
title: Out on the streets - Part 1
tags: gis postgis postgresql openstreetmap leafletjs visualization
---

The jekyll configuration file _config.yml looks like this:

title: "Blog title"
email: my@email.com
description: > # this means to ignore newlines until "baseurl:"
  Freelance job market analysis
baseurl: "" # the subpath of your site
url: "http://blog.garage-coding.com" # the base hostname & protocol for the site
twitter_username: wsdookadr
github_username:  wsdookadr
stackoverflow_profile: "users/235626/so-username"
stackoverflow_username: "so-username"

Here's a high-level overview of how this works:

org-blog-setup1.png

After writing an blog post, I need to run M-x org-publish and then get asked which project I want to publish (remember the org-publish-project-alist is describing these projects) and then I write org-blog and it's rendered in .html, which then jekyll picks up.