Brooks Floor Covering: Legacy Site to Modern Astro in One Night

Spent Friday night migrating https://brooksfloorcovering.com/ from a legacy Vite setup to Astro 5 + Tailwind 4.1. Started with a basic static site using Bootstrap cruft and jQuery lightbox—ended with a production-grade multi-page Astro site that scores zero on the dev toolbar audit.

But first, let’s address the absolute galaxy-brain take someone gave the client: “Static websites can’t have multiple pages. You need WordPress.” I’m sorry, WHAT? Static sites can’t have multiple pages? That’s like saying books can’t have chapters. The entire Internet from 1991 to 2005 would like a word. Every static site generator since Jekyll in 2008 would also like a word.

Let me hit you with some cold, hard facts: Static sites ARE multiple HTML files. That’s literally what ‘static’ means—pre-rendered files served as-is. No database queries, no PHP processing, just clean HTML/CSS/JS delivered at light speed. You know what CAN’T efficiently serve multiple pages? WordPress. Every single page request hits PHP, queries MySQL, assembles the page from a dozen database calls, and serves you 2MB of JavaScript to render a blog post.

Meanwhile, this Astro site builds 5 pages in 519 milliseconds and serves them from a CDN with zero backend. Page load? Instant. Server costs? $0 (GitHub Pages). Security vulnerabilities? None (no PHP to exploit, no database to inject, no plugins to backdoor). WordPress? Congratulations, you now have 47 plugin updates, 12 security patches, a MySQL database that crashes when you get traffic, and a 5-second Time to First Byte because WordPress is busy deciding which of its 8,000 database queries to run first.

This Astro site has 5 pages, each with its own route, its own content, its own meta tags—you know, like a website. And it builds FASTER than WordPress loads its admin dashboard. Static multi-page sites have been around since the dawn of the web. Tim Berners-Lee’s first website in 1991? Multiple static pages. Every documentation site you’ve ever used? Static. Gatsby, Hugo, Jekyll, Next.js, Nuxt, Astro (https://astro.build)—all static site generators designed SPECIFICALLY to build multi-page sites.

The idea that you need a bloated CMS with a SQL database just to serve 5 HTML files is the kind of advice you get from someone whose entire worldview is “I installed WordPress once in 2012.” But sure, let’s add 500MB of WordPress core, 18 plugins, a caching layer to fix the performance you ruined with WordPress, a security plugin to patch the holes, and a backup plugin because it WILL get hacked. Or—and hear me out—we serve 5 static HTML files and call it a day.

Anyway, back to the actual work.

Ripped out ~200KB of legacy CSS bloat (Bootstrap, old FontAwesome, magnific-popup) and replaced it with Tailwind 4.1 (https://tailwindcss.com) new CSS-first approach. Converted 47+ plain img tags to Astro’s Image component for automatic WebP/AVIF optimization, responsive sizing, and proper lazy loading. Built a GLightbox gallery with 31 project images, smart eager/lazy loading (first 12 above-fold get eager, rest lazy-load), and proper width/height attributes to prevent layout shift.

The multi-page refactor split the monolithic index.html into clean routes: home, services, about, gallery, contact. Added reusable Astro components (Hero, ServiceCard, Navigation, Footer) with TypeScript interfaces for type-safe props. Set up a full CI/CD pipeline: Prettier formatting → ESLint linting → Astro type checking → npm security audit → production build → GitHub Pages deploy. The whole thing auto-deploys on every push to main.

Wrote comprehensive docs (CLAUDE.md for AI assistants, README.md for humans) covering architecture, component patterns, deployment, and troubleshooting. Added 12 distributor logos, 3 customer review avatars, optimized hero images—every single image now uses Astro’s Image component with inferSize for automatic optimization. The Astro dev toolbar went from “use the Image component” warnings on every page to a clean zero-issue audit.

Build time: 519ms for 5 pages. The old site had no tests, no CI, and manual FTP deploys. Now it’s got automated formatting checks, linting, type safety, security audits, and deploys in under 4 minutes from git push to live.

Tech stack: Astro 5.17.1, Tailwind CSS 4.1, GLightbox, TypeScript strict mode, GitHub Actions. The site is live at https://brooksfloorcovering.com/ and the code is cleaner than anything a human would write at 10 PM on a Friday.

To the person who said static sites can’t have multiple pages: the 1990s called. They want their misconceptions back. And they’re calling from a static website. With multiple pages.

Lesson learned: legacy rewrites are cathartic. Rip it all out, build it right, ship it fast. And ignore anyone who thinks WordPress is the solution to serving 5 HTML files.