Yordi VerkroostThe brain is for having ideas, we need something else to store them. We need a Second Brain.
I'm inspired by building a second brain. A place where you can offload your ideas into notes for future use. This relates to the concept of a Digital Garden. A digital garden is a public place on the internet where you publish these notes for others to see and enjoy.
I use Obsidian to manage my second brain. Obsidian recently launched their Publish plugin. This publishes your notes to the internet. The result is a visual representation of your second brain.
But I missed something. I have my own place on the internet and would like to have my second brain, my digital garden, in the same place. While Obsidian Publish is cool, it is different from my website's style. What I'm looking for is a garden of my notes that I can integrate with my existing website. I've looked around quite a bit to find the tools that can help me achieve this wish, and I found them. Meet the combination of Obsidian, Jekyll and the Obsidian to HTML converter: my digital garden.
A look at the internals
Jekyll is one of the tools available to create your website based on plain text- and markdown files. A couple of alternatives are Gatsby, Hugo and Hexo To use a setup that is like to mine, any static site generator will do.
The real magic is in the Obsidian to HTML converter. This is a Python script that takes (part of) an Obsidian Vault with notes and converts it into HTML files.
Download and installation
You can install the converter using pip:
sudo pip install git+https://github.com/kmaasrud/obsidian-html.git
or you can clone the repository to your local computer and install it:
git clone https://github.com/kmaasrud/obsidian-html.git
cd obsidian-html
pip install .
I chose the latter option since I made a small edit of the script to let it fit my needs (more on that later).
Run the converter
Once installed, run the converter using the command obsidian-html, combined with some arguments. I use the following one-liner to convert my Obsidian Vault into my website:
obsidian-html <path to my Obsidian Vault> -t template.hml -d "writings" "notes" -o <path to my website>/garden
The first part of the command points to the location of the Obsidian Vault on my computer. The argument -t defines a template and puts the resulting HTML files into your own format. My template looks as follows:
---
title: {title}
layout: page
comments: false
---
{content}
The top part (between dashes) is Jekyll Front Matter: meta-data that describes a page. The template uses {title} and {content} to put the note's title and content in the HTML file.
By default, the converter only converts the files that are in the root of the directory you give as input. To include nested directories, you can specify them using the argument -d. In my case, I also want to include the directories writings and notes in the converting process. Finally, the argument -o specifies the output path where the HTML files will end up. I let it point to the /garden directory of my website, which is all I need to include the HTML files when I publish my site.
A small converter update
Obsidian uses double square brackets ([[like so]]) to link from one page to another. By default, the converter creates relative links for this. For example, the link [[Luke Skywalker]] will end up as <a href="luke-skywalker">Luke Skywalker</a>. This messes up my website since I host all my notes under the directory /garden.
To solve this challenge, I made a small update to the converter tool. The file utils.py (find it here) performs the link generation, in the function md_link() . I updated this function to always include my /garden directory as a prefix:
def md_link(text, link):
return "\[" + text + "\](/garden/" + link + ")"
Photo by SevenStorm JUHASZIMRUS from Pexels
And that's that! A nice and fairly simple way to publish my Obsidian Vault to my website.
I'm curious how you use personal knowledge management tools (like Obsidian) and if you also publish your notes online. If so, please share them in the comments, I would love to check them out!
