Building This Blog with Astro

Every developer eventually builds a personal site, and the technology choice says something about their priorities. I chose Astro because it aligns with how I think about content-driven websites: send as little JavaScript to the browser as possible, use components where they add value, and make the content authoring experience pleasant. Astro ships zero JavaScript by default — your pages are static HTML and CSS unless you explicitly opt a component into client-side hydration. For a blog where 95% of the content is text and images, this philosophy produces sites that load instantly.

The content layer uses Astro’s content collections with MDX . Each blog post is an .mdx file with typed frontmatter — title, date, tags, reading time — validated against a Zod schema at build time. If I forget a required field or use the wrong type, the build fails with a clear error message. MDX lets me embed React components directly in my prose, which is how the technology labels you see throughout these articles work. The TechLabel component renders an inline badge with an icon and name, making it easy to reference specific technologies without breaking the reading flow.

Styling is handled by Tailwind , which pairs naturally with Astro’s component model. Each Astro component uses scoped styles or Tailwind utility classes, and the build process purges unused classes automatically. The result is a CSS bundle measured in kilobytes. For the blog’s typography, I use Tailwind’s prose plugin with custom overrides for heading sizes, link colors, and code block styling. The design is intentionally simple — the content should be the focus, not the chrome around it.

The build toolchain is Vite under the hood, which means hot module replacement during development is instant and production builds are fast. TypeScript is used throughout: in Astro components, in utility functions, in the content collection schema, and in any React islands that need client-side interactivity. The type safety extends from the frontmatter schema through to the page templates — if I add a new frontmatter field, TypeScript tells me every template that needs updating.

Deployment is a git push away. The site builds to a directory of static files that can be served from any CDN. There is no server to maintain, no database to back up, no runtime to patch. The entire site — every page, every asset — is generated at build time and served as static files. For a personal blog, this architecture is hard to beat: it is fast, secure (no server-side attack surface), cheap to host (static file hosting is essentially free), and the authoring experience of MDX with custom components makes writing technical content genuinely enjoyable.