Pourquoi migrer un site de données vers Astro et GitHub Pages ? Retour d'expérience 2026

1. Contexte : pourquoi migrer ?

Avant la migration, le site iana-data.org tournait sur un CMS traditionnel (Joomla) hébergé sur un serveur mutualisé OVH. Les problématiques rencontrées :

• Performance médiocre : temps de chargement > 2,5 secondes, score Lighthouse mobile autour de 58.
• Coût d’hébergement : 25 €/mois pour des performances limitées.
• Sécurité : mises à jour fréquentes du CMS et des extensions.
• Flexibilité limitée : difficile d’intégrer des composants modernes (graphiques interactifs, visualisations data).
• Versionnement : la base de données rendait le workflow Git complexe.

2. Pourquoi Astro ? Le framework statique nouvelle génération

Astro se distingue des autres frameworks (Next.js, Hugo, Gatsby) par son approche unique : l’islands architecture.

Ce que nous avons apprécié

Extrait de la configuration Astro

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

export default defineConfig({
  site: 'https://iana-data.org',
  integrations: [mdx(), sitemap()],
  build: {
    assets: 'assets'
  }
});

3. Pourquoi GitHub Pages ? Un hébergement gratuit et robuste

GitHub Pages a été choisi pour trois raisons principales :

• Gratuit : pour un site public open source ou à but non commercial, l’hébergement ne coûte rien. (Pour un site d’entreprise, GitHub Pro à 4 $/mois suffit.)
• CDN intégré : les pages sont servies depuis un réseau mondial de serveurs GitHub.
• Intégration CI/CD : un simple git push déclenche la construction et le déploiement via GitHub Actions.

Workflow de déploiement

# .github/workflows/deploy.yml
name: Deploy Astro site to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/deploy-pages@v4

4. Les gains mesurés (performances, SEO, coûts)

Performances techniques

SEO

• Indexation : les pages HTML statiques sont plus rapidement crawlées par Google.
• Core Web Vitals : passage en « vert » pour 98 % des URLs.
• Positionnement : +15 % de trafic organique à 3 mois post-migration.

Coûts (annuels)

5. Étapes de la migration

Étape 1 – Export des contenus

Export des articles depuis la base de données Joomla (table content) au format Markdown. Transformation manuelle des images et des liens internes.

Étape 2 – Création du squelette Astro

npm create astro@latest
cd iana-data
npm install @astrojs/mdx @astrojs/sitemap

Étape 3 – Modélisation des articles avec collections de contenus

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const articles = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    updatedDate: z.date().optional(),
    draft: z.boolean().default(false),
    category: z.string(),
    tags: z.array(z.string()),
    introImage: z.string().optional(),
  }),
});

export const collections = { articles };

Étape 4 – Templates et composants

Création d’un layout principal (src/layouts/ArticleLayout.astro) et de composants réutilisables (callouts, tableaux, FAQ accordéon).

Étape 5 – Migration des assets

Conversion de toutes les images au format AVIF via un script Node.js, optimisation manuelle des images clés.

Étape 6 – Configuration de GitHub Pages

Configuration du dépôt, activation de GitHub Pages dans les paramètres (branche gh-pages ou via Actions comme ci-dessus).

Étape 7 – Tests et validation

Vérification des liens, des images, des métadonnées SEO, et des temps de chargement.

6. Points d’attention et pièges à éviter

7. Architecture finale et flux de déploiement

Flux complet :

1. Rédaction des articles en MDX (Markdown + composants) dans src/content/articles/.
2. git push vers la branche main sur GitHub.
3. GitHub Actions exécute npm run build (génère le site statique dans dist/).
4. GitHub Pages déploie le contenu sur son CDN mondial.
5. Cloudflare (optionnel) ajouté devant GitHub Pages pour des règles de cache supplémentaires et une sécurité accrue.

8. Alternatives et cas où Astro n’est pas adapté

Alternatives considérées

Cas où Astro / GitHub Pages n’est pas recommandé

• Application web dynamique (dashboard utilisateur, chat, panier) → préférer Next.js (full-stack) ou une SPA (React/Vue).
• Base de données en écriture (commentaires, compte utilisateur) → nécessite un backend. (Mais on peut intégrer des services externes comme Supabase ou Firebase.)
• Site très volumineux > 10 000 pages : le build peut devenir long. Des solutions de build incrémental ou de cache peuvent aider.

Articles connexes

Pour approfondir les sujets abordés dans cet article :