How I Finally Stopped Copy-Pasting Headers Across 200 Pages

— and migrated everything to Astro in under 30 minutes

December 05, 2025 • Mike

If you’re like me, you’ve been building raw HTML/CSS sites for years because you love the speed, the perfect Lighthouse scores, and total control. But updating the navigation on 50+ pages? Pure pain.

2025 finally delivered the perfect solution: Astro + modern AI IDEs. Here’s exactly how I converted all my sites (including MikesBlogDesign) in a single weekend.

Bottom line up front: Astro lets you keep writing plain HTML/CSS while giving you reusable components. It feels exactly like your old workflow — but now one change updates every page instantly.

Step 0 – Create a fresh Astro project (2 minutes)

npm create astro@latest my-new-site
# Choose:
# • "Empty" template
# • Yes to TypeScript
# • Yes to install dependencies
cd my-new-site
npm run dev

Step 2 – Just drop in your existing HTML (this is the magic)

Take any of your current pages, rename to .astro, and put it in src/pages/. Astro runs it exactly as HTML.

Step 3 – Extract Header & Footer once and never copy-paste again

Create src/components/Header.astro and Footer.astro, then replace the old HTML with:

<Header />
<Footer />

Use Cursor or Windsurf and say: “Replace header/footer HTML in all pages with components” → done in 15 seconds.

Optional: The 2-line BaseLayout that makes every page clean

<BaseLayout title="About">
  <main>...your unique content only...</main>
</BaseLayout>

Build & deploy – still 100% static

npm run build

Deploy the dist/ folder anywhere (Netlify, Cloudflare Pages, GitHub Pages) — same as always.

Want a blog with zero database?

Add MDX in 30 seconds and drop .md files into src/content/blog/. I now write posts in Markdown instead of hand-coding HTML tables.

Result: Same blazing-fast static sites I’ve always loved.
But now I can add a new nav link and every single page updates instantly.
Life-changing.

Try it right now

Pick one of your existing sites. Follow the steps above. You’ll be finished before dinner — and you’ll never go back.

Happy building,
Mike