Inleiding
Jarenlang was het met de hand coderen van een website de gouden standaard voor ontwikkelaars die volledige controle over elke regel HTML, CSS en JavaScript wilden. Het bood ongeëvenaarde flexibiliteit en een diepgaand begrip van de codebase. Maar naarmate websites groeien – meer pagina's, meer inhoud, meer complexiteit – kan die handmatige aanpak een onderhouds nachtmerrie worden. Je kopieert en plakt navigatiebalken, werkt voetteksten bij in tientallen bestanden, en optimaliseert handmatig assets voor prestaties.
Dat is precies de situatie waarin de auteur van het How-To Geek artikel zich bevond. Hun website, voor het laatst herontworpen rond 2018, was uitgegroeid van het ondersteunen van zes of zeven boeken naar veel meer. Het handmatig patchen en toevoegen was onhoudbaar geworden. De oplossing? De hele site herbouwen met Astro, een moderne statische site-generator die snelheid, eenvoud en een betere ontwikkelaarservaring belooft.
In dit bericht ontleden we die migratiereis, verkennen we de technische beslissingen erachter, en laten we je zien hoe je dezelfde principes kunt toepassen op je eigen projecten. Of je nu een persoonlijke blog, een portfolio of een documentatiesite onderhoudt, de lessen hier zijn direct toepasbaar.
Enter Astro: The Static Site Generator That Respects Your Code
Astro is a relatively new static site generator that has quickly gained popularity among frontend developers. Its core philosophy is simple: ship zero JavaScript by default, and only load client-side scripts when absolutely necessary. This approach leads to incredibly fast page loads and a smaller carbon footprint.
But what makes Astro particularly appealing for rebuilding a hand-coded website is its component-based architecture. You can create reusable components for headers, footers, cards, and layouts, then compose them into pages. This eliminates the repetitive boilerplate that plagues hand-coded sites.
The Migration Process: Step by Step
Let's walk through the actual steps the author took to rebuild their site with Astro. We'll focus on the technical decisions and code examples that made the transition successful.
Step 1: Setting Up the Astro Project
First, you need to initialize a new Astro project. The official CLI makes this straightforward:
npm create astro@latest my-new-site
During setup, you'll be prompted to choose a template. For a content-heavy site, the "Blog" template is a great starting point. It includes Markdown support, RSS feed generation, and a basic layout.
Once the project is created, you can start customizing the structure. The key folders are:
src/pages/, Each file here becomes a route.src/layouts/, Reusable layout components.src/components/, Smaller UI components.public/, Static assets like images and fonts.
Step 2: Extracting the Layout
In a hand-coded site, every page likely contains the same <header>, <nav>, and <footer> markup. With Astro, you create a single layout component that wraps your page content.
---
// src/layouts/BaseLayout.astro
export interface Props {
title: string;
description?: string;
}
const { title, description } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
{description && <meta name="description" content={description} />}
<link rel="stylesheet" href="/styles/global.css" />
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/blog">Blog</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<slot /> <!-- Page content goes here -->
</main>
<footer>
<p>© 2025 My Site</p>
</footer>
</body>
</html>
Now every page can use this layout with just a few lines:
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="About Me" description="Learn more about the author.">
<h1>About Me</h1>
<p>I'm a frontend developer who loves Astro.</p>
</BaseLayout>
This single change eliminates hundreds of lines of duplicated HTML across the site.
Step 4: Reusable Components for UI Elements
Beyond layouts, Astro components let you encapsulate any UI pattern. For example, a book card component that displays a cover image, title, and description can be reused across multiple pages.
---
// src/components/BookCard.astro
export interface Props {
title: string;
cover: string;
description: string;
url: string;
}
const { title, cover, description, url } = Astro.props;
---
<article class="book-card">
<img src={cover} alt={title} loading="lazy" />
<h3>{title}</h3>
<p>{description}</p>
<a href={url}>Learn More</a>
</article>
<style>
.book-card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1rem;
max-width: 300px;
}
.book-card img {
width: 100%;
height: auto;
border-radius: 4px;
}
</style>
Now you can use this component anywhere:
<BookCard
title="Astro for Beginners"
cover="/images/astro-book.jpg"
description="A comprehensive guide to building fast websites with Astro."
url="/books/astro-for-beginners"
/>
This component-based approach not only saves time but also ensures visual consistency across the site.
Performance Gains: What the Numbers Say
One of the most compelling reasons to migrate to Astro is performance. By shipping zero JavaScript by default, Astro pages load incredibly fast. Let's look at some typical improvements.
SEO and Accessibility Improvements
Rebuilding with Astro also opens the door to better SEO and accessibility practices. Here are some specific improvements you can implement.
Semantic HTML and Structured Data
Astro encourages writing semantic HTML because you're composing components rather than copying and pasting. You can easily add structured data (JSON-LD) to your pages for better search engine understanding.
---
// src/components/SEO.astro
const { title, description, url, image } = Astro.props;
---
"@context": "https://schema.org",
"@type": "WebPage",
"name": title,
"description": description,
"url": url,
"image": image,
})} />
Then include this component in your layout:
<SEO title={title} description={description} url={Astro.url} image="/og-image.jpg" />
Automatic Sitemap Generation
Astro has an official sitemap integration that generates a sitemap.xml file at build time. This is crucial for SEO because it helps search engines discover all your pages.
npm install @astrojs/sitemap
Then add it to your astro.config.mjs:
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://example.com',
integrations: [sitemap()],
});
That's it. Every page in your src/pages/ directory will be included in the sitemap automatically.
De ontwikkelaarservaring: waarom Astro wint
Naast prestaties is de ontwikkelaarservaring van het werken met Astro een belangrijke reden om te migreren. Hier zijn enkele aspecten die de auteur van How-To Geek waarschijnlijk waardeerde.
Hot Module Replacement (HMR)
Wanneer je lokaal ontwikkelt, biedt de dev-server van Astro directe feedback. Verander een component en de browser wordt bijgewerkt zonder een volledige paginaversie. Dit is een enorme productiviteitsboost vergeleken met het handmatig verversen van de browser na elke bewerking.
Integratie-ecosysteem
Astro heeft een groeiend ecosysteem van integraties voor populaire tools:
- Tailwind CSS: Voor utility-first styling.
- React, Vue, Svelte: Gebruik componenten van je favoriete framework binnen Astro.
- MDX: Embed React-componenten direct in Markdown.
- Afbeeldingsoptimalisatie: Automatisch schalen en formaatconversie.
- RSS-feed: Genereer RSS-feeds uit je contentcollecties.
Dit betekent dat je niet vastzit aan één framework. Je kunt het beste gereedschap voor elke taak gebruiken.
TypeScript-ondersteuning
Astro heeft eersteklas TypeScript-ondersteuning. Je kunt props-interfaces definiëren voor je componenten, wat fouten opvangt tijdens de build in plaats van tijdens runtime.
---
interface Props {
title: string;
date: Date;
excerpt: string;
tags: string[];
}
const { title, date, excerpt, tags } = Astro.props;
---
<article>
<h2>{title}</h2>
<time datetime={date.toISOString()}>{date.toLocaleDateString()}</time>
<p>{excerpt}</p>
<ul>
{tags.map(tag => <li>{tag}</li>)}
</ul>
</article>
Dit vangt typefouten vroeg op en maakt je code beter onderhoudbaar.
Veelvoorkomende valkuilen en hoe ze te vermijden
Het migreren van een handgecodeerde site naar Astro verloopt over het algemeen soepel, maar er zijn een paar veelvoorkomende valkuilen om op te letten.
1. Over-engineering van de componentenboom
Het is verleidelijk om een component te maken voor alles, zelfs voor een enkele alinea. Maar dat kan leiden tot onnodige complexiteit. Begin met de meest repetitieve elementen (lay-out, navigatie, kaarten) en maak alleen componenten wanneer je een patroon drie keer of vaker ziet terugkomen.
2. Het buildproces negeren
Astro genereert een statische site, maar je moet nog steeds het buildproces configureren. Zorg ervoor dat je astro.config.mjs de juiste site URL voor de sitemap bevat, en dat je afbeeldingsoptimalisatie-instellingen overeenkomen met je behoeften.
3. Content Collections niet gebruiken voor gestructureerde gegevens
Als je een lijst met items hebt (boeken, blogposts, portfolio-stukken), gebruik dan Content Collections. Ze bieden typeveiligheid, automatische paginering en eenvoudig filteren. Het handmatig vermelden van items in een component is een stap achteruit.
4. Vergeten van 404-pagina's
Handgecodeerde sites hebben vaak een aangepaste 404-pagina. In Astro maak je een 404.astro bestand in src/pages/. Het wordt automatisch weergegeven voor elke route die niet bestaat.
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Page Not Found">
<h1>404</h1>
<p>Sorry, the page you're looking for doesn't exist.</p>
<a href="/">Go back home</a>
</BaseLayout>
Resultaten in de praktijk: wat de auteur bereikte
Het How-To Geek artikel geeft een openhartige blik op het migratieproces. De auteur heeft niet alleen de site herbouwd, maar ook de inhoudsstructuur verbeterd, nieuwe functies toegevoegd en geoptimaliseerd voor prestaties.
Conclusie: Is Astro geschikt voor jouw handgecodeerde site?
Als je een handgecodeerde website onderhoudt die is uitgegroeid tot meer dan een paar pagina's, is migreren naar Astro waarschijnlijk een verstandige zet. De voordelen zijn duidelijk:
- Snellere ontwikkeling: Herbruikbare componenten en Markdown-inhoud verminderen repetitief werk.
- Betere prestaties: Standaard geen JavaScript leidt tot razendsnelle pagina's.
- Verbeterde SEO: Automatische sitemaps, gestructureerde gegevens en geoptimaliseerde afbeeldingen verbeteren de zoekresultaten.
- Gemakkelijker onderhoud: Werk een component eenmaal bij en het verandert overal.
Het migratieproces zelf is eenvoudig. Begin met het opzetten van een nieuw Astro-project, extraheer je lay-out in een component, en converteer vervolgens je pagina's naar Markdown- of Astro-bestanden. Gebruik Content Collections voor gestructureerde gegevens en profiteer van het integratie-ecosysteem voor afbeeldingen, SEO en meer.
Astro is niet zomaar een tool, het is een filosofie. Het respecteert het vakmanschap van handgecodeerde sites, terwijl het de automatisering en schaalbaarheid biedt die moderne webontwikkeling vereist. Als je klaar bent om de kopieer-plakcyclus achter je te laten, probeer Astro dan eens.
