budding

A Meta-Tour of This Site

A video tour through how I build the old version of this site

Jared Pereira has been running a wonderful series of personal website tours . The guest list features many of my favourite Digital Gardeners and indie web creators such as Tom Critchlow , Chris Aldrich , and Azlen Elza .

At the end of 2020 I stopped in to show what this website looks like behind the Wizard of Oz curtain:

The video walkthrough on this page walks through how I built my previous website in Gatsby.js. To learn about the tech stack behind the current version visit the Github

Tech Stack and Features

  • Built with Gatsby , which uses React for rendering and GraphQL for data fetching
  • All posts (notes, essays, books) written with MDX - allows me to write React components inside markdown files for extra JavaScript power ✨
  • I use the CSS-in-JS library emotion for styling components
  • Responsive footnotes implemented with Tufte CSS (no JavaScript required!)
  • Bi-Directional Links with gatsby-theme-brain, and page previews adapted from gatsby-theme-andy
  • Tippy.js for tooltip popovers
  • Images hosted on Cloudinary to avoid the long build times when using gatsby-image
  • Deploys to Netlify directly from Github. Currently takes 4 minutes for the site to build and deploy. I have no idea if that’s good or not, but I’ll take it 🤷🏻‍♀️

If you want to see all the source code yourself, feel free to wander around in the Github repo .