The 2023 version of my digital abode is built with Astro. I had originally I started making it with Eleventy (11ty) as I had used 11ty successfully for version 2 of my Code Notes project and loved its simplicity and speed, but whilst building the 11ty site I became more and more interested in Astro. After trying out the Astro blog example I decided to rebuild the site with it - even though I still hadn’t released the 11ty version 😬.
Astro is great because, like 11ty, it’s a static site generator, but .astro components use JSX syntax, which I’m very familiar with – I write React apps for a living so it was a natural fit. The component and data fetching model was extremely easy to pick up and I was able to rebuild the site in a few days.
Type is set in Mona Sans from GitHub.
For CSS processing, I use PostCSS with Tailwind and Autoprefixer. Tailwind is used sparingly when I need to add a utility class to an element without adding a specific classname.
Spacing and type sizes use the custom properties defined by Utopia.fyi and they are added to Tailwind’s config (see here). If you haven’t used Utopia before, I highly recommend it. My Utopia config for this site can be found here, and I use it like so:
font-size: var(--step-1);
margin-block-end: var(--space-s);n.b. The code for the 11ty version is on the eleventy-version branch on the zander.wtf repo.