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.
Your site is now running at http://localhost:8000!
/content/vaultstored all demo content. You can also use Obsidian to open the folder as a vault.
/config.jsto customise the site metadata, top and footer navigation
/gatsbyto customise all page generation in
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:
media, remember to update the config in
gatsby-config.jsif the media folder has changed.
publish: falseto hide a note.
Current example vault in
/content/vault has already implemented all the aforementioned preference settings
gatsby-remark-relative-imagesneed 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: