How to build the digital garden
What you need
- Github account
- Netlify Account
- Obsidian
Good to have
- Familiarity with 11ty
- Claude Code
Obsidian
You can download Obsidian for free. You do not need any kind of syncing but it is nice if you work across devices. I started off by simply putting my vaults in Dropbox and this worked perfectly but I didn't have mobile access. I have since switched to paying for Obsidian Sync since I want to support them.
Vaults
Alright, Obsidian uses the term Vault to describe a grouping of Obsidian configurations and markdown content. It is really just a folder or directory. It matters though because your Obsidian configurations are different in different vaults.
You will also want to pay attention to this because you will be publishing a SINGLE vault. Each vault is its own garden with its own url.
I have an RPG vault that I publish to games.ryanlatta.com and my main vault that I publish to ryanlatta.com. They are, for all purposes, completely set up projects.
With that in mind, create a vault.
Plugins
The main plugin is the digital-garden plugin. You need to enable community plugins in Obsidian, then search for digital-garden and blamo, you got it.
The plugin has a bunch of options, but thats for later.
How it works
The digital garden plugin looks for file changes in your vault then makes API requests to github to publish your changes.
In other words, this plugin acts like it is committing code but it is really publishing content and configuration using API based github access.
Github
Accounts are free. Get one!
Setup
1. Create the template repository
Secretly your garden is a code project. Now, you'll want to go to this link in github. This is the underlying code project that is your website. In the upper right click the use template button to create a repository that is based on this one.
2. Set up Obsidian
Download Obsidian, create a vault if you don't have one. Then download the Digital Garden plugin.
3. Create PAT for Access
A bit technical but back in github you'll want to go to your developer settings to create a fine-grained access token.
Create a PAT using these instructions. I messed this up twice. It isn't a big deal though.
You'll take the PAT and paste it into the Digital Garden plugin configuration for the Github Access token.
4. Set up Netlify
Create a free netlify account then you'll start a project using an existing github project. Point it to your repository you created.
That is literally it.
5. Test
Alright, to publish a page it needs front matter with a property that looks like this:
dg-publish: true
Add that to something you'd like to publish. Hit Control/Command P to open the Command Pallete in Obsidian and type "Publish". You'll see something like Digital Garden: Publish Active Note.
Do that.
Now, back at netlify you'll be able to watch the deployment and get the internal url it uses to load the site and look.
If you have your page published, you're ready to move on to configuring and customizing. If not, see if netlify had any build errors. My mistake was not giving the PAT enough permissions so nothing would update.
Customizing
Digital gardens is far from perfect. Out of the box it doesn't add any meta fields for SEO. I turned Claude Code to this task. It added in the required fields and uses specific front-matter fields for things like description, images, etc. If you want SEO you'll need to do this.
You can, of course, cheat and use mine.
My configuration is goofy but it'll use the following front-matter properties:
- description
- title
- cover-image
For this to work there is an option in the Note Settings of the digital garden plugin. It is called Pass Front Matter Through. You'll need this enabled.
Now, in terms of styling the plugin itself shows many themes you can use. I, of course, turned this also over to claude code and after an hour of shouting at each other we were happy.
Tricks
Obsidian
I will recommend you install some plugins to make things more fun.
- Dataview - Seriously, you can do amazing things and make your site become more dynamic with this.
- Advanced Canvas - Obisidan's canvas tool is pretty neat, this lets you add the dg-publish property to publish it and share.
- Various Compliments - I love the idea of my notes being more and more linked. This adds an autocomplete feature to nudge you to do that.
- Harper - Pretty crappy, but still useful spell and grammar checker
- Templater - Alright, this has a steep curve but you can set up file templates that are smart enough to get used on specific folders and other things. So when I publish an article it always has the right fields without having to think about it.
Digital Garden
Ok, there are a lot of configurations hidden around this plugin. You can...
- Have it ignore certain directories so you can keep whole areas of your vault private.
- Set global rewrite rules for how your site URLS work differently than your file structure
- Individually set paths on files using dg-path (I use this for landing pages)
- Alter how the garden icons show up in the Appearance settings of the plugin