How I Built This

TL;DR: This site is built in GatsbyJS, leverages some wonderful open-source plugins, uses Markdown files for notes, and is hosted on Netlify.


Framework

This site is built in GatsbyJS, which is something I was curious to learn more about anyway, so that was a nice bonus of this project. I’ve worked a lot with ReactJS, and Gatsby is built on top of it with many added benefits. In particular, it compiles pages beforehand so that when a user visits them, they are just viewing a static web page. So, you get the benefit of dynamic logic for your content, with static navigation for users. There are caveats, and I won’t go into details here, but here’s a great summary from Josh Comeau explaining statically compiled workflows like Gatsby.

Theme

On top of GatsbyJS, I use some wonderful plugins that implement support for digital gardens. They includes functionality like dynamic linking of [[square bracketed phrases]], auto-creation of pages for those links, a “references” box at the bottom, and so on.

Aengus McMillin built and shared a Gatsby theme (gatsby-theme-brain) for this exact purpose, and then Aravind Balla built another theme on top of it (gatsby-theme-andy), which I ended up using.

After that, I did a bunch of style customizations (gotta personalize it!). I plan to do a bunch more tweaks to the site, but wanted to focus on the notes first and keep it simple.

Hosting

I'm currently hosting the site on Netlify, which allows easy integration with GitHub. Anytime I make changes to my repository, I just push them to GitHub, and it will automatically re-deploy and refresh my site.

Workflow

Currently, I use Roam Research as my primary note-taking application. I create different linked notes and iterate on them in the app. Then, once I feel some notes are ready to be made public, I manually copy them and paste them into a new Markdown file and add to this repo.

There are actually some options to automate the process, but my intention is to keep thinks manual on purpose. A few reasons:

  • I plan to be selective and only publish certain notes
  • For any notes I want to publish, I will want to publish a subset / edited version of it

As more tools become available, my workflow might change, but for now it's working well for me. The important thing is that whenever I have a note I want to make public, it only takes a few minutes to push it live.

Alternatives

If you would prefer a solution that doesn't involve any coding, you can also build a digital garden using TiddlyWiki, without any coding at all! If you’d prefer to go that route, Anne Laure shared a great tutorial on doing just that.


Happy gardening! 🌱