A Gatsby starter template to publish Obsidian vault for free, created by @juxtdesigncc
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)
Publish your Obsidian knowledge base as a website for free using Gatsby
Support same YAML (e.g. tags, publish) as Obsidian
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)
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
Install dependencies using yarn or npm
# Using yarn
yarn install
# Using npm
npm install
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!
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 .
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:
[[Wikilinks]]
to [MarkdownLink]
.media
, remember to update the config in gatsby-source-filesystem
in gatsby-config.js
if the media folder has changed.publish: false
to hide a note.Current example vault in /content/vault
has already implemented all the aforementioned preference settings
gatsby-remark-relative-images
need to be not the latest version?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: