Introduction
Pendant des années, le codage manuel d'un site web était la référence pour les développeurs qui souhaitaient un contrôle total sur chaque ligne de HTML, CSS et JavaScript. Cela offrait une flexibilité inégalée et une compréhension approfondie de la base de code. Mais à mesure que les sites web grandissent – plus de pages, plus de contenu, plus de complexité – cette approche artisanale peut devenir un cauchemar de maintenance. On se retrouve à copier-coller des barres de navigation, à mettre à jour des pieds de page dans des dizaines de fichiers, et à optimiser manuellement les ressources pour les performances.
C'est exactement la situation dans laquelle se trouvait l'auteur de l'article How-To Geek. Son site web, dont la dernière refonte datait d'environ 2018, était passé de six ou sept livres à bien plus. Le bricolage et les ajouts manuels n'étaient plus tenables. La solution ? Reconstruire tout le site avec Astro, un générateur de site statique moderne qui promet vitesse, simplicité et une meilleure expérience développeur.
Dans cet article, nous allons décortiquer ce parcours de migration, explorer les décisions techniques qui le sous-tendent, et vous montrer comment appliquer les mêmes principes à vos propres projets. Que vous gériez un blog personnel, un portfolio ou un site de documentation, les leçons ici sont directement applicables.
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.
L'expérience développeur : pourquoi Astro gagne
Au-delà des performances, l'expérience développeur en travaillant avec Astro est une raison majeure de migrer. Voici quelques aspects que l'auteur de How-To Geek a probablement appréciés.
Remplacement à chaud des modules (HMR)
Lorsque vous développez en local, le serveur de développement d'Astro fournit un retour instantané. Modifiez un composant, et le navigateur se met à jour sans rechargement complet de la page. C'est un énorme gain de productivité par rapport au rechargement manuel du navigateur après chaque modification.
Écosystème d'intégrations
Astro dispose d'un écosystème croissant d'intégrations pour les outils populaires :
-Tailwind CSS: Pour un style utilitaire. -React, Vue, Svelte: Utilisez les composants de votre framework préféré dans Astro. -MDX: Intégrez des composants React directement dans Markdown. -Optimisation d'images: Redimensionnement et conversion de format automatiques. -Flux RSS: Générez des flux RSS à partir de vos collections de contenu.
Cela signifie que vous n'êtes pas enfermé dans un seul framework. Vous pouvez utiliser le meilleur outil pour chaque tâche.
Prise en charge de TypeScript
Astro offre une prise en charge de premier ordre pour TypeScript. Vous pouvez définir des interfaces de props pour vos composants, ce qui détecte les erreurs au moment de la construction plutôt qu'à l'exécution.
---
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>
Cela permet de détecter les erreurs de type tôt et rend votre code plus maintenable.
Pièges courants et comment les éviter
Migrer d'un site codé à la main vers Astro est généralement fluide, mais il y a quelques pièges courants à surveiller.
1. Surappliquer l'architecture en composants
Il est tentant de créer un composant pour tout, même pour un simple paragraphe. Mais cela peut entraîner une complexité inutile. Commencez par les éléments les plus répétitifs (mise en page, navigation, cartes) et ne créez des composants que lorsque vous voyez un motif se répéter trois fois ou plus.
2. Ignorer le processus de construction
Astro génère un site statique, mais vous devez quand même configurer le processus de construction. Assurez-vous que votre astro.config.mjs inclut la bonne URL site pour le sitemap, et que vos paramètres d'optimisation d'images correspondent à vos besoins.
3. Ne pas utiliser les collections de contenu pour les données structurées
Si vous avez une liste d'éléments (livres, articles de blog, pièces de portfolio), utilisez les collections de contenu. Elles offrent la sécurité de type, la pagination automatique et un filtrage facile. Énumérer manuellement des éléments dans un composant est un pas en arrière.
4. Oublier les pages 404
Les sites codés à la main ont souvent une page 404 personnalisée. Dans Astro, vous créez un fichier 404.astro dans src/pages/. Il sera servi automatiquement pour toute route qui n'existe pas.
---
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>
Résultats concrets : ce que l'auteur a accompli
L'article How-To Geek offre un regard franc sur le processus de migration. L'auteur n'a pas seulement reconstruit le site, il a également amélioré la structure du contenu, ajouté de nouvelles fonctionnalités et optimisé les performances.
Conclusion : Astro est-il adapté à votre site codé à la main ?
Si vous gérez un site web codé à la main qui a dépassé quelques pages, migrer vers Astro est probablement une décision judicieuse. Les avantages sont clairs :
-Développement plus rapide: Les composants réutilisables et le contenu Markdown réduisent le travail répétitif. -Meilleures performances: Zéro JavaScript par défaut conduit à des pages ultra-rapides. -SEO amélioré: Les sitemaps automatiques, les données structurées et les images optimisées boostent le classement dans les moteurs de recherche. -Maintenance facilitée : Mettez à jour un composant une fois, et il change partout.
Le processus de migration lui-même est simple. Commencez par configurer un nouveau projet Astro, extrayez votre mise en page dans un composant, puis convertissez vos pages en fichiers Markdown ou Astro. Utilisez les collections de contenu pour les données structurées, et profitez de l'écosystème d'intégrations pour les images, le SEO, etc.
Astro n'est pas seulement un outil, c'est une philosophie. Il respecte le savoir-faire des sites codés à la main tout en offrant l'automatisation et l'évolutivité exigées par le développement web moderne. Si vous êtes prêt à sortir du cycle du copier-coller, essayez Astro.
