Setting Up a Digital Garden with Obsidian and Eleventy

This online notebook - a digital garden - is made with Obsidian and Eleventy. My initial goal was to be able to maintain most of the website's content from Obsidian, using much of the basic workflow that I already use there.^[1]

This note tracks and highlights key aspects of parts of its set-up that reflect that aim. More extensive notes about changes and additions to the site can be found here: Website Additions and Changes.

This set-up was inspired by Publishing from Obsidian using 11ty | DeepakNess, which demonstrates the possibility of using Obsidian to update a basic Eleventy blog-style site.

I added the Eleventy.js Interlink Plugin handle interlinks and backlinks. Key steps for the basic set-up are:

1. Start an Eleventy project and install the Eleventy.js Interlink Plugin. Be sure to add the plugin to your eleventy config file.
2. Open the project folder as a vault in Obsidian
3. In the vault, create a notes folder. Update your Obsidian settings so that all new notes go to that folder.
4. The page for the interlink plugin includes a code snippet for handling backlinks. Add that to either an Obsidian template or an Eleventy layout.
   • I added the backlinks snippet to a notes.html file stored in my _includes folder, and then added that as the default layout to a notes.json file.
5. Start making notes. Add front matter for title and date.

Throw a few notes together and connect them. If you serve this (npx @11ty/eleventy --serve) and point your browser to your_default_localhost/notes/note_title/, you should see a note. Links should be functional and backlinks should appear where appropriate.

Not everything that works in Obsidian will automatically work in Eleventy.

For instance, in my personal (non-published) vault, I use a footnote plugin to make adding footnotes to a note a lot easier. I also use a table of contents plugin to generate a table of contents for some notes. These sort of things do not work automatically.

Here are things I've done to add functionality/ease to this set-up and, in some cases, to better mirror how I already use Obsidian.

I created an Obsidian template to easily insert YAML frontmatter (title, date) to every note.

• I store my templates in a folder called obs_templates, then added that folder to an .eleventyignore file. I use this mainly to avoid any conflicts between using Obsidian templating and Eleventy templating during the build process. You could also just add it to a .gitignore file.

I wanted that template applied every time I make a new note. For that, I installed the obsidian-auto-template-trigger plugin. This plugin lets you identify a template to automatically apply to every note created in a folder. Because all new notes will go to the notes folder, they'll all get the same template with this basic frontmatter already added.

I did something similar for posts.

I added a draft feature to allow me to keep things from being published. I used this bit on preprocessors from the 11ty docs as written, then added a "draft: true" to the notes and posts templates.

I haven't quite decided how I want this space to relate to my personal notes, but I definitely want to be able to moderate what is published. This allows me to do that while still previewing items via serve.

I turned my notes into a collection by adding "tags": "note" to my notes.json file. I then used that collection to create a really basic index of all notes, based on creation date.

I used the basic instructions at 11ty Slugs and Anchors to automatically create anchored headings/permalinks. This solution uses markdown-it-anchor.

This does not, however, automatically work with Obsidian's ability to link directly to a header between notes. For now, use aliases to display such a link, even if not functional:

[[Note#Header|Note#Header]]

Used markdown-it-footnote to add footnotes. However, there is a conflict between the margin notes feature I added (see Website Additions and Changes) and markdown-it-footnote: they both use the class footnote-item.^[2]

I need to refactor my CSS sheet quite a bit but that will have to wait for another day. For now, I changed the default class assigned to a new footnote by the markdown-it-footnote plugin by adding the below code to my eleventy config file:

markdownLibrary.renderer.rules.footnote_open = (tokens, idx, options, env, slf) => {

let id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf)

if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`

return `<li id="fn${id}" class="footnote-unit">`

}

where footnote-unit could be whatever default class I want to assign to a new footnote.

I believe this means I'll be able to use the Obsidian Footnote Shortcut plugin --- but I haven't tested that yet.

Added the Zotero integration plugin. See some notes here: Obsidian and Zotero Integration.

• Linked headers (using Obsidian syntax)
• Table of Contents option
• Making footnotes accessible

---

1. Although I have generally met this aim, I do wind up working in my IDE (VSCodium) much more than I intended. This is partially because I still have some work to do to better implement templates, but there are also some things that are a little clunky to do in Obsidian. I'll try to post more about this later. ↩︎

2. I followed the basic initial guidance provided by Mark Llobera at his blog. To solve the clash in classes, I looked at the index.mjs file for the plugin and saw that the class was assigned in the footnote_open function. I find the markdown-it docs kind of confusing, but was able to adapt some of the code from Leilukin's notes about making accessible footnotes. ↩︎