The Aspen Grove

Setting Up My Digital Garden

Note Planted:
3 min read

The Big Idea

Notes on the technical set up of this digital garden.

General Notes

From a top layer look I am using the basic Stack of:

  • Obsidian for note writing and editing
  • GitHub for note backup and website hosting
  • Quartz as the site generator

Setting Up the Website

  • start by forking the quartz repository (otherwise it’s a pain later)
  • locally clone fork and set up locally. Guide for doing this: getting started
  • then build and preview the site to make sure everything is working: build and preview
  • then set up the GitHub action for hosting with github. Do this first without any fancy stuff to set it up easier by just using the test page: hosting
  • Obsidian plugins I use:
    • Update Time on Edit plugin for keeping track of when note was planted and edited last
    • Tag wrangler plugin for making it easier to deal with tags
    • Callout manger and editing toolbar plugins are nice to just make editing easier
    • Git plugin on desktop to push to a separate github repo that saves the raw obsidian markdown files
    • Use an app called PolyGit on IPhone to push backups from phone. The way I have it set up is that there are two copies of my vault on my phone. One is used by the Obsidian app to save to. The other is used by polygit to sync when remote. I have two iPhone shortcuts that automatically copy to and from the vault used by the obsidian app. It’s not a great solution but makes it so I can keep my phone and comp in sync without having to pay for anything.
  • using quatrz for static site generation (work comp had restrictions but no issue on home laptop)
    • Had issues getting npx to work was able to use node quartz/bootstrap-cli.mjs followed by the command instead
    • very easy to just us -d option to specify the envelop repo I cloned back down

NOTE

You can change the icon and banner of your Quartz site by changing the image files under quartz/static to whatever icon you want

Fonts used on site

Used google fonts

Header: Special Elite Body: Architects Daughter Code: Amatic SC

Commands I use

Quartz Commands

The Big Idea

Easy reference for commands I use to update my Digital Garden.

Site for Quartz Docs

Quartz Docs

Fetch upstream changes from main quartz repo:

git fetch upstream v4

Merge changes from main repo into local copy:

git merge upstream/v4

Build Preview of site:

npx quartz build --serve
Link to original

Todos for Website

  • figure out recent notes not scrolling on desktop
  • make a special svg logo for the site. I am thinking three aspen leaves together in a circle. make sure that it pops up on site correctly.
  • on light mode make the code blocks and tag blocks pop more
  • finish landing page
  • Set up gitscus for comments
  • figure out table display as well so that it doesn’t look gross
  • Set up comments
  • Set up recent page and figure out page dating on upload
  • Figure out a nice banner
  • Figure out how to help people use the RSS feed
  • Maybe set up a better meta data tag to make it possible to display properties of page.
  • edit the footer to be clearer and simpler invite for people to reach out about an idea
  • change home to base camp on breadcrumbs
  • Style comments box to match the rest of the page in both light and dark mode
  • Figure out analytics as well
  • make graph look better by tweaking settings
  • document setting up quartz sync and also
  • Todo: write down all the settings I have used
  • current bug on the mobile graph view
  • maybe figure out how to get recent notes working

Backlinks