👋 Introduction

A Gatsby starter template to publish Obsidian vault for free, created by @juxtdesigncc

🚀 Quick Start

Deploy to Gatsby Cloud Now Deploy to Netlify Now

💎 Key Features

Obsidian currently offers Publish services ($20/month) with advance features. This starter is a free alternative for Obsidian users who want to publish their digital garden as a website. Obsidian can also serve as an on-device CMS to manage your content. (Cross-platform synchronization is also possible via Obsidian Sync / Git)

Self-host Obsidian Website

Publish your Obsidian knowledge base as a website for free using Gatsby

YAML support

Support same YAML (e.g. tags, publish) as Obsidian

Notes maturity frontmatter support

Display notes' maturity, customizable stages (This template used Maggie Appleton's metaphor - Seedling, Budding, Evergreen as an example to illustrate notes' maturity)


Better SEO than Obsidian Publish (Using react-helmet for basic SEO setup)

🚀 Getting Started

1. Create a Gatsby site.

Clone this template and navigate into the folder

# Create a gatsby site with npx
npx gatsby new project-name https://github.com/juxtdesigncc/gatsby-starter-obsidian-garden
cd project-name

# or
git clone https://github.com/juxtdesigncc/gatsby-starter-obsidian-garden project-name
cd project-name

2. Install dependencies.

Install dependencies using yarn or npm

# Using yarn
yarn install

# Using npm
npm install

3. Run development server

Let's run the dev server to know it's working before updating any content or code.

gatsby develop

Your site is now running at http://localhost:8000!

4. Open the code and start customizing

Start customizing:

  • /content/vault stored all demo content. You can also use Obsidian to open the folder as a vault.
  • /config.js to customise the site metadata, top and footer navigation
  • /gatsby to customise all page generation in gatsby-node.js
code .

💻 Setup

Read before you use your own Obsidian vault or create a new one

Whether you wish to use your existing Obsidian vault or start a new vault, the following Obsidian preferences has to be set up correctly. Starting a new vault is highly recommended as these options are not on by default. All existing notes using the [[Wikilinks]] will need to update manually. Here're a list of preferences:

  • Settings - Files & Links: Use [[Wikilinks]] option should be OFF. It will change the link format from [[Wikilinks]] to [MarkdownLink].
  • Settings - Default location for new attachments: Should be set as 'In a folder specificed below' and create a folder named media, remember to update the config in gatsby-source-filesystem in gatsby-config.js if the media folder has changed.
  • By default, all notes will be published , but add frontmatter publish: false to hide a note.

Current example vault in /content/vault has already implemented all the aforementioned preference settings

Why gatsby-remark-relative-images need to be not the latest version?


💪🏻 Support

Thank you for trying this out! I'm still constantly shipping new updates to this project. Stay tuned for more news!

You can support this project by:

  • Raise issues on Github if you catch any bugs
  • Submit a PR if you discovered a solution
  • Share this project on Twitter and tag me!
  • Give me a star on Github