Coder Social home page Coder Social logo

gatsby-starter-obsidian-garden's Introduction

Gatsby Starter Obsidian Garden

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

Demo Website

๐Ÿš€ 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)

  • 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)

๐Ÿš€ 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

๐ŸŽฏ Roadmap

  • Better SEO
  • Wiki Link
  • Obsidian-like node graphs

๐Ÿ’ช๐Ÿป 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

gatsby-starter-obsidian-garden's People

Contributors

desktopofsamuel avatar juxtdesigncc avatar

Watchers

Pankesh Bamotra avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.