Eleventy (11ty)

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

Eleventy, souvent ecrit 11ty, est un static site generator base sur JavaScript. Il prend un dossier de fichiers de contenu, comme des documents Markdown, des pages HTML et des gabarits, et les transforme en pages HTML statiques pretes a etre servies depuis n'importe quel serveur web ou reseau de diffusion de contenu. Eleventy s'execute entierement au moment du build, sur votre machine ou dans une chaine d'integration continue. Le resultat est du HTML et du CSS pur, et du JavaScript seulement si vous l'ajoutez vous-meme. Base sur Node.js, il n'impose aucun framework frontend et ne vous enferme pas dans un seul langage de gabarit.

Qu'est-ce qu'un static site generator?

Un static site generator produit un site complet a l'avance au lieu d'assembler chaque page a chaque requete. Dans une pile dynamique classique, un serveur execute du code et interroge une base de donnees a chaque chargement de page. Avec un static site generator, tout ce travail a lieu une seule fois, pendant le build, et le resultat est un ensemble de fichiers HTML termines. Il n'y a pas de base de donnees a interroger ni de rendu serveur a attendre, et la surface d'attaque est tres reduite. Les fichiers statiques se mettent aussi tres bien en cache a la peripherie, si bien que ces sites obtiennent souvent d'excellents scores avec les outils de performance et de Core Web Vitals.

Comment fonctionne Eleventy: la cascade de donnees

L'idee centrale d'Eleventy est la cascade de donnees. Chaque page peut recevoir des donnees de plusieurs sources qu'Eleventy fusionne dans un ordre de priorite defini: le front matter d'un gabarit, des fichiers de donnees JSON ou JavaScript, des valeurs calculees au build et des fichiers de donnees au niveau d'un dossier. Les sources prioritaires remplacent les autres. Pendant le build, Eleventy lit chaque fichier d'entree, resout ses donnees via la cascade, execute le moteur de gabarit choisi et ecrit le resultat dans un dossier de sortie nomme _site par defaut.

Langages de gabarit pris en charge

L'une des grandes forces d'Eleventy est la prise en charge de nombreux langages de gabarit, que vous pouvez combiner dans un meme projet.

• Markdown pour le contenu long comme les articles et la documentation.
• Nunjucks et Liquid pour les layouts, les boucles et les conditions.
• HTML pour les pages sans aucune logique de gabarit.
• JavaScript et WebC pour un controle programmatique complet.

Philosophie zero configuration

Eleventy fonctionne sans configuration. Pointez-le vers un dossier de fichiers et il genere un site. A mesure que le projet grandit, vous ajoutez un unique fichier de configuration en JavaScript pur, appele par convention .eleventy.js. Vous y enregistrez des shortcodes, des filtres, des plugins, des collections et des regles pour les fichiers statiques. Vous n'introduisez de la complexite que lorsque votre projet en a reellement besoin.

Collections et pagination

Les collections regroupent le contenu lie. Tout ensemble de pages partageant une etiquette, comme toutes celles marquees blog, devient automatiquement une collection sur laquelle vous pouvez iterer pour construire des pages d'index, des menus de navigation et des flux. La pagination decoupe une grande collection en plusieurs pages et peut generer une page par element d'un jeu de donnees.

Pourquoi choisir Eleventy

Les developpeurs choisissent Eleventy quand ils veulent de la rapidite et du controle sans le poids d'un framework frontend complet. Comme aucun runtime cote client n'est livre par defaut, les pages sont legeres: pas d'etape d'hydratation ni de gros bundle JavaScript. Le modele mental est simple: contenu plus gabarits plus donnees egale HTML. Pour les sites orientes contenu, cela se traduit par des builds plus rapides et moins de maintenance.

Eleventy face aux autres outils

Eleventy est un static site generator pur, alors que certaines alternatives embarquent un framework client ou un runtime serveur.

Hugo est ecrit en Go et reconnu pour ses builds tres rapides. Next.js et Gatsby reposent sur React et conviennent pour une experience d'application monopage. Astro se rapproche d'Eleventy mais ajoute un modele de composants avec hydratation partielle. Le trait distinctif d'Eleventy est le minimalisme.

Cas d'usage typiques

Eleventy convient au contenu ecrit une fois et lu souvent: blogs personnels et d'entreprise, documentation technique, pages produit et marketing, changelogs, portfolios et bases de connaissances. Tout cela se livre sous forme de fichiers statiques vers un hebergeur ou un CDN, sans application en cours d'execution a maintenir.

Avantages de performance

La sortie statique est le fondement de la performance d'Eleventy. Le HTML pre-rendu peut etre servi instantanement depuis un cache proche du visiteur, ce qui reduit le time to first byte et favorise le Largest Contentful Paint. Comme aucun JavaScript de framework n'est charge par defaut, le navigateur a peu a faire. Un generateur rapide n'est toutefois qu'un point de depart: la vitesse reelle depend encore de la taille des images, des scripts tiers et de l'hebergement, il est donc prudent de mesurer un site genere dans des conditions realistes, en verifiant les Core Web Vitals et en menant des tests de charge.

Premiers pas

Comme Eleventy s'execute sur Node.js, vous commencez par l'installer dans un projet avec un gestionnaire de paquets. Vous creez ensuite un dossier de contenu, ajoutez un fichier de configuration facultatif et lancez la commande de build. Eleventy inclut aussi un serveur de developpement avec rechargement automatique, pour previsualiser vos modifications en local.

Limites a connaitre

Eleventy n'est pas l'outil adapte a tous les projets. Un contenu qui doit changer a chaque requete, comme un tableau de bord personnalise, necessite un backend dynamique ou du code cote client. Les sites tres volumineux peuvent avoir des builds longs, meme si les builds incrementaux aident. Enfin, Eleventy suppose une certaine aisance avec l'ecosysteme Node.js.

FAQ sur Eleventy

Eleventy est-il gratuit?

Oui. Eleventy est open source et gratuit, y compris pour les projets commerciaux. Vous l'installez comme paquet Node.js et l'executez en local ou dans une chaine de build sans frais.

Faut-il connaitre React pour utiliser Eleventy?

Non. Eleventy n'utilise ni React ni aucun framework client. Vous travaillez avec des langages de gabarit comme Markdown, Nunjucks et Liquid, et vous n'ajoutez du JavaScript que la ou une fonctionnalite l'exige.

Quelle est la difference entre Eleventy et WordPress?

WordPress genere les pages dynamiquement depuis une base de donnees a chaque requete, tandis qu'Eleventy pre-rend chaque page en HTML statique au build. Les sites Eleventy n'ont pas de base de donnees a maintenir, mais les changements de contenu exigent un nouveau build.

Eleventy peut-il gerer un grand site?

Eleventy peut construire des sites de milliers de pages. Sur les tres grands sites, les rebuilds complets peuvent prendre du temps, aussi les equipes utilisent des builds incrementaux. Quand la vitesse de build prime, certaines equipes preferent Hugo.

Eleventy ameliore-t-il le SEO?

Eleventy ne classe pas les pages par lui-meme, mais le HTML rapide et propre qu'il produit se laisse facilement explorer et obtient souvent de bons Core Web Vitals. Un bon contenu et des metadonnees correctes restent decisifs.

En quoi Eleventy differe-t-il de Next.js?

Next.js est un framework React capable de rendre cote serveur et qui livre un runtime JavaScript au navigateur. Eleventy est un static site generator pur, sans framework client par defaut. Choisissez Eleventy pour les sites orientes contenu et Next.js pour une application React riche.