Construire Un Générateur De Sites Statiques Avec Eleventy Et JAMstack

Le modèle JAMstack propose une manière claire de concevoir des sites rapides, sûrs et faciles à mettre en cache. Les pages sont générées à l’avance, puis distribuées par un CDN, tandis que les fonctionnalités dynamiques passent par des API ou des fonctions serverless. Cette séparation réduit la surface d’attaque et simplifie la mise en production.

Eleventy, aussi appelé 11ty, s’intègre particulièrement bien dans cette approche. Ce générateur de sites statiques fonctionne avec des modèles simples, accepte plusieurs langages de templating et ne force pas l’utilisation d’un framework JavaScript côté navigateur. Il convient donc à un blog, une documentation technique, un portfolio ou un site éditorial.

L’objectif consiste à bâtir une chaîne complète : organiser les contenus, définir les gabarits, produire les fichiers HTML, ajouter les ressources front-end, puis automatiser le déploiement. L’exemple suivant utilise Node.js, Nunjucks et Markdown, mais les principes restent valables avec Liquid, JavaScript ou d’autres moteurs pris en charge par Eleventy.

Comprendre Le Rôle D’Eleventy Dans JAMstack

Dans une architecture JAMstack, le navigateur reçoit généralement des fichiers statiques : HTML, CSS, JavaScript, images et polices. Eleventy transforme des sources comme Markdown et Nunjucks en pages prêtes à servir. Le serveur n’a donc pas besoin de générer une réponse à chaque visite, ce qui améliore souvent le temps de chargement et la capacité à absorber un trafic important.

Le terme JAMstack désigne trois éléments : JavaScript pour les interactions, des API pour les services externes et le balisage généré à l’avance. Un formulaire, une recherche ou une authentification peut appeler un service distant sans transformer le site en application monolithique. Pour choisir une plateforme adaptée à cette architecture, la comparaison des solutions serverless et cloud apporte des repères utiles sur les fonctions à la demande.

Eleventy se distingue par sa faible abstraction. Il n’impose ni arborescence rigide ni système de composants propriétaire. Cette souplesse permet de conserver un projet lisible, adapté aux équipes qui privilégient les standards du Web et un rendu HTML directement exploitable par les moteurs de recherche.

Préparer Le Projet Node.js

Créez un dossier, initialisez un paquet npm et installez Eleventy comme dépendance de développement :

mkdir site-eleventy
cd site-eleventy
npm init -y
npm install --save-dev @11ty/eleventy

Ajoutez ensuite les scripts de développement et de production dans package.json :

{
  "scripts": {
    "start": "eleventy --serve",
    "build": "eleventy"
  }
}

La commande npm run start lance un serveur local avec reconstruction automatique. La commande npm run build génère le site final dans le dossier _site. Ce répertoire contient uniquement les fichiers à publier et peut être exclu du contrôle de version.

Une configuration minimale peut être placée dans .eleventy.js :

module.exports = function (config) {
  return {
    dir: {
      input: "src",
      includes: "_includes",
      output: "_site"
    },
    templateFormats: ["md", "njk", "html"]
  };
};

Cette organisation sépare les contenus, les modèles et les fichiers générés. Elle facilite aussi l’intégration continue, car le serveur de déploiement n’a qu’à installer les dépendances puis exécuter le script de compilation.

Organiser Les Contenus Et Les Gabarits

Créez un fichier src/index.njk pour la page d’accueil et un répertoire src/posts pour les articles Markdown. Un premier contenu peut ressembler à ceci :

---
title: "Première page"
description: "Une page produite avec Eleventy"
layout: "layouts/base.njk"
date: 2025-01-15
tags:
  - articles
---

## Un contenu simple

Eleventy transforme ce fichier en HTML statique.

Le front matter YAML contient les métadonnées utilisées par les modèles et les collections. La propriété layout indique le gabarit à appliquer, tandis que tags permet de regrouper les publications. Les dates servent ensuite à afficher les articles dans l’ordre chronologique.

Placez le fichier src/_includes/layouts/base.njk dans le dossier prévu :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ title }}</title>
  <meta name="description" content="{{ description }}">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <a href="/">Mon site</a>
  </header>
  <main>
    {{ content | safe }}
  </main>
</body>
</html>

Le filtre safe autorise Eleventy à injecter le HTML issu du Markdown. Pour un projet réel, ajoutez une navigation, des données structurées, un lien canonique et une gestion des titres par défaut. Les bonnes pratiques d’intégration front-end peuvent être approfondies dans la zone d’intégration, notamment pour le CSS et les composants interactifs.

Générer Des Collections Et Une Navigation

Les collections permettent de construire une page d’archives sans écrire manuellement la liste des articles. Dans src/index.njk, utilisez la collection associée à l’étiquette :

---
layout: "layouts/base.njk"
title: "Accueil"
---

<h1>Derniers articles</h1>
<ul>
{% for post in collections.articles | reverse %}
  <li>
    <a href="{{ post.url }}">{{ post.data.title }}</a>
    <time datetime="{{ post.date | dateIso }}">
      {{ post.date | readableDate }}
    </time>
  </li>
{% endfor %}
</ul>

Les filtres dateIso et readableDate doivent être déclarés dans .eleventy.js. Cette logique peut aussi être déplacée dans un fichier de données global afin de garder les gabarits concis. Les données globales sont pratiques pour le nom du site, les réseaux sociaux, l’URL canonique ou les informations de navigation.

Pour les images, utilisez des chemins cohérents et vérifiez que les fichiers présents dans src/assets sont copiés vers la sortie. Une configuration typique ajoute la copie des ressources :

module.exports = function (config) {
  config.addPassthroughCopy("src/assets");
  config.addPassthroughCopy("src/css");

  return {
    dir: { input: "src", includes: "_includes", output: "_site" }
  };
};

Cette étape évite que les feuilles de style ou les images disparaissent lors de la compilation. Elle constitue aussi une bonne base pour ajouter une optimisation d’images, une minification CSS ou un traitement JavaScript ciblé.

Ajouter Des Fonctionnalités Dynamiques

Un site statique n’interdit pas les interactions. Un formulaire de contact peut envoyer ses données vers une fonction serverless, une recherche peut interroger une API et un espace privé peut déléguer l’authentification à un fournisseur spécialisé. Le HTML reste pré généré, tandis que les opérations variables sont exécutées uniquement lorsque c’est nécessaire.

Cette architecture réduit les coûts d’infrastructure, mais elle impose de bien définir les frontières entre contenu public et données dynamiques. Les clés secrètes ne doivent jamais être incluses dans les fichiers générés ni dans le code JavaScript livré au navigateur. Utilisez les variables d’environnement du fournisseur de déploiement pour les accès privés.

Une base en mémoire peut également compléter un site JAMstack pour des compteurs, des sessions ou des résultats temporaires. Avant de retenir une solution, consultez cette comparaison Redis Memcached afin d’évaluer la persistance, les structures de données et les performances attendues.

Déployer Et Maintenir Le Site

Le déploiement suit généralement quatre étapes : installer Node.js, récupérer le dépôt, exécuter npm ci, puis lancer npm run build. Le contenu de _site peut ensuite être envoyé vers un hébergeur statique ou un stockage objet distribué par CDN. Cette chaîne s’intègre naturellement à GitHub Actions, GitLab CI ou un autre outil d’intégration continue.

Une configuration de pipeline doit aussi contrôler les liens cassés, le formatage, les tests et les dépendances vulnérables. Ajoutez une commande de validation qui échoue si la génération produit une erreur. Les aperçus de branches sont utiles pour relire une page avant sa publication définitive.

Vérifications Avant La Mise En Ligne

L’exploitation quotidienne reste légère, mais les dépendances doivent être mises à jour régulièrement. Conservez les fichiers sources dans Git, documentez les variables d’environnement et définissez une stratégie de restauration pour les contenus et les données externes.

Éléments À Surveiller Dans Le Temps

Commencez par créer le projet, ajoutez un premier gabarit, puis publiez une page Markdown sur une branche de travail. Exécutez la génération localement, inspectez le HTML produit et automatisez ensuite le déploiement. Cette progression permet de comprendre chaque couche d’Eleventy et d’obtenir rapidement un site statique fiable, rapide et extensible.