Write Blog in Emacs with Org-mode and Hexo

It has been nearly a year since I kept my blog with Hexo and GitHub Pages. Last week I found an Hexo renderer plugin for Emacs org-mode: hexo-render-org and a useful tool for Emacs: blog-admin. They are very convenient and interesting and with them we can write and publish our blog in Emacs with Org-mode rather than Markdown. In below steps I assume that you have installed the prerequisites, i.e. Emacs, Spacemacs, Hexo.

1 Install Blog-admin in Spacemacs

The easy and strongly recommended way of installing blog-admin is add blog-admin into ~/.spacemacs: find dotspacemacs-additional-packages and write down the code. Then restart Emacs or press M-m f e R to refresh packages loading.

For the other ways to install blog-admin, pls see the Documentation here.

2 Create an Private Layer for Blog-admin

In spacemacs we can configure our private layers for those packages not included in Spacemacs Layers List.

  • Type and press M-x configuration-layer/create-layer and notice the info to create an private directory for additional layers. I don't use the default directory.
  • Edit the .spacemacs file: find dotspacemacs-configuration-layer-path and add the path, for example, dotspacemacs-configuration-layer-path '("~/.spacemacsprivatelayer/").
  • Edit the Layer's packages.el file, I add the below codes into it.
     1: (defun org-page/init-blog-admin ()
     2: "Initialize blog-admin"
     3: (use-package blog-admin
     4:   :defer t
     5:   :commands blog-admin-start
     6:   :init
     7:   ;; Keybinding
     8:   (spacemacs/set-leader-keys "ab" 'blog-admin-start)
     9:   :config
    10:   (progn
    11:     ;; Open post after create new post
    12:     (add-hook 'blog-admin-backend-after-new-post-hook 'find-file)
    13:     ;; Hexo
    14:     (setq blog-admin-backend-path "~/ZBLOG")
    15:     (setq blog-admin-backend-type 'hexo)
    16:     ;; create new post in drafts by default
    17:     (setq blog-admin-backend-new-post-in-drafts t)
    18:     ;; create same-name directory with new post
    19:     (setq blog-admin-backend-new-post-with-same-name-dir t)
    20:     ;; default assumes _config.yml
    21:     (setq blog-admin-backend-hexo-config-file "_config.yml"))
    22:     (add-hook 'blog-admin-backend-after-new-post-hook 'find-file) ;; Open post after create new post
    23:     (setq blog-admin-backend-hexo-template-org-post  ;; post 模板
    24: 		       "#+TITLE: %s
    25: 		       #+AUTHOR: Mèng Xiànjūn
    26:      #+EMAIL: mengxianjun.org@gmail.com
    27: 		       #+DATE: %s
    28: 		       #+LAYOUT: post
    29: 		       #+TAGS:
    30: 		       #+CATEGORIES:
    31: 		       #+DESCRIPTON:
    32: 		       ")
    33:   )
    34: )
  • Add this new layer's name org-page into .spacemacs file: find dotspacemacs-configuration-layers and write down the code.
  • Press M-m f e R to install it.

3 Install hexo-render-org

  • cd your blog directory and run the command npm install hexo-renderer-org --save
  • Configure config.yml file of Hexo theme, I add below codes into it:
    1: # hexo orgmode 支持 # emacs: '/usr/bin/emacs'
    2: org:
    3: emacs: '/usr/bin/emacs'
    4: common: |
    5: #+OPTIONS: toc:nil num:t
    6: #+BIND: org-html-postamble \"<div style='font-size: 14px;padding: 5px;line-height: 20px;border: 1px solid;'>Last Updated %C. by <a href='http://mengxianjun.org/about/'>Mèng Xiànjūn</a> with %c</div>\"
    7: cachedir: './hexo-org-cache/'

4 Usage and Preview

After finishing all above installation, press M-m a b will see (This gif pic is stolen from here): 5897ee671e537.gif

5 Test Org-mode Babel Execute

Open .spacemacs file, find defun dotspacemacs/user-config and add below codes into it.

 1: (org-babel-do-load-languages
2: 'org-babel-load-languages
3: '(
4: (sh . t)
5: (python . t)
6: (R . t)
7: (ruby . t)
8: (latex . t)
9: (matlab . t)
10: (perl . t)
11: (C . t)
12: (emacs-lisp . t)
13: ))

Then we can execute source codes in .org files: put the cursor into source code block, press C-c and will see evaluate notice in mini buffer.

Here is an example of Python code test:

#+BEGIN_SRC python :results output

a = 1+6
print (a)
print ('Hello, World!')


Hello, World!                    
Last Updated 2017-10-14 Sat 20:57. by Mèng Xiànjūn with Emacs 24.5.1 (Org mode 8.2.10)