My Post-Writing Workflow

Bikeshedding blogging software instead of just actually writing things is... an issue for many people. Me included. I first started off using Hugo as a static generator for it, with some git magic involved. Encountered some timeout issues on thumbnailing giant photos. And... it didn't quite fit together somehow. So I decided to keep it...

Simple, Stupid!

To begin with, I have a VPS hosting all of this (it's the cheapest DigitalOcean one). This gives a decent amount of room for simplification.

Namely... to begin with, we can just write HTML in HTML. Yes, writing out tags sounds tedious, but that's what Emacs is for, right?

You don't even need a lot of convenience for this. E.g. Ctrl-Enter closes the previous paragraph & opens a new one (this is something I added); there is already a key to close tags, too. Apart from this... HTML is just not that bad to write. Optimally, you put a whole lot more effort into the actual article itself, anyway; also, being able to style your text entirely randomly just by typing out a <span> tag inline is really fun.

Creating a new post

Well, there is (of course) a little Emacs command to do this for me; it could be a shell script just as well though. It just creates a new directory with a name, copies an article template into it, and opens it up.

This takes care of all the boilerplate / CSS / JS / etc you need for a functioning page. All you have to do is rewrite the article title, update the date and start typing. (... auto-updating dates should be fairly simple to implement in Emacs, too, I just haven't gotten this far yet).

It's just

(defun ssafar-make-new-post (post-title)
  (interactive "MPost dir name: ")
  (mkdir post-title)
  (let ((new-post-file (concat
               (file-name-as-directory post-title)
               "index.html")))
    (copy-file (concat
                (file-name-as-directory "..")
                "article_template.html")
               new-post-file)
    (find-file new-post-file)))
          

It's really just an mkdir, a cp and opening the result.

Updating index pages

I already wrote about how this is happening for the "sidebar" below (... open file, add a line; I'd need to make up some text anyway), or the RSS feed (copy out a block of XML, paste it back in, update some links in it). It shouldn't be hard to automate this, but... I've been too lazy to do it so far.

The fact that the same sidebar iframe serves as an index on the front page is truly ugly though; I should fix that at some point.

Deploying it on the site

Admittedly, this is not as simple anymore as it used to be.

I used to have the simplest deploy step ever: just do nothing whatsoever, after doing all of the above editing on the "production" server web root mounted locally on my laptop. It's not like the world ends if anything gets messed up; it's a personal site basically no one reads.

Since, I upgraded this to the next simplest solution. I have a drive shared amoung all my computers; I just edit the site contents right there. There is a (LAN-only) web server, running on the same computer, pointed at this; I can check how the posts look like just by loading up the "dev" version in a browser.

Then, once everything is ready, I ssh into the file server box, and rsync it up to the VPS.

This has multiple benefits:

backups happen automatically, together with the rest of the shared drive.

still no version control; being the only user editing this and posts not even being code, there is not a lot of need for it, and it's much easier to just drop large video / image files into a directory than to get e.g. git to swallow them. rsync is great at moving large files around, too.

files are available pretty much everywhere. E.g. for the post about backing up a Novation Circuit, I started writing the post from my laptop, continued on my desktop, and took some screenshots on a Surface tablet, dropping the results right into the post directory.

instant feedback on how the article looks like! Hit save in the editor, refresh the page in the browser, that's it. No extra build steps. Even better, the dev server is (often) on the same network as you are, in which case reloads are even faster.

Is this working?

Well, more than 50 posts in, it seems to!

It's great that there is no extra infrastructure (static generators, etc.) to keep track of; the source of truth is always the HTML, so if something looks ugly, I do know where to look immediately.

It's also really easy to add new tools! E.g. the code snippet above is using highlight.js; you can just add the boring parts to the template file, and just add the right tags in the article. See also this article on IndieAuth; it has fancy colorful dialogs with some custom CSS that would've been a lot more friction to get through a static generator.

Of course, it's not without downsides. Writing RSS is boring, and the index page is outright ugly. So... maybe some automation might be coming soon?

... comments welcome, either in email or on the (eventual) Mastodon post on Fosstodon.