Why I built the site using Astro

I wanted a fast site that was simple enough to develop in my free time, with batteries included. I also wanted to own the content, and be able to deploy it easily. Obviously as a dev I need components to keep the css under control, and server-side generation to keep load times super fast. I don’t want flashy client side JavaScript, with the site being naturally static, but I do want to leave room for interactivity later.

I’ve used React in the past, and generally enjoyed using it, but a heavy framework like React or VueJs would be overkill for my needs and would hurt initial page load speeds unless I opted for SSG via Gatsby or similar framework. Svelte and Sveltekit would produce a smaller footprint, but it’s still using a sledgehammer to crack a nut, even with server side generation tools. To keep things light, I first looked into using vanilla webcomponents, then into Lit, and finally Astro. Astro is a natural fit for a blogging homepage - the built-ins are excellent, the components are super simple, and the server side generation is by default. Astro’s primary focus is on delivering good web vitals, leaving me to concentrate on writing stuff…

Astro posts are all markdown, which I’m familiar with, and then enhanced with mdx (which I’ll have to learn) - this allows for dynamic elements mid post too. The great thing with markdown is that I write markdown a lot - multiple times a day - and I have the tooling I need, and personally love its simplicity. So Astro+Markdown ticks loads of boxes for me here.

Astro uses .astro components, which help keep the frontend neat and regular, with a lot of code reuse and single point testing. Looking at the syntax, it’s very neat and obvious what it’s doing, with simple components being imports and HTML - another tick.

I went for tailwind over global CSS or component scoped CSS, primarily for speed, but also as a learning opportunity, I’ve made psuedo tailwind classes for work projects, and they always work great, and I think the default style reset gets rid of loads of issues trying to wrangle components to do what you want them to do. Plus - for web vitals - you get fast initial page load.

The fast compile time generation means local sees the same as the deployed site, giving great confidence in the deployed result, and no server generation overhead before delivery - just super-fast cached pages.