Emacs Reboot #9: Blogging

I really like all the features that WordPress gives me. But I hate writing blog posts inside of WordPress. I want to do all my writing inside Emacs! Ideally, I’d be able to write my posts in Org-Mode, and publish them to my site from within Emacs. That’s today’s project.

First, I’m going to install org2blog. But org2blog needs xml-rpc.el as a prerequisite. I add the Tromey package archive (http://tromey.com/elpa/) to my package-archives, and install xml-rpc.el from there.

I then add the Git submodule for org2blog:</p


git submodule add https://github.com/punchagan/org2blog.git elisp/external/org2blog

Remember, in episode 8 I set things up so that any directories in elisp/external would automatically be added to my load-path.

Now I need to give org2blog my login information. I decide to take the advice of the org2blog README, and keep my sensitive login information in my ~/.netrc file. The relevant .netrc line looks like this:

machine virtuouscode login MYLOGIN password MYPASSWORD

With that set up I can configure org2blog:

; It seems I need to do this first to make package loading work
(package-initialize) 

(require 'netrc)
(require 'org2blog)
(setq abg-netrc-vc 
      (netrc-machine (netrc-parse "~/.netrc") "virtuouscode" t))
(setq org2blog/wp-blog-alist
      '(("virtuouscode"
         :url "http://avdi.org/devblog/xmlrpc.php"
         :username (netrc-get abg-netrc-vc "login")
         :password (netrc-get abg-netrc-vc "password")
         :tags-as-categories nil)))

Now that I know about the netrc package, I think I might go back and get rid of that secrets.el file I created in a previous iteration, and move my Gist login info into .netrc.

Since I blog so much, I go ahead and make some global keybindings:

(global-set-key (kbd "<f9>") 'org2blog/wp-new-entry)
(global-set-key (kbd "S-<f9>") 'org2blog/wp-post-buffer)

Now when I hit F9, I get a buffer that looks like this:

http://virtuouscode.com/wp-content/uploads/2011/09/wpid-Screenshot-org2blog-wp-virtuouscode.png

I can edit the buffer as an ordinary Org-Mode file, and then hit C-c d to publish it as a draft.

Now, there are a few nits left to iron out. For one thing, the default HTML that Org-Mode generates isn’t quite compatible with my blog’s stylesheet. I customize org-emphasis-alist to ensure that <em> and <strong> tags will be generated instead of <i> and <b>.

http://virtuouscode.com/wp-content/uploads/2011/09/wpid-Screenshot-Customize-Option-Org-Emphasis-Alist.png

Now I turn my attention to making sure source code listings look pretty. First, I install the htmlize package using the package manager, so that Org-Mode can generate pretty source-code markup. Then, I change the org-export-htmlize-output-type option to css to cause it to generate HTML marked up with classes instead of inline styles.

The marked-up output won’t do me much good without a stylesheet to map classes to styles. Rather than write one from scratch, I tell Org-Mode to generate one for me with M-x org-export-htmlize-generate-css. Here’s a small sample of the generated code:

<style type="text/css">
    <!--
      body {
        color: #000000;
        background-color: #ffffff;
      }
      .org-bold {
        /* bold */
        font-weight: bold;
      }
      .org-bold-italic {
        /* bold-italic */
        font-weight: bold;
        font-style: italic;
      }
      .org-border {
      }
      .org-buffer-menu-buffer {
        /* buffer-menu-buffer */
        font-weight: bold;
      }
      .org-builtin {
        /* font-lock-builtin-face */
        color: #483d8b;
      }
      ...

I pull out the CSS, save it as http://avdi.org/stylesheets/code.css, and update my blog template to link to that stylesheet.

And that’s it! Now I can blog from the comfort of Org-Mode.

And yes, as you might have guessed: this post was written and posted from inside of Emacs. Even the screenshots were automatically uploaded and linked into the post by org2blog!

6 comments

  1. Hi.  Thanks for this.  I’m struggling with setting up the CSS stylesheet in order to get code blocks exported to wordpress to look like an emacs org-mode export.  I placed

    in my header.php file of my theme after the default stylesheet line, and it messes up the look of my blog.  I’m expecting this additional css file to only affect the code blocks of my org-mode file.  Is that the right assumption?  Let me know what I am doing wrong.  Thanks!

    1. I’d suggest going through the CSS file and editing it down to just the bits having to do with code formatting. There’s a lot in the file it generates which is not related to code and might well conflict with your blog styles.

Leave a Reply to Avdi Grimm Cancel reply

Your email address will not be published. Required fields are marked *