Eleventy (11ty)

Qu'est-ce qu'Eleventy (11ty) ?

Eleventy (11ty) est un générateur de sites statiques en JavaScript qui s'exécute sur Node.js. Il lit des fichiers de contenu et de gabarit, comme Markdown, Nunjucks ou Liquid, et écrit des fichiers HTML statiques dans un dossier de sortie (_site par défaut) que vous pouvez déposer chez n'importe quel hébergeur ou sur un CDN.

Il appartient à la même famille que Hugo et Astro : le travail se fait au moment du build, le visiteur reçoit donc un fichier déjà prêt plutôt qu'une page assemblée à chaque requête. Pour l'idée générale, voyez la génération de sites statiques (SSG).

Comment fonctionne Eleventy

Eleventy lit un répertoire d'entrée (le répertoire courant par défaut), transforme chaque gabarit en une ou plusieurs pages et les écrit dans le répertoire de sortie. Les layouts encadrent le contenu, et les données de plusieurs sources sont fusionnées avant le rendu de chaque page. Eleventy appelle cela la cascade de données. Quand deux sources définissent la même clé, la plus haute l'emporte. De la plus haute à la plus basse priorité :

• Données calculées (computed data)
• Front matter du gabarit lui-même
• Fichiers de données du gabarit
• Fichiers de données du répertoire, y compris des dossiers parents
• Front matter des layouts
• Données globales définies dans la configuration
• Fichiers de données globaux

La configuration se trouve dans un fichier JavaScript qu'Eleventy repère tout seul, par exemple eleventy.config.js. La variante .mjs est prise en charge depuis Eleventy 3.

Langages de gabarit pris en charge

Eleventy ne vous impose pas un seul langage de gabarit. Sa documentation cite HTML, Markdown, MDX, JavaScript, JSX, TypeScript, WebC, Nunjucks, Liquid, Handlebars, Mustache, EJS, HAML, Pug et Sass, et vous pouvez en ajouter un. Vous pouvez les mélanger dans un projet, ce qui permet de migrer un ancien site gabarit par gabarit.

Collections et pagination

Les collections regroupent le contenu. Si plusieurs pages partagent la même chaîne dans tags du front matter, elles apparaissent ensemble dans collections.<étiquette> ; collections.all contient tout par défaut. Les étiquettes servent uniquement à créer des collections, ce n'est pas une hiérarchie de catégories.

La pagination transforme un gabarit en plusieurs pages. Vous ajoutez un bloc pagination avec une source data, une size et en général un permalink. Avec quatre éléments et une taille de deux, Eleventy écrit deux pages et fournit à chacune ses éléments ainsi que des liens vers la page précédente et la suivante.

Exemple : un petit blog

Placez des articles Markdown dans un dossier posts, donnez à chacun tags: post et un layout, puis ajoutez un gabarit d'index qui parcourt collections.post. Après le build, le dossier de sortie contient un fichier HTML par article et une page de liste. Déposez ce dossier et le site est en ligne. Aucun serveur d'application ne tourne.

Erreurs courantes

• Attendre des fonctions au moment de la requête. Un site généré ne fait pas de rendu serveur : formulaires, recherche, commentaires et connexions demandent un service tiers ou une fonction serverless. Si vous voulez des pages construites à chaque requête, regardez le rendu côté serveur (SSR).
• Traiter les étiquettes comme des catégories. Elles ne créent que des collections, prévoyez donc votre propre taxonomie dans le front matter ou des fichiers de données.
• Être surpris par la priorité de la cascade de données. Une valeur du front matter l'emporte sur celle d'un fichier de données de répertoire, et les données calculées l'emportent sur les deux. Vérifiez l'ordre ci-dessus avant de déboguer une valeur qui ne change pas.
• Réintroduire beaucoup de JavaScript côté client. L'avantage de vitesse vient du peu de script envoyé, mesurez donc avant d'ajouter des bundles.

Eleventy, tests de charge et surveillance

Un site statique servi depuis un CDN s'effondre rarement sous le trafic. Un test de charge de tout le site est donc souvent moins utile que de tester ce qui n'est pas statique : gestionnaires de formulaires, points de recherche et fonctions serverless. Utilisez les tests de charge LoadFocus pour ces points d'accès et la surveillance d'API pour les suivre entre deux versions.

Comme la sortie est du HTML pur, la vitesse dépend surtout des ressources et de l'hébergement. La surveillance de la vitesse des pages suit les scores Lighthouse et les Core Web Vitals dans le temps, et l'article (en anglais) How to monitor Core Web Vitals with alerts and reports décrit la mise en place.

Questions fréquentes sur Eleventy

Eleventy est-il un framework ?

Non. C'est un outil de build qui transforme gabarits et données en fichiers statiques. Il n'embarque aucun runtime front-end, c'est donc à vous de décider d'ajouter ou non du JavaScript côté client.

De quoi ai-je besoin pour exécuter Eleventy ?

De Node.js. La documentation demande la version 18 ou supérieure et recommande les versions paires.

Eleventy peut-il rendre des pages côté serveur à chaque requête ?

La sortie par défaut est du HTML statique construit à l'avance. Pour un rendu à chaque requête, utilisez un framework avec rendu serveur comme Next.js ou Nuxt, ou appelez une fonction serverless depuis vos pages statiques.

Quelle différence entre Eleventy et Hugo ?

Les deux génèrent des sites statiques. Eleventy tourne sur Node.js et se configure en JavaScript avec de nombreux langages de gabarit, alors que Hugo est un programme Go unique avec son propre système de gabarits.

Où héberger un site Eleventy ?

Partout où l'on sert des fichiers statiques : un bucket de stockage derrière un CDN, un service d'hébergement statique ou un simple serveur web. Déposez le contenu du dossier de sortie.