Here’s one way I figured out to publish an Obsidian vault as a static website using Hugo. This is a hard way: the easy way is to spend $100/yr on Obsidian Publish.

My requirements

I want to:

• Edit my content in Obsidian.
• Design and publish the web version with Hugo. I want to use Hugo but only because it’s the tool I know. I’m not sure it’s actually the best tool for this – as you’ll see below it has some warts that makes this more difficult than it might with other static site generators. But I know Hugo pretty well, and am happy enough with it despite its warts.
• Not have to worry about correct Hugo frontmatter (dates, titles, etc). I can edit these in Obsidian via its Properties feature, but I want that to be optional. I want to be able to work on stuff in Obsidian and not thing about the Hugo part at all (unless I want to).
• Publish automatically. I don’t want an explicit “commit” or “push” or “publish” step; I just want to write and have stuff appear on the web.

The components I chose

The various pieces I knitted together to make this happen are:

Turns out recursion is possible in Hugo templates by define-ing blocks and then “calling” them with template. (I had thought define was only for overriding blocks from parent templates, like Django).

The use case was that I wanted to render a nested file tree, e.g.

- dir/
  - file1
  - file2
- dir2/
  - file3
  - dir3/
    - file4
    - file5

And so here’s a slimmed down version of what I figured out:

I want to add a TIL section to my blog, like Simon’s, for rough, unpolished, mostly technical stuff. It should be separate from the main blog post and feeds – only show up at /til.

I sort of already know this but documenting the steps as a way of reminding myself and testing out a TIL section.

Conceptually, creating new sections in a Hugo blog is easy: Hugo mirrors the output structure from the input structure. So to create jacobian.org/til, I just need to make a content/til directory and put stuff in there. But there ended up being a few other steps to get this looking the way I wanted: