When you are building a content-heavy site—documentation, a blog, a course hub, or a digital garden—the main thing users care about is simple: can I read this quickly?

Traditional single-page apps usually answer that question with a shrug. They send JavaScript, wait for hydration, fetch data on the client, and then finally reveal your post. That is a lot of machinery for delivering text.

Astro’s answer is different:

  • Build everything ahead of time as HTML wherever possible.
  • Ship zero JavaScript by default.
  • Only add interactivity to the pieces that need it, not the entire page.

This project is intentionally designed to highlight that model. Every blog post you see here is compiled at build time into plain HTML with minimal CSS, and then cached aggressively by your host or a CDN. There is no client-side router and no React/Vue runtime in your user’s critical path.

What “static-first” actually looks like in practice

In Astro, each page is a regular file under src/pages. For posts, we take it a step further and use content collections, which give us:

  • Type-safe frontmatter using Zod.
  • Centralized metadata (titles, tags, dates, descriptions).
  • Easy APIs like getCollection('blog') to query and list content.

The result is a site that can easily scale to dozens or hundreds of posts. Adding a new post is as simple as dropping a Markdown file into src/content/blog/.

Why this is a good fit for a class project

For a course like CSE 134B, you want to demonstrate:

  • Meaningful reuse of layouts and components (navigation, cards, typography).
  • Separation between content and presentation, so editing text does not require touching JSX/TSX.
  • Concrete performance choices, not just theoretical best practices.

Astro lets you showcase all three.

In this demo:

  • The header, footer, and page chrome live in a shared layout.
  • Each post is pure Markdown, using frontmatter to provide metadata.
  • Listing pages (like the blog home) pull from the content collection and render cards, all statically.

No client state. No loading spinners. Just HTML that ships once and can be read anywhere.