How I Built This Website: Edge-First Architecture with Cloudflare & Astro

As a Senior Cloud Architect, I’ve spent years building infrastructure for others. When it came time to create my own portfolio, I wanted to demonstrate my expertise through implementation, not just description.

The result is a modern, edge-first website deployed across Cloudflare’s global network with sub-100ms response times worldwide. It features an AI-powered chat assistant, loads in under 1 second, and achieves a 98/100 PageSpeed score.

In this post, I’ll walk you through the key technical decisions and lessons learned.

The Stack

I chose Astro 5 for its islands architecture—it ships zero JavaScript by default and only hydrates interactive components when needed. This reduced my bundle size by 70% compared to a traditional React SPA.

For hosting, Cloudflare Pages deploys to 300+ edge locations globally. Combined with Pages Functions for serverless API endpoints, this creates a truly distributed application where static assets, APIs, and AI inference all run at the edge.

Interactive features use React 19 with selective hydration:

• AI chat assistant with streaming responses
• Build info modal showing git metadata
• Animated counters triggered by scroll
• Infinite logo carousel

Tailwind CSS v4 handles styling with JIT compilation, keeping the CSS bundle under 47KB.

The AI Chat Assistant

The most interesting technical challenge was building an AI chat into a static site. The solution uses Server-Sent Events (SSE) to stream responses from Claude 3.5 Haiku via OpenRouter.

Here’s how it works:

1. User message hits /api/chat (Cloudflare Function at the edge)
2. Function checks rate limit in KV storage (20 requests/hour per IP)
3. Request goes through AI Gateway for analytics and caching
4. Claude responds with streaming SSE—tokens appear in real-time

The AI has context about my experience through RAG (Retrieval-Augmented Generation). During build, a Node script compiles all markdown files from /knowledge-base/ into a TypeScript constant that gets bundled with the Function. This means the AI always has current information without runtime file access.

Rate limiting uses KV storage—lightweight, globally replicated, perfect for this use case. No database needed.

Performance Optimizations

I obsessed over performance to hit sub-1-second page loads globally:

Bundle reduction — Astro’s client:idle directive delays React hydration until the browser is idle. Combined with per-page code splitting, this reduced initial JavaScript from 350KB (typical SPA) to 220KB total, only 59KB gzipped.

Font loading — I use a clever trick to load fonts without blocking render:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800"
      media="print"
      onload="this.media='all'" />

By setting media="print", the browser loads fonts with low priority. Once loaded, onload makes them apply to screen. Zero render-blocking, virtually no layout shift.

Caching strategy — JavaScript and CSS get cached for 1 year (max-age=31536000, immutable). HTML gets max-age=0, must-revalidate to stay fresh. Second page loads are instant.

Deployment

The workflow is beautifully simple: push to main, and Cloudflare handles the rest.

Commits trigger a build that runs Astro, generates the AI knowledge base, compiles Functions, and deploys to 300+ edge locations—all in about 30 seconds.

During build, I inject git metadata (commit SHA, timestamp) using Vite’s define option:

define: {
  'import.meta.env.GIT_COMMIT': JSON.stringify(process.env.CF_PAGES_COMMIT_SHA),
  'import.meta.env.BUILD_TIME': JSON.stringify(new Date().toISOString()),
}

This powers the “Build Info” modal, giving visitors transparency about which version they’re viewing.

Key Lessons

Astro’s islands architecture is perfect for content sites with selective interactivity. The performance benefits are immediate—70% less JavaScript without sacrificing React where it matters.

Edge computing changes everything for global performance. Sub-100ms response times worldwide aren’t just nice to have—they fundamentally improve user experience.

Streaming AI responses feel magical. Real-time tokens appearing beat a 3-second loading spinner every time. SSE isn’t hard to implement, but the UX impact is massive.

Static-first doesn’t mean static-only. Combining static generation with serverless Functions gives you instant page loads plus dynamic capabilities where needed.

Trade-offs

No architecture is perfect. Here are the compromises I made:

Platform Lock-in

I accepted Cloudflare platform lock-in for the integration and performance benefits. The tight coupling with Pages, Functions, KV, and Workers AI means migrating would require significant refactoring. But the performance gains and developer experience make it worth it.

Static-First Limitations

Static-first limits user-specific server-side rendering, but that’s fine for a portfolio. If this were a SaaS application requiring personalization, I’d need a different approach.

Technical Challenges

Several interesting problems emerged during development:

• SSE buffering logic — Implementing proper handling for partial JSON chunks across multiple Server-Sent Events
• Astro scoped CSS — Working around limitations with Tailwind’s group-hover utilities for complex interactions
• Cumulative layout shift — Eliminating CLS entirely with the media="print" font loading trick

The Results

After all the optimization work, here’s what I achieved:

Performance Metrics

Bundle Size

These aren’t just vanity metrics—they translate to a site that loads instantly, responds immediately, and works beautifully even on slow connections.

What’s Next

Future enhancements include:

• Service Worker for offline support
• Blog pagination as content grows
• Image optimization pipeline (WebP/AVIF conversion)
• Real-time analytics via Cloudflare Analytics Engine

Final Thoughts

This website demonstrates what modern web development can achieve when you prioritize performance and user experience. By choosing edge-first architecture, AI integration, and static-first with selective interactivity, I’ve created a platform that loads in under a second globally while showcasing my skills through implementation, not just claims.

The web is moving toward the edge, toward AI-enhanced experiences, and toward leaner architectures. This site embraces that future.

Tech Stack: Astro 5 • React 19 • Tailwind v4 • TypeScript • Cloudflare Pages • Functions • Workers AI • KV Storage • OpenRouter (Claude 3.5 Haiku) • AI Gateway • Turnstile

Want to learn more? The AI chat assistant can answer questions about the architecture, or check the Build Info modal to see the exact commit powering this site.