Our Stack: Astro, Sanity, and the Art of Choosing Boring Technology
How we chose the technologies behind this blog — and why boring is often better than exciting.
Every developer has a list of technologies they're excited about. Shiny new frameworks, cutting-edge databases, experimental runtimes. The temptation to use them in production is real. We resisted.
The Selection Criteria
We chose every tool in our stack based on three questions:
- Is it well-documented? Can a new team member get productive in a day?
- Is it actively maintained? Will it exist in two years?
- Does it solve our specific problem? Not a hypothetical future problem — the one we have right now.
The Stack
Astro — The Framework
Astro gives us server-rendered pages with zero JavaScript by default. When we need interactivity, we reach for React islands. The result is a blog that loads instantly:
1---
2// This is an Astro component
3// It runs on the server. Zero JS shipped.
4import Layout from '../layouts/main.astro';
5import { getAllPosts } from '../lib/sanity';
6
7const posts = await getAllPosts();
8---
9
10<Layout title="Blog">
11 {posts.map(post => (
12 <article>
13 <h2>{post.title}</h2>
14 <p>{post.excerpt}</p>
15 </article>
16 ))}
17</Layout>
18
19<!-- Need interactivity? Use an island: -->
20<ThemeToggle client:load />
21<!-- Only this component ships JS -->Sanity — The CMS
Sanity gives us structured content with a real-time collaborative editor. The query language (GROQ) is powerful enough to fetch exactly what we need:
1// Fetch posts with author data in a single query
2const posts = await sanity.fetch(`
3 *[_type == "post"] | order(publishedAt desc) {
4 title,
5 slug,
6 excerpt,
7 publishedAt,
8 coverImage,
9 tags,
10 author->{
11 name,
12 slug,
13 image
14 }
15 }
16`);Tailwind CSS v4 — The Styling
Tailwind v4 brings CSS-first configuration. Our entire design system lives in a single CSS file with custom properties:
1/* One file. Every design decision. */
2@theme inline {
3 --font-sans: "Space Mono", monospace;
4 --font-heading: "Fira Sans Condensed", sans-serif;
5 --radius: 0.5rem;
6}
7
8:root {
9 --primary: oklch(58% 0.18 30); /* Terracotta */
10 --background: oklch(100% 0 0); /* White */
11 --foreground: oklch(15% 0.004 60); /* Warm black */
12}The Result
A blog that scores 100 on Lighthouse, loads in under a second, and is a joy to write for. Sometimes boring technology is the most exciting choice you can make.
