Natalie Pendragon The Intergalactic Blog

Recreating my blog with Emacs Lisp

So continues my series of attempts to recreate my blog using various languages of technologies; this edition might just be my favorite yet, with Emacs Lisp and Org-mode.

In my last round of blog re-creation, it was Guile Scheme and Haunt. This time it’s Emacs Lisp. Partially because I’m still looking for opportunities to learn and explore Lisps more in 2020, but also because I’ve been an Emacs user for kind of a long time at this point. The learning curve and required investment early-on was pretty ridiculous, in retrospect, but I enjoyed it, and now have an editor that’s very attuned to my liking and workflow. And, it has two killer features that I have neither been able to find nor fully replicate outside of Emacs: Magit and Org-mode. Even if I left Emacs as my main development editor (gasp), I’d probably still keep it around and open just to use these two applications.

My high level thoughts, in comparing the current state of my elisp-based approach with my previous Scheme+Haunt-based approach, is that this feels a little less polished around the edges (the structure around theme definition in Haunt, and the support for defining html, even for things like the header and footer, with Skribe), which is a negative, but at the same time, allows me to compose in org-mode, which is a huge plus, and opens up a very large universe of new possibilities.

To begin, similar to last time, let’s start with an outline of the file and directory structure for this project:

.
├── blog
│   ├── index.org
│   ├── post-0.org
│   ├── post-1.org
│   └── post-2.draft.org
├── css
│   ├── blog-index.css
│   ├── fonts.css
│   ├── index.css
│   └── main.css
├── fonts/
├── head-scripts.html
├── head-styles.html
├── images
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── gpg.txt
│   └── site.webmanifest
├── index.org
├── js
│   ├── coderef.js
│   ├── Hyphenator.js
│   └── patterns
│       └── en-us.js
├── preamble.html
└── publish.el

I then run the following command to (re)generate the site within a public/ directory:

emacs --batch --no-init-file --load publish.el --funcall org-publish-all

With most static site generators, they have a built-in webserver to serve the resultant site on localhost for you to preview1. With Emacs and org-mode, you don’t get that out of the box, but it’s trivial to recreate, assuming you have Python installed, which you probably do. Just run the following from within the public directory:

python -m http.server

You can even leave it running, and regenerate the site in another shell; no need to restart the webserver for file changes. I haven’t done this yet, but you could probably take this a step further, and both put these commands in a Makefile, as well as wrap them in a watch, to get a nice “live reloading” development experience without much effort.

Okay, onto the actual code. The bulk of the code lives in publish.el, which is largely inspired from Rasmus Pank Roland’s excellent blog post on how they blog with Emacs. The styles, for now, are also nearly identical. I’m hoping to personalize my implementation more, as I figure out how all of the Elisp works, but in the meantime, it’s absolutely delightful web design!

Something I still want to figure out is how to create nice, self-hosted image galleries. Especially after adding my pct blog post series, I’m really wishing I had a nice system for inlining pictures from that adventure. Maybe I can take some inspiration from Low-Tech Magazine2 and dither the inlined images so they’re really compact and tidy. Then the links to full-size versions could even go to a different server, maybe. Not sure.

That’s about it!

Footnotes:

1

Typically something like hugo serve or zola serve or haunt serve.

2

This website may be unreachable, depending on the current weather in Barcelona.