Table of Contents
- Part 1: Create an Obsidian Digital Garden
- Part 2: Syncing your Obsidian Vault to multiple devices (Android, iOS, Windows, MacOS, Linux, iPadOS, etc.)
- Part 3: Initial Setup of your Obsidian Digital Garden
- Part 4: Adding additional custom CSS to your Obsidian Digital Garden
- Part 5: Advanced Tips and Tricks for your Obsidian Digital Garden
- Part 6: Advanced – Create multiple Digital Gardens in a single Obsidian Vault
Part 3: Initial Setup of your Obsidian Digital Garden
By this point, you should have a blank Obsidian vault, shown above. As well as some kind of sync solution. In my case, I am using GitHub manually so you will not see Obsidian Git or anything.
Create your Accounts
Now you will want to have a GitHub account (mandatory) in order to create this Digital Garden. Regardless of whatever sync solution you are already using, you will want to make sure you have a GitHub account.
Next, you will want to create a Netlify account. I will be using this solution, as opposed to the official doc’s Vercel solution because Vercel only allows about 30 changes per day and I ran into that limit within 5 minutes when I was checking out the different themes and how they would look on my garden. Netlify is more forgiving with that and I have never run into any of my limits and I have 2 Digital Gardens that I customize frequently.
I recommend linking Netlify to your GitHub account so you only have 1 password to remember for the two places.
Initialize your GitHub & Netlify Gardens
Click this Link to Deploy your Garden to Netlify. Which will take you to this page:
Click on the “Connect to GitHub” link which will take you to this page:
This will create you a GitHub repository with the name provided. You can use whatever name you’d like. I am keeping it the default. Click “Save & Deploy” after giving it a name. That will take you to this page:
Let it finish and you should have a unique name at the top (different from your repo, this is normal).
You will now have a blank site. You can view it by clicking on the “Open production deploy” button which will take you to a page that contains this:
Now you have the URL to your website (temporary if you are using a custom domain name) which ends in netlify.app. Bookmark this page cause this is where all of your pages will deploy to.
Set up the Digital Garden Plugin within Obsidian
Now that you have a blank site, you will want to go back to Obsidian and open up the plugin settings (shown in Part 1) to go to this page:
You are going to want to fill out all of these settings. Easiest one will be the Base URL which you can see near the bottom. That is the URL you bookmarked.
Next easiest is your GitHub Username and Repo for the Digital Garden. At this point it should look like this:
The last thing you will need is a token. Visit the link provided in the plugin settings and create a token. All you need to do is change the expiration. No expiration is useful but least secure while 30 days is most secure but most annoying as every 30 days you would have to update the token in the plugin settings.
Keep this token private and copy and paste it into your plugin settings. Now it should look like this:
The green check is what you want/need. If you don’t have that, go back through these steps and try again.
Publish your first file
Copy and paste the following file into a blank file in Obsidian:
--- dg-publish: true dg-home: true --- # Welcome to My Site! Thanks for visiting. I have [[other pages]] as well as **bold text**, *italic text*, ~~strikethrough text~~ and I can share code: `<p></p>` and more! This is another paragraph.
It should look like so (the name of the file doesn’t matter):
You will want to click on the icon in the green box or press on CTRL/CMD + P to bring up the command palette and search for “Digital Garden”. You should see the Publication Center:
Click the check box and then click “Publish Selected”.
It will take a few minutes and you can track the status under the Deploys sidebar tab on Netlify:
Once you see the green Published flag (like the one that was Today at 3:34pm you can refresh your link and you should see this:
Now you can add more pages and change whatever you would like. Only pages that have the
dg-publish property/YAML on them will come up to publish. That is how I am able to store my private notes in the same vault as my Digital Garden. It makes it A LOT easier than having to change vaults whenever I want to take notes or work on my garden(s).
How do I change the name from Digital Garden?
Probably should let you know! It really isn’t clear but it is under the Appearance settings in the plugin settings:
This is where you can change the name and theme. Also you can pass through the created and updated times to display those on the page like this:
Now you have a website that you can upload! WOO HOO!