How I Finally Escaped Copy-Paste Hell

The exact 30-minute Astro migration I used on every single one of my sites

December 05, 2025 • Mike

Result: Same perfect Lighthouse 100 scores • Same raw HTML/CSS control • But now one header change updates 300 pages instantly.

Step 0 – Create the project (2 minutes)

npm create astro@latest mikesblogdesign-new
# Choose:
# • Empty project
# • Yes to TypeScript
# • Yes to install dependencies
cd mikesblogdesign-new
npm run dev

Step 1 – Drop in your existing HTML (literally)

Just copy any of your current pages and rename to .astro:

<!-- src/pages/index.astro -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>MikesBlogDesign</title>
  <link rel="stylesheet" href="/styles/global.css" />
</head>
<body>
  <!-- Your exact same header you've been copy-pasting for years -->
  <header>...</header>
  <main><h1>Home</h1>...</main>
  <footer>...</footer>
</body>
</html>

Step 2 – Extract Header & Footer once (the life-changing part)

src/components/Header.astro

---
--- 
<header>
  <nav>
    <a href="/">Home</a>
    <a href="/category/artificial-intelligence/">AI</a>
    <a href="/category/productivity/">Productivity</a>
    <a href="/category/health/">Health</a>
    <a href="/about/">About</a>
  </nav>
</header>

src/components/Footer.astro

---
---
<footer>
  <p>© 2025 MikesBlogDesign • Hand-crafted with ♥ and Astro</p>
</footer>

Step 3 – Replace the old copy-pasted code on every page

---
// src/pages/index.astro (and every other page)
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Home • MikesBlogDesign</title>
  <link rel="stylesheet" href="/styles/global.css" />
</head>
<body>
  <Header />

  <main>
    <h1>Welcome back</h1>
    <!-- Only unique content here from now on -->
  </main>

  <Footer />
</body>
</html>

Pro tip: Open Cursor → select all .astro files → type “replace the raw header and footer HTML with

and

” → done in 15 seconds across 200 files.

Step 4 – (Optional but recommended) Create a BaseLayout

src/layouts/BaseLayout.astro

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
export interface Props {
  title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>{title} • MikesBlogDesign</title>
  <link rel="stylesheet" href="/styles/global.css" />
</head>
<body>
  <Header />
  <slot />   <!-- Page content goes here -->
  <Footer />
</body>
</html>

Now every page is tiny and beautiful:

---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="About">
  <main>
    <h1>About Mike</h1>
    <p>I used to update 150 pages manually...</p>
  </main>
</BaseLayout>

Step 5 – Build & deploy (still pure static)

npm run build

The dist/ folder is 100% plain HTML/CSS/JS — deploy anywhere exactly like you always have.

Bonus: Zero-database blog in 60 seconds

npm install @astrojs/mdx

# astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [mdx()]
});

Then just drop Markdown files:

---
title: "Why Astro is Perfect in 2025"
date: 2025-12-05
---
I finally stopped copy-pasting headers forever...

That’s it.
You now have the speed and control of hand-written HTML with the maintainability of a modern framework.
Go rebuild one site tonight — you’ll be done in 30 minutes and smiling the whole time.

Happy building,
Mike