The Exact Code I Used to Rebuild
MikesBlogDesign.com with Astro
December 05, 2025 • Mike
This is the real deal.
Below is every single file you need to turn the current mikesblogdesign.com into a blazing-fast, fully maintainable Astro site — in under 30 minutes.
Step 1 – Create the project
npm create astro@latest mikesblogdesign-astro -- --template minimal
cd mikesblogdesign-astro
npm installStep 2 – Replace these files exactly
astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
export default defineConfig({
site: 'https://mikesblogdesign.com',
integrations: [mdx()],
output: 'static'
});src/styles/global.css → your exact current CSS
/* Exact CSS from mikesblogdesign.com – Dec 2025 */
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background: #0f0f1a; color: #e0e0e0; line-height: 1.7;
}
.container { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; }
header nav { padding: 2rem 0; text-align: center; font-size: 1.1rem; }
header nav a { color: #00d4ff; margin: 0 1.2rem; text-decoration: none; }
h1, h2, h3 { color: #00d4ff; }
h1 { font-size: 2.8rem; margin-bottom: 0.5rem; }
footer { margin-top: 6rem; padding: 3rem 0; text-align: center; color: #666; border-top: 1px solid #333; }
pre { background:#1a1a2e; padding:1.5rem; border-radius:8px; overflow-x:auto; margin:2rem 0; border:1px solid #333; }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>src/layouts/BaseLayout.astro → the magic wrapper
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
export interface Props {
title: string;
description?: string;
}
const { title, description = "Mike's thoughts on AI, productivity, and building fast websites" } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{title} • MikesBlogDesign</title>
<meta name="description" content={description} />
<link rel="stylesheet" href="/styles/global.css" />
</head>
<body>
<Header />
<div class="container"><slot /></div>
<Footer />
</body>
</html>src/pages/index.astro → your new homepage
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="MikesBlogDesign">
<h1>Welcome to the new<br>MikesBlogDesign</h1>
<p>Same 100/100 speed. Zero copy-pasting. Finally.</p>
</BaseLayout>Step 3 – Deploy (30 seconds)
npm run buildUpload the dist/ folder anywhere you host now — done.
That’s literally everything.
Copy → paste → npm run build → upload.
You now have the exact same site you’ve always loved — but finally maintainable.
See you on the other side of copy-paste hell,
Mike