On Programming

A discussion of programming strategies and results

Introducing Octopress Blogging for Org-Mode

| Comments

On an earlier post I described a method for exporting Emacs Org-Mode to Octopress. The main feature that simply exporting to HTML lacked was syntax highlighting. The method from my old post sadly was unreliable so I went back to the drawing boards and now I have a far better solution.

First you will need to set up Octopress Following their instructions. I find that after cloning their repository and entering it I have to run these commands: 

1
2
3
4
5
6
7
8
9

  #!/bin/sh
  #
  curl -L https://get.rvm.io | bash -s stable --ruby
  source ~/.rvm/scripts/rvm
  rvm install 1.9.2
  rvm rubygems latest
  gem install bundler
  bundle install
  rake install
Like last time, we need a save-then-publish function in our .emacs
Save Then Publish source 
1
2
3
4
5

  (defun save-then-publish ()
    (interactive)
    (save-buffer)
    (org-save-all-org-buffers)
    (org-publish-current-project))
And we also need to set up our projects. I personally store my octopress blog in ~/git/blog/ but if you store your blog elsewhere you will need to change paths.
Publish Projects source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

  (setq org-publish-project-alist
        '(("blog-org" .  (:base-directory "~/git/blog/source/org_posts/"
                                          :base-extension "org"
                                          :publishing-directory "~/git/blog/source/_posts/"
                                          :sub-superscript ""
                                          :recursive t
                                          :publishing-function org-publish-org-to-octopress
                                          :headline-levels 4
                                          :html-extension "markdown"
                                          :octopress-extension "markdown"
                                          :body-only t))
          ("blog-extra" . (:base-directory "~/git/blog/source/org_posts/"
                                           :publishing-directory "~/git/blog/source/"
                                           :base-extension "css\\|pdf\\|png\\|jpg\\|gif\\|svg"
                                           :publishing-function org-publish-attachment
                                           :recursive t
                                           :author nil
                                           ))
          ("blog" . (:components ("blog-org" "blog-extra")))
          ))
Now we need to edit the Rakefile in the blog. Find your Misc Configs section and change new_post_ext, new_page_ext, and add org_posts_dir like I have below:
Rakefile source 
1
2
3
4
5
6
7
8
9
10
11
12
13

  ## -- Misc Configs -- ##

  public_dir      = "public"    # compiled site directory
  source_dir      = "source"    # source file directory
  blog_index_dir  = 'source'    # directory for your blog's index page (if you put your index in source/blog/index.html, set this to 'source/blog')
  deploy_dir      = "_deploy"   # deploy directory (for Github pages deployment)
  stash_dir       = "_stash"    # directory to stash posts for speedy generation
  posts_dir       = "_posts"    # directory for blog files
  org_posts_dir   = "org_posts"
  themes_dir      = ".themes"   # directory for blog files
  new_post_ext    = "org"  # default new post file extension when using the new_post task
  new_page_ext    = "org"  # default new page file extension when using the new_page task
  server_port     = "4000"      # port for preview server eg. localhost:4000
We also need to edit the Rakefile so that the header of a new post gets wrapped in HTML tags. Find the section I have below and add the lines for BEGIN_HTML and END_HTML.
Rakefile source 
1
2
3
4
5
6
7
8
9

      post.puts "#+BEGIN_HTML"
      post.puts "---"
      post.puts "layout: post"
      post.puts "title: \"#{title.gsub(/&/,'&')}\""
      post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
      post.puts "comments: true"
      post.puts "categories: "
      post.puts "---"
      post.puts "#+END_HTML"
Now we need to grab the new Octopress exporter I made by making modifications to the built in HTML exporter. The new exporter is located on github at https://github.com/craftkiller/orgmode-octopress. So download org-octopress.el and place it somewhere in your emacs load-path and add (require 'org-octopress). I cloned the repository in ~/git/ so in my emacs I added
.emacs 
1
2

  (add-to-list 'load-path "~/git/orgmode-octopress")
  (require 'org-octopress)
Now you should be ready to blog! To create a new post you must first create it and then move it to the org_posts directory like so: 
1
2
3
4
5

  cd blog
  rake "new_post[title]"
  mv source/_posts/2012-08-01-title.org source/org_posts/
  # I keep my posts in GIT so then I add it to the repo
  git add source/org_posts/2012-08-01-title.org
After writing the post simply do M-x save-then-publish in Emacs and then go back to your shell and run rake gen_deploy. You should now have your post online.

The main feature that I added was the ability to have syntax highlighted blocks. Right now this will only work with all lower-case begin_src end_src blocks. It supports options for :title :url and :urltext. If you would like to see an example of this, the source code to this post is located at http://blog.paphus.com/org_posts/2012-08-01-introducing-octopress-blogging-for-org-mode.org. If anyone wants to help improve the exporter please join me on github!

Finally, You may want to edit your .htaccess file to redirect image requests. I redirected all SVG image requests to the root directory so perma-links dont fail to access the images. You want to locate the .htaccess file in the source directory

.htaccess 
1
2
3
4

  Options +FollowSymlinks
  RewriteEngine on
  RewriteBase /
  RewriteRule /([^/]+)\.(svg)$ /$1.$2 [R,L]

Comments