Astro Demo Build - Beacon Analytics

I built and deployed a reference site in Astro to show, end to end, what the framework is good at: fast, content-heavy sites that send almost no JavaScript to the browser. The result is "Beacon", a product landing page plus a content-collection blog, live on Vercel, where the interactive pieces hydrate as isolated islands and the content pages ship zero framework JavaScript.

Challenge

Astro's defining promise is performance through restraint: render on the server, hydrate only what needs to be interactive. I wanted one build that proves that claim rather than repeating it, and that exercises the features a team actually evaluates.

• Show the islands model, not just describe it. Interactive components need to load independently, on demand, without dragging the whole page into a JavaScript bundle.
• Use the real content tooling. A blog should run on typed content collections, not hand-rolled markdown parsing.
• Stay genuinely fast. Performance had to be the default, not a later optimization pass.

Approach

I designed and built a product landing page and a blog on Astro 6, deployed static on Vercel.

• Islands architecture. The interactive pieces - a tabbed product preview, a pricing toggle, an FAQ accordion, a newsletter form - are React components hydrated with three different strategies (on load, on visible, on idle), so each ships its own small bundle only when needed. Everything else is static HTML.
• Content collections. The blog runs on Astro's content layer with typed, schema-validated frontmatter, so a bad date or a missing field fails the build instead of the page.
• View transitions and images. Smooth cross-page navigation with a shared-element morph from blog card to article, plus build-time responsive images that emit optimized WebP automatically.
• AI-assisted build. Designed and built with Claude Code, the way I work day to day.

Results

• Content pages ship zero framework JavaScript. Blog pages load only a tiny view-transition router; the landing page loads React only for the islands that need it.
• Live and shareable on Vercel, with sitemap, RSS, and SEO metadata in place.
• A working reference I can walk a client or hiring manager through to show the islands model, the content layer, and the performance story in one place.

Tools Used

Astro 6, TypeScript, React (islands), MDX, Vercel, responsive image optimization, RSS, structured metadata