SNIPPET
oleeskildDigital Garden
2264 Stars
GitHubCSSAny theme
# 🏡 Obsidian Digital Garden
[](https://github.com/oleeskild/obsidian-digital-garden/releases)
[](https://discord.gg/UsPH74nEVS)
[](https://github.com/oleeskild/obsidian-digital-garden)
Turn your Obsidian vault into a beautiful website. Free, open-source, and entirely yours.
## 📚 Documentation
**[docs.forestry.md](https://docs.forestry.md/)** — Full setup guide, configuration options, and examples.
## Why a Digital Garden?
Unlike a blog, a digital garden is a living collection of ideas—notes that grow and connect over time. This plugin lets you selectively share your thinking while keeping private notes private. No monthly fees. Just your ideas, your way.
> 🔒 **Your private notes stay private.** Only notes you explicitly mark with `dg-publish: true` ever leave your vault.
Check out [gardens built by the community](https://vaults.obsidian-community.com/) for inspiration.
## Features
### 📝 Content Support
- Basic Markdown Syntax
- Links to other notes
- Obsidian Bases
- Dataview queries (as codeblocks, inline and dataviewjs)
- Canvas
- Transcluded/embedded notes
- Embedded/Transcluded Excalidraw drawings
- Embedded/Transcluded Images
- Embedded PDFs (up to 20MB, rendered inline)
- Callouts/Admonitions
- Code Blocks
- MathJax
- Highlighted text
- Footnotes
- Mermaid diagrams
- PlantUML diagrams
### 🧭 Navigation & Discovery
- Fast search with live preview
- Filetree navigation
- Backlinks
- Local graph
- Global graph
- Table of contents
- Link previews on hover
### 🎨 Customization
- Obsidian Themes
- Style Settings plugin support
- Customizable via CSS variables
- Custom filters (regex-based content transformation)
- Note icons
- Timestamps (created/updated)
- Customizable UI text (search placeholders, backlink headers, etc.)
### 🔒 Privacy & Control
- **Selective publishing** - Only notes explicitly marked with `dg-publish: true` are published
- **No accidental leaks** - Linked notes are never auto-published; you decide what goes public
- **Full control** - Your private notes stay private until you choose to share them
### ☁️ Hosting Options
- **Vercel** - One-click deploy, automatic builds
- **Netlify** - Alternative hosting with similar features
- **[Forestry.md](https://forestry.md)** - Managed hosting for non-technical users (no GitHub setup required)
## Initial Setup
**⏱️ ~10 minutes to set up.** It takes a bit of work, but when you're done you'll have a digital garden in which you are in control of every part of it, and can customize it as you see fit. Which is what makes digital gardens so delightful.
> 💡 **Want a simpler setup?** [Forestry.md](https://forestry.md) offers one-click hosting with no GitHub required. Currently in open beta.
Lets get started:
1. First off, you will need a GitHub account. If you don't have this, create one [here](https://github.com/signup).
2. You'll also need a Vercel account. You can sign up using your GitHub account [here](https://vercel.com/signup)
3. Open [this repo](https://github.com/oleeskild/digitalgarden), and click the blue "Deploy to Vercel" button. This will open Vercel which in turn will create a copy of this repository in your GitHub accont. Give it a fitting name like 'my-digital-garden'. Follow the steps to publish your site to the internet.
4. Now you need to create an access token so that the plugin can add new notes to the repo on your behalf. Detailed instructions with images are available in the [docs](https://docs.forestry.md/advanced/fine-grained-access-token/). Use a [Fine grained personal access token](https://github.com/settings/personal-access-tokens/new) with the following settings:
- Token Name: _`YYYY-Digital Garden`_
- Expiration: _Custom / a year / whatever you want._
- Description: _Publishing content to the digital garden._
- Resource owner: _yourself_
- Only select repositories: _Select your garden repo_
- Permissions (just two needed):
- Contents: `Access: Read and write`
- Pull requests: `Access: Read and write`
Click the "Generate token" button, and copy the token you are presented with on the next page.
5. In Obsidian open the setting menu and find the settings for "Digital Garden". The top three settings here is required for the plugin to work.
Fill in your GitHub username, the name of the repo with your notes which you created in step 3. Lastly paste the token you created in step 4. The other options are optional. You can leave them as is.
6. Now, let's publish your first note! Create a new note in Obsidian. And add the following to the top of your file
```
---
dg-home: true
dg-publish: true
---
```
(If you get backticks, \`\`\`, at the start and beginning when copy-pasting the above text, delete those. It should start and end with a triple dash, ---. See [this page](https://help.obsidian.md/Advanced+topics/YAML+front+matter) for more info about Obsidian and frontmatter.)
**This does two things:**
- The dg-home setting tells the plugin that this should be your home page or entry into your digital garden. (It only needs to be added to _one_ note, not every note you'll publish).
- The dg-publish setting tells the plugin that this note should be published to your digital garden. Notes without this setting will not be published. (In other terms: Every note you publish will need this setting.)
7. Open your command palette by pressing CTRL+P on Windows/Linux (CMD+P on Mac) and find the "Digital Garden: Publish Single Note" command. Press enter.
8. Go to your site's URL which you should find on [Vercel](https://vercel.com/dashboard). If nothing shows up yet, wait a minute and refresh. Your note should now appear.
Congratulations, you now have your own digital garden, hosted free of charge!
You can now start adding links as you usually would in Obisidan, with double square brackets like this: [[Some Other Note]], to the note that you just published. You can also link to a specific header by using the syntax [[Some Other Note#A Header]]. Remember to also publish the notes your are linking to as this will not happen automatically. This is by design. You are always in control of what notes you actually want to publish. If you did not publish a linked note, the link will simply lead to a site telling the user that this note does not exist.
## Alternative: Forestry.md (No GitHub Required)
If you prefer a simpler setup without managing GitHub repositories, you can use [Forestry.md](https://forestry.md) - a managed hosting service for digital gardens:
1. Create an account at [forestry.md](https://forestry.md)
2. Get your Garden Key from the Forestry.md dashboard
3. In Obsidian, open Digital Garden settings and enter your Garden Key in the Forestry.md section
4. Start publishing notes directly - no GitHub or Vercel setup needed
This is ideal for non-technical users who want a working digital garden without dealing with GitHub tokens, repositories, or deployment pipelines.
## Modifying the template/site
The code for the website is available in the repo you created in step 3, and this is yours to modify however you want.
### CSS Customization
Any CSS/SCSS files placed under `src/site/styles/user` will automatically be linked into the head right after all other styling, meaning that the styling added here will take precedence over everything else.
The template exposes many CSS variables that you can override, including:
- Colors (background, text, links, etc.)
- Typography (fonts, sizes, line heights)
- Spacing and layout
- Component-specific styling (graph, search, sidebar)
### Custom Components
You can add custom components to your garden by creating Nunjucks templates in `src/site/_includes/components/user/`. These can be included in your notes or layouts to add interactive elements, custom widgets, or specialized content displays.
## Updating the template
In the setting menu for the plugin there is, in addition to the previously mentioned settings, a setting with the name "Site Template" with a button saying "Manage site template". Clicking this should open up a popup-window with the setting "Update site to latest template" and a button saying "Create PR". Whenever digital garden template receives any updates, this button can be used to update your site. It will create a new branch in your repo with the changes and create a Pull Request to your main branch. The plugin will present you with this URL in the setting view.
If you used the "Deploy to Vercel" button, a Vercel bot will build a preview version of your site which you can visit to see that the changes does not contain any breaking changes. The URL should be visible in the PR.
When you are ready you can use the "Merge pull request" button on the pull request page to merge the changes into your main branch and make the changes go live.
In the future you will be notified with a visual cue whenever there is an update ready. For now you will need to manually check. If you have the latest version, you will be told so.
### Advanced changes for developers
The project uses the [eleventy](https://www.11ty.dev) templating engine. This uses `.eleventy.js` as the main entry-point. Please read the [eleventy docs](https://www.11ty.dev/docs/config/) if you need a quick-start on how this works.
If you want to do any changes that aren't overwritten when updating the template, do so in the `src/helpers/userSetup.js` file, which hooks into the elventy setup in .eleventy.js
---
## Local Export
You can export your garden to a local folder instead of publishing to GitHub. This is useful for self-hosting, previewing your garden locally, or running the site without Vercel/Netlify.
1. In the plugin settings, scroll to **Local Export** and set the path to your local [digitalgarden](https://github.com/oleeskild/digitalgarden) folder
2. Open the command palette and run **"Export Garden to Local Folder"**
3. Run `npm run dev` in your digitalgarden folder to preview the site locally
This exports all notes marked with `dg-publish: true` and their images to the local folder, ready for the Eleventy build. Note that publish status tracking and diffing are not available with local export — it's a full export each time.
## Local development
NOTE: this plugin contains a testing vault at `src/dg-testVault`, which is recommended for local development.
1. Clone this repository
2. (for best compatibility, use node version manager and run `nvm install && nvm use`)
3. Install dependencies with `npm install`
4. Run with `npm run dev`
5. Open the vault from `src/dg-testVault` into obsidian
6. (if you want to develop this plugin with another vault, move it into .obsidian/plugins of that vault)
To use the test vault with github, add your test repository values to a .env file with:
```
GITHUB_REPO=
GITHUB_TOKEN=
GITHUB_USERNAME=
# Forestry.md settings (if you're using Forestry.md)
FORESTRY_BASE_URL=https://api.forestry.md/app
FORESTRY_PAGE_NAME=
FORESTRY_API_KEY=
# Local export (for development or self-hosting)
LOCAL_GARDEN_PATH=../digitalgarden
```
### Local dev workflow
To preview plugin changes in the actual garden site:
1. `npm run dev` in this repo (builds plugin, copies to test vault)
2. Open test vault in Obsidian, run **"Export Garden to Local Folder"**
3. `npm run dev` in the `digitalgarden/` folder (serves garden with hot reload)
Note: this repository uses prettier and eslint to enforce code formatting and style. It is recommended to install these to your IDE for automatic formatting and error highlighting.
## The Original Obsidian Publishing Plugin
This is the original open-source Obsidian-to-website publishing plugin, and its codebase has served as the foundation for several other publishing tools in the ecosystem:
- **[Flowershow's Obsidian plugin](https://github.com/flowershow/obsidian-flowershow)** — built directly on this plugin's codebase
- **[Quartz Syncer](https://github.com/saberzero1/quartz-syncer)** — initially built on top of this plugin
- **[Enveloppe](https://github.com/Enveloppe/obsidian-enveloppe)** — created using parts of this plugin's code
It's been cool to see this project become the starting point for so many others to build their own Obsidian publishing solutions.
## Join the Community
Be a part of the Digital Garden Community by joining our [Discord Server](https://discord.gg/UsPH74nEVS).
## Code Contributers
Huge thanks to all the contributors who helped in making this
<a href="https://github.com/oleeskild/obsidian-digital-garden/graphs/contributors">
<img src="https://contrib.rocks/image?repo=oleeskild/obsidian-digital-garden" />
</a>
---
## Support
Built with coffee and stubbornness. If this plugin has been useful to you, a coffee would make my day—but it's completely free and always will be.
[<img style="float:left" src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" width="200">](https://ko-fi.com/oleeskild)
How to Install
- Download the CSS file below
- Move it to your vault's
.obsidian/snippets/folder - Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Stats
Stars
2264
Forks
198
License
MIT
Last updated 9d ago