Dans cet article, je vais te partager ce qui m'a amené à choisir le générateur de site statique (SSG) Eleventy, plutôt qu'un générateur plus connu comme Hugo, Gatsby, Astro ou Jekyll, pour créer mon blog.
Remarque : je ne prétends nullement qu'Eleventy est meilleur que les autres SSG. Ce serait comme dire qu'une pomme est meilleure qu'une poire, une fraise, une cerise ou un abricot. Chaque outil a ses caractéristiques propres, et chaque utilisateur a ses critères de choix.
Important
Ce qui compte le plus, d'être clair sur les critères les plus importants pour soi, et de trouver l'outil qui correspond le mieux. C'est pourquoi je vais te présenter mes propres critères, et comment Eleventy y répond.
Les critères qui m'ont fait choisir Eleventy
Mes critères sont orientés par rapport aux frameworks et langages que je maîtrise déjà, et par mon attrait naturel pour la simplicité et la légèreté. Je voulais donc un SSG :
Qui nécessite peu de nouvelles choses à apprendre. Étant plutôt spécialisé en ASP.Net / Blazor pour le dev web, je me débrouille bien en HTML / CSS / JS "vanilla", mais je ne maîtrise pas les frameworks web classiques Angular, React, Vue et Svelte, et je n'ai pas le temps de les apprendre.
Avec Eleventy, j'ai juste eu à apprendre le langage de template Nunjucks, ce qui a été très rapide. Probablement 100 fois plus rapide que si j'avais dû apprendre React par exemple.
Avec un environnement technique assez léger, c'est-à-dire peu de choses à installer.
Eleventy s'appuie sur Node.js et ne demande aucune autre installation particulière. Il fournit son propre serveur web léger. Il faut donc juste savoir initialiser un projet Node et connaître les rudiments de npm et du fichier package.json pour générer le site et lancer le serveur local. Mais la doc nous guide pour cela.
Qui permet d'écrire des articles de blog en Markdown.
Eleventy s'appuie sur le moteur markdown-it pour prendre en charge le Markdown. Il s'agit sans doute du plus populaire et il s'accompagne d'extensions pour prendre en charge des éléments de syntaxe avancés tels que les blocs d'alerte GitHub, les ancres, etc. Que demander de plus ?
Qui permet de personnaliser complètement son site.
Eleventy est très polyvalent et souple et permet de personnaliser tout ce qu'on veut. Pour aller plus vite, il est possible de s'inspirer de modèles proches de ce qu'on souhaite faire. Cependant, pour mon blog, j'ai eu du mal à trouver un tel modèle, et je me suis donc inspiré du modèle de base "Eleventy base blog", dont je n'ai au final pas gardé grand-chose 😊
Rapide (je parle de la vitesse de génération du site à partir des fichiers templates, CSS et images). En effet, comme on est amené à générer le site souvent, il est important que cette opération soit rapide.
Eleventy est le champion de la vitesse, grâce à sa légèreté. Contrairement à d'autres outils tels que Vite, Webpack, etc., il fait moins de choses, et cela va donc bien plus vite.
Assez documenté.
La documentation d'Eleventy est le seul point que je trouve assez médiocre, sans toutefois être carrément mauvais. Je vais y revenir juste après...
Suffisamment populaire pour que sa pérennité soit assurée.
Eleventy n'est pas le plus populaire des SSG si l'on regarde par exemple le nombre d'étoiles sur GitHub. Il a actuellement 18k étoiles contre par exemple 51k pour Astro et 56k pour Gatsby. Mais il est clairement assez populaire et maintenant bien établi pour avoir de très bonnes chances de perdurer.
Les points à améliorer
Je suis vraiment super satisfait d'Eleventy, et je n'ai quasiment rien à redire sur l'outil en lui-même. En revanche, je vois 3 améliorations importantes à faire sur le site d'Eleventy, qui pourraient à mon avis beaucoup augmenter le niveau d'adoption de l'outil :
Améliorer la doc, qui n'est actuellement pas assez contextualisée.
Beaucoup de techniques sont présentées sans leur contexte d'utilisation, avec des exemples trop basiques. Si bien que lorsqu'on débute, il est difficile de savoir dans quels cas utiliser telle ou telle technique. J'ai dû faire beaucoup d'essais par moi-même pour comprendre certaines notions en profondeur et savoir les utiliser à bon escient. Mais du coup, j'ai pas mal de choses à partager sur mon blog 😉!
Remarque : étant formateur, je sais que je mets la barre haut sur la doc, car c'est ma spécialité. J'ai écrit de milliers de pages de docs et d'articles et créé des centaines de vidéos, la plupart à destination de débutants. Alors forcément, je suis affûté et exigeant sur ce sujet...
Faciliter la sélection d'un modèle de projets. En effet, la page Starter Projects qui la liste des 170 modèles de projets disponibles à ce jour n'offre aucun moyen de filtrer la liste, et la description des modèles est très succincte. Il est très difficile de trouver un modèle correspondant à ses besoins. Sans compter que certains modèles sont obsolètes, car créés avec d'anciennes versions d'Eleventy...
Améliorer le modèle de base officiel. Je trouve que le modèle "Eleventy Base Blog" fourni par Zach Leaderman est de qualité plutôt moyenne :
- L'implémentation de la liste des articles sous forme de template partiel est à mon sens un très mauvais choix, qui rend le code compliqué et non modulaire, en plus de donner un très mauvais exemple d'utilisation.
- les styles sont rassemblés dans un fichier index.css, alors qu'il serait préférable de les lier aux différents layouts pour les isoler et rendre le code plus modulaire et facile à maintenir.
Dans quels cas utiliser Eleventy ?
En synthèse, si tu te demandes encore si Eleventy serait adapté à ton besoin, voici les éléments à considérer.
Tout d'abord, il est important de bien comprendre les caractéristiques d'un site statique par rapport à un site dynamique.
Un générateur de site statique est une excellente solution si...
Tu veux une solution entièrement gratuite (y compris l'hébergement si tu utilises par exemple GitHub Pages).
Tu veux créer un site sécurisé, mais l'implémentation des techniques de sécurité te gonfle. Tu veux donc une solution efficace, mais facile à mettre en œuvre.
Tu as peu de données client à stocker côté serveur, et tu es prêt(e) à utiliser des API externes pour cela.
Tu préfères personnaliser ton site directement par le code HTML, CSS et JavaScript, plutôt que par l'intermédiaire de plugins (comme dans WordPress).
Tu veux écrire tes articles de blog en Markdown dans ton éditeur préféré (par exemple Obsidian)
Tu aimes avoir la maîtrise complète de ton site (structure, apparence, performances, SEO...), sans complexité superflue.
Tu veux pouvoir créer ton site en local et le déployer facilement sur un serveur en changeant son URL de base.
Note
Pour plus de détails sur les sites statiques et leurs différences avec les sites dynamiques, je t'invite à jeter un œil à cet article.
Si tu es décidé(e) à créer un site statique, pourquoi choisir Eleventy plutôt qu'un autre SSG ?
Eleventy est LE SSG qu'il te faut si...
Tu apprécies particulièrement la légèreté et la simplicité, et tu ne veux pas avoir à installer et à maîtriser des tas d'outils.
Tu as besoin d'un SSG rapide (je parle ici de la vitesse de génération des pages du site à partir des fichiers sources), surtout si tu génères ton site souvent.
Tu veux une solution simple et très performante pour gérer tes images et icônes.
Tu ne veux pas dépendre de frameworks JavaScript ou CSS particuliers.
À noter qu'Eleventy permet de générer tous les types de sites statiques énumérés dans mon article précédent :
- Blogs
- Magazines
- Sites de documentation, wikis, base de connaissance
- Sites éducatifs et cours en ligne
- Sites événementiels (conférences, mariages, etc.)
- Sites vitrine (sites d'entreprises, pages de présentation de produits)
- Portfolios et CV en ligne
- ...
Et toi, utilises-tu ou envisages-tu d'utiliser un SSG ? Si oui, quels sont les critères qui guident ton choix ? Dis-moi tout en commentaire.