Building a Portfolio with Astro and Cloudflare Pages
How I set up this site using Astro, Tailwind CSS v4, AlpineJS, and automated deployment to Cloudflare Pages.
#astro#cloudflare#tailwind#alpinejs
Why Astro?
Astro generates fully static HTML by default, which means fast load times, no JavaScript by default, and free hosting on Cloudflare Pages. It’s the right tool for a personal portfolio.
The Stack
- Astro 5 for static site generation
- Tailwind CSS v4 for styling (CSS-first config, no config file)
- AlpineJS for interactivity (theme toggle, mobile menu)
- MDX for content with Zod schemas for type safety
Deployment
GitHub Actions runs astro build on every push to main, then deploys to Cloudflare Pages via wrangler. Pull requests get preview URLs automatically.