Une plongée profonde dans le générateur de site statique d'Eleventy

Mais d'abord, examinons rapidement ce que l'on entend par « site statique », puis ce qu'un générateur fournit. Un site statique est composé de contenu statique - comme dans, le HTML, le CSS, les actifs et tout le contenu sont déjà compilés ensemble avant d'être transmis à un hébergeur de site Web. Ceci est différent d'un site dynamique qui compile ces éléments en interrogeant une base de données au moment de l'exécution (comme WordPress) ou qui extrait le contenu des API côté client (comme les frameworks JavaScript sans rendu côté serveur).

Un générateur de site statique est un environnement et un processeur de construction pour compiler votre contenu en HTML statique. Ils offrent généralement des aides pour fournir une flexibilité dans l'écriture de votre contenu (comme la prise en charge de Markdown) et incluent des méthodes de création de modèles. Ainsi, au lieu d'écrire des pages HTML une par une et de devoir copier et coller les parties répétées, un générateur prendra en charge la décomposition de ces éléments en composants via un certain langage de modèle. Ensuite, le processus de construction du générateur rassemblera tout et produira le code HTML final qui peut être téléchargé sur un hébergeur pour être utilisé comme votre site Web. Selon l'hébergeur que vous utilisez, ce processus de construction peut même être effectué par l'hébergeur.

Il existe de nombreux générateurs de sites statiques disponibles. Vous avez peut-être entendu parler ou même utilisé ceux comme Jekyll, Hugo, Gatsby, Next et Nuxt. Une liste complète est fournie par Jamstack.org.

Qu'est-ce qui différencie Eleventy des autres générateurs de sites statiques ?

Eleventy est exceptionnellement rapide à la fois pendant les builds et dans le navigateur. C'est en grande partie grâce au fait qu'il n'est pas nécessaire de charger un bundle JavaScript côté client pour diffuser du contenu (par rapport à quelque chose comme Gatsby). Le rendu côté serveur n'est même pas un problème ici, puisque la création de la page du système de fichiers est par défaut en HTML statique.

Ce qui rend Eleventy vraiment unique, c'est la possibilité de sélectionner et de mélanger jusqu'à dix langues de modèles différentes :

Le mélange de langues peut se produire dans le même fichier ou entre les mises en page. Par exemple, j'écris souvent mon contenu principal avec Markdown qui alimente une mise en page Nunjucks. Dans certains projets, j'ai trouvé utile de pouvoir boucler certaines données à l'aide de Nunjucks dans le fichier Markdown. Cette capacité à combiner les langues est très puissante et vous permet de concevoir un flux de travail d'écriture et de construction qui fonctionne le mieux pour vous et votre projet.

Eleventy inclut un indicateur --serve qui utilise BrowserSync pour permettre de servir le site localement et avec un rechargement à chaud lors des modifications de fichiers. C'est très pratique et il est bon de le garder à l'esprit si vous ne recherchez pas un générateur de site statique, mais peut-être une mise à niveau à partir d'outils de construction comme Gulp.

Dans le cadre de la configuration zéro, tous les fichiers de votre site peuvent vivre à la racine de votre projet. Pour modifier les répertoires d'entrée et de sortie, vous pouvez créer une configuration Eleventy, qui devrait être un fichier racine appelé .eleventy.js . Voici un extrait rapide montrant comment effectuer cette modification :

 module.exports = function (eleventyConfig) { return { dir: { // default: [site root] input: "src", // default: _site output: "public", }, }; };

Comme indiqué précédemment, le comportement par défaut est la création de pages de système de fichiers, ce qui est généralement très avantageux, en particulier pour démarrer rapidement. Ceci est facilement remplaçable en attribuant un permalink personnalisé et cela peut être fait par fichier, pour un répertoire entier ou dynamiquement pour un ensemble de données. Les liens permanents offrent également un autre super pouvoir que nous explorerons un peu plus tard !

De manière unique, pendant la construction, vous pouvez préparer du contenu, des données et des transformations sur ce contenu et ces données en utilisant JavaScript et en tirant parti des filtres et des codes abrégés (nous en reparlerons plus tard). Encore une fois, tout cela se produit sans ajouter de bundle JavaScript côté client, tout en permettant l'utilisation de JavaScript comme langage de modèle.

Remarque importante : Vous pouvez utiliser Eleventy avec succès avec peu ou pas de connaissances JavaScript.

Contrairement à d'autres SSG comme Gatsby, ou des environnements comme WordPress, la plupart des sites Eleventy ne nécessitent aucun plugin. Certains plugins sont disponibles, mais ils ne sont pas nécessaires pour les fonctionnalités essentielles.

Lorsque vous construisez avec Eleventy, vous pouvez ajouter des fonctionnalités selon vos besoins. En fait, vous pouvez simplement utiliser HTML et ne jamais travailler avec les autres langages de template. Eleventy est aussi complexe que votre projet l'exige !

Comprendre les concepts essentiels d'Eleventy

Passons en revue quelques éléments de terminologie et de concepts qui vous aideront à réussir la création de vos projets Eleventy.

Mises en page et modèles

Vous pouvez penser que ces termes sont interchangeables, mais dans le contexte d'Eleventy, ils ont des significations contextuelles :

• Modèle est le terme générique pour tous les fichiers de contenu.
• Les mises en page sont des modèles spéciaux qui enveloppent d'autres contenus.

Par exemple, le modèle fait référence à tous vos fichiers Markdown, tandis qu'une mise en page peut être un fichier Nunjucks contenant le passe-partout HTML5 et un emplacement pour le contenu du modèle. Nous apprendrons comment faire fonctionner cela dans la section sur le démarrage.

Filtres et codes courts

Ce sont des moyens supplémentaires de modifier la sortie de contenu et de créer des composants de modèle réutilisables. Ils peuvent être utilisés avec les modèles Nunjucks, Liquid, Handlebars et JavaScript. Les filtres et les shortcodes sont définis dans .eleventy.js .

Au-delà des variables et des opérateurs disponibles dans la langue de votre choix, Eleventy a unifié le concept de filtres dans les langues précédemment répertoriées. Les filtres transforment le contenu d'une manière spécifique au type de contenu. Par exemple, vous pouvez créer un filtre destiné aux chaînes pour les mettre en majuscules. Ou vous pouvez avoir un filtre destiné à être utilisé sur des tableaux pour modifier ce qui est renvoyé, comme choisir un élément au hasard. Certains filtres sont fournis par Eleventy, dont quelques-uns que nous utiliserons dans le didacticiel de démarrage.

Les shortcodes permettent de créer des parties de modèle réutilisables et sont capables d'accepter des arguments. Ils peuvent être autonomes ou jumelés, ce qui signifie qu'ils enveloppent le contenu avec une balise de début et de fin.

L'un de mes shortcodes préférés est de rendre l'année en cours - ce qui signifie qu'il n'y a plus d'années de copyright obsolètes dans votre pied de page ! Voici comment créer un shortcode d' year :

 eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

Pour l'utiliser dans un modèle Nunjucks ou Liquid ressemble à ceci : {% year %} .

Vous pouvez consulter les documents Eleventy pour des exemples de codes abrégés appariés.

Collections

Les collections sont des groupes de contenu connexe et sont généralement créées dans frontmatter en définissant des tags . Les options de syntaxe des balises incluent des chaînes uniques, des tableaux sur une seule ligne — ["tagA", "tagB"] — pour les multiples, ou des listes de style YAML pour attribuer plusieurs balises. Par exemple, je peux créer une collection « pages » en ajoutant le frontmatter suivant à tout le contenu que je souhaite inclure dans cette collection :

 --- tags: pages ---

Une fois que vous avez défini une collection, vous pouvez y accéder via le langage de template de votre choix dans l'objet global collections . Pour accéder à notre collection "pages", cela ressemblerait à collections.pages . Cela renvoie un tableau des données de cette collection, et vous pouvez donc effectuer des opérations de tableau comme une boucle dessus, par exemple pour produire une liste de liens ou des fiches d'accroche d'articles. Vous pouvez même supprimer la sortie de fichier normale et utiliser uniquement des collections pour gérer l'affichage des données, ce qui est utile pour gérer le contenu d'un site d'une seule page.

Données personnalisées

Jusqu'à présent, nous avons parlé de la création de contenu sous forme de fichiers, mais Eleventy facilite également la gestion de différentes sources de données. C'est ce qu'on appelle des « données personnalisées » et elles se présentent sous la forme d'exportations de modules JavaScript ou de fichiers JSON dans le répertoire _data .

Les données personnalisées peuvent être utilisées pour :

• Définissez un tableau JSON de base.
• Renvoie les résultats d'une opération de récupération.
• Récupérez et reformatez le contenu d'un CMS sans tête.

Eleventy rend toutes les données de _data disponibles sous une variable correspondant au nom de fichier. Par exemple, si je crée posts.json , je peux y accéder dans mes modèles en tant que posts . En utilisant Nunjucks, voici un exemple de bouclage sur les données des posts :

 {% for post in posts %} {{ post.title }} {% endfor %}

Pagination et création de pages à partir de données

En termes d'Eleventy, la pagination fait référence à l'itération sur un ensemble de données et à la définition d'un modèle pour la sortie de ce "morceau" de données. Cela se fait avec un fichier dédié qui définit la pagination dans frontmatter. Le fichier inclut également la configuration de votre sortie prévue pour les données, ce qui signifie qu'il devient également son propre modèle. Nous pouvons définir une mise en page pour envoyer le contenu et également ajouter des balises pour créer une collection pour faciliter la référence et la flexibilité de la sortie.

Note : Si vous utilisez des données personnalisées pour récupérer du contenu à partir d'un CMS, la pagination est la méthode Eleventy que vous recherchez pour transformer ces données en pages de manière dynamique.

Voici un exemple de référencement des données personnalisées de nos posts que nous supposerons que nous récupérons via une récupération à partir d'un CMS sans tête. Il est important de noter que la size est définie sur 1, ce qui signifie que chaque "morceau de pagination" doit produire une seule page de sortie. Nous utilisons ensuite l' alias pour créer une référence à l'élément actuel dans la boucle de pagination, puis utilisons cette référence dans la définition du permalink et le corps du modèle.

Le fichier qui définit la pagination peut se trouver où vous le souhaitez dans votre répertoire d'entrée. Ma préférence organisationnelle est de créer un répertoire de generate , puis de le nommer de la même manière que la collection qu'il créera. Considérez ce qui suit comme étant src/generate/posts.njk :

 --- pagination: data: posts size: 1 alias: post addAllPagesToCollections: true permalink: "/{{ post.title | slug }}/" tags: posts layout: post templateEngineOverride: njk, md --- {{ post.body | safe }}

Dans ce cas, le permalink attribue la page à sortir directement de la racine du site. Vous pouvez modifier cela pour ajouter un préfixe tel que /posts/{{ post.title | slug }} /posts/{{ post.title | slug }} , par exemple.

De plus, si vous souhaitez que toutes les pages générées soient disponibles dans la collection créée par les balises, vous devez définir addAllPagesToCollections sur true pour inclure plus que le premier élément.

Enfin, si votre contenu arrive en tant que Markdown au lieu de HTML précompilé, vous devrez utiliser le templateEngineOverride . Dans l'extrait d'exemple, je l'ai défini sur njk, md ce qui signifie que le contenu du modèle devra être traité à la fois comme Nunjucks afin de convertir la variable, puis Markdown pour compiler le contenu renvoyé dans la variable.

Si vous vous demandez ce que signifie " safe ", nous allons l'apprendre ensuite !

Comment démarrer avec Eleventy

Très bien, vous êtes donc prêt à lancer votre premier projet Eleventy ! Ce bref didacticiel vous aidera à mettre en place une structure de départ à partir de laquelle vous pourrez continuer à construire. Nous utiliserons les concepts que nous avons déjà appris et ajouterons également quelques nouvelles idées.

La première remarque importante ici est qu'Eleventy est un package étendu, voici donc la commande d'installation :

 npm install @11ty/eleventy

Ensuite, une commodité pratique que j'aime faire est d'ajouter les scripts suivants dans mon package.json :

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

Comme mentionné précédemment, l'indicateur --serve un serveur local via BrowserSync.

Ma préférence est de mettre à jour les répertoires d'entrée/sortie comme nous l'avons déjà vu, il est donc temps de créer du contenu dans src ou le répertoire d'entrée de votre choix.

Afin de préparer notre projet pour qu'il soit plus flexible et évolutif dès le départ, je suggérerais de créer au moins une mise en page contenant le passe-partout HTML5. Les mises en page doivent être définies dans un répertoire directement appelé _includes , qui est l'un des rares répertoires attendus.

Une convention que vous trouverez souvent parmi les débutants est d'appeler cette base mise en page . J'ai une préférence pour en faire un fichier Nunjucks.

Voici un exemple de base.njk :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> </head> <body> <header> <h1>{{ title }}</h1> </header> <main> {{ content | safe }} </main> </body> </html>

Les accolades doubles sont la syntaxe de Nunjucks pour les variables. Ici, nous nous sommes préparés pour une variable de title entrante qui sera bientôt fournie via le front matter. La variable de content est fournie par Eleventy et marque l'emplacement où doit aller tout le contenu non préliminaire entrant. Il est important de noter qu'il est utilisé en conjonction avec le filtre safe fourni qui empêche le code HTML compilé d'être échappé par rapport au rendu.

Il est maintenant temps de créer notre index de site, que nous ajouterons en tant que index.md :

 --- title: Hello Smashing Readers! layout: base.njk --- Thanks for reading — hope you're excited to try Eleventy!

Notez que dans la partie avant, nous avons ajouté notre titre et défini la mise en page.

À ce stade, nous pouvons exécuter notre projet avec le script que nous avons ajouté : npm start . Cela déclenchera BrowserSync pour configurer localhost:8080 (s'il est disponible) mais vous devrez l'ouvrir manuellement dans le navigateur. Consultez cette astuce rapide si vous souhaitez que le navigateur s'ouvre automatiquement.

La dernière étape critique consiste à ajouter une feuille de style. Actuellement, CSS n'est pas reconnu comme un type de fichier automatiquement inclus, nous aurons donc une étape de configuration supplémentaire après avoir créé notre feuille de style.

Vous pouvez ajouter un fichier CSS où vous le souhaitez dans votre répertoire d'entrée, tel que css/style.css . Ensuite, ouvrez .eleventy.js (ou créez-le à la racine du projet si vous n'avez pas fait la personnalisation des entrées/sorties) et ajoutez ce qui suit :

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/"); // - input/output customization if using - };

Tout d'abord, nous ajoutons le répertoire css en tant que "copie de passage", ce qui signifie qu'Eleventy doit l'inclure dans le push vers le répertoire de sortie. Ensuite, nous l'ajoutons également en tant que "cible de surveillance" afin que, lorsque nous apportons des modifications à nos styles lors de l'exécution de notre commande de start , Eleventy déclenche une reconstruction pour mettre à jour notre site local.

Enfin, nous devons nous rappeler d'ajouter le lien vers notre feuille de style dans notre mise en page base :

 <link rel="stylesheet" href="{{ '/css/style.css' | url }}" />

Lorsque nous définissons l'emplacement de la feuille de style, nous la passons à travers le filtre d' url d'Eleventy qui ajustera le chemin relatif du fichier selon les besoins lors de la construction.

Ensuite, créons un type de publication "pages" pour explorer un peu plus l'utilisation des collections et des mises en page. Pour ce faire, ajoutez le répertoire des pages et créez un ou deux fichiers Markdown, comprenant une clé de title avant-matière mais pas de mise en page.

Nous allons utiliser une méthode légèrement différente pour définir la mise en page cette fois - un fichier de répertoire de données . Ce fichier est généralement au format JSON et nous permet d'ajouter des données qui doivent être appliquées à tous les fichiers d'un répertoire, ce qui évite d'avoir à le dupliquer dans les fichiers. Le fichier doit porter le même nom que le répertoire pour lequel il sera utilisé. Créez donc le fichier pages.json et ajoutez le contenu suivant :

 { "layout": "page.njk", "tags": "pages" }

Nous sommes également allés de l'avant et avons défini des balises afin de créer la collection « pages ». Mais la mise en page que nous avons définie n'existe pas encore, alors créez _includes/page.njk et ajoutez ce qui suit :

 --- layout: base.njk --- <article> {{ content | safe }} </article>

Ici, nous utilisons le concept Eleventy de chaînage de mise en page pour pouvoir réutiliser notre modèle base mais aussi ajouter un élément unique pour notre mise en page , qui est le <article> . Cela signifie que tout le contenu de nos pages utilisera à la fois la mise en page et les mises en page de base .

Le chaînage de mise en page réduit la duplication en permettant la réutilisation des passe-partout et des structures de mise en page du site de base.

Maintenant que nous avons créé du contenu pour le type de contenu pages et que nous l'avons défini comme la collection "pages" via les balises, voyons comment nous pouvons accéder à cette collection. Ici, nous utiliserons Nunjucks pour parcourir la collection et produire une liste de liens vers chaque page. Cette boucle sera ajoutée dans notre fichier index.md .

 {% for post in collections.post -%} - [{{ post.data.title }}]({{ post.url }}) {% endfor %}

Nous avons cependant fait quelque chose d'unique, à savoir que l' intérieur de la boucle revient en fait à Markdown pour rendre les liens. Ce n'est pas une méthode obligatoire pour gérer ce scénario, mais cela peut être très pratique ! Parfois, selon la complexité, cela peut ne pas fonctionner. La vraie raison est que le rendu Markdown utilise par défaut le langage de modélisation Liquid , donc si vous utilisez les fonctionnalités de Nunjucks au-delà des boucles de base, vous devrez faire savoir à Eleventy comment traiter le fichier.

Dans la section précédente sur la pagination, nous avons en fait déjà examiné la solution à ce problème. Et c'est pour utiliser le templateEngineOverride pour indiquer que le fichier doit être traité à la fois comme Nunjucks et Markdown. La solution complète suivante doit être placée dans l'avant-propos du modèle : templateEngineOverride: njk, md .

À ce stade, vous avez créé un site multi-pages de base ! Si vous avez besoin d'utiliser des données externes, revenez à la section sur la pagination.

Autres façons de démarrer un projet Eleventy

Alors que certains autres générateurs de sites statiques et environnements comme WordPress ont le concept de «thèmes», Eleventy utilise le terme «starter». Il existe une collection croissante parmi laquelle choisir, et beaucoup peuvent être trouvées dans la liste des documents Eleventy.

Ma préférence est d'utiliser Sass avec mes projets Eleventy, et j'ai un démarreur Sass disponible si vous souhaitez voir comment l'ajouter à votre processus de construction. D'autres peuvent choisir d'ajouter Gulp s'ils sont habitués à ce pipeline de construction pour les actifs et le traitement.

J'ai également créé un démarreur minimal qui inclut les fonctionnalités décrites dans cet article et partage des similitudes avec le résultat du didacticiel. Il contient également un petit exemple de récupération de données externes et montre comment ajouter un partiel pour afficher la navigation du site en fonction d'une collection.

Développer les bases

Une fois que vous avez expérimenté la création de votre premier site avec du contenu de base et peut-être des données personnalisées, il est utile de connaître d'autres façons de travailler avec ce contenu. Voici un bref aperçu de quelques autres concepts à connaître.

Modification du type de sortie de fichier avec des permaliens

J'ai mentionné plus tôt que les permaliens ont un super pouvoir. Et c'est que vous pouvez les utiliser pour produire des types de fichiers non HTML.

Deux exemples utiles sont la création d'un flux RSS et d'un sitemap, qui sont généralement des fichiers XML. Ce qui est vraiment puissant, c'est que vous pouvez continuer à utiliser le langage de modèle de votre choix pour vous aider à générer ces fichiers, de sorte que vous pouvez parcourir les données de la page avec Nunjucks pour garder votre flux RSS à jour, par exemple.

Personnalisation des collections

Parfois, l'utilisation de balises pour créer des collections peut ne pas être suffisante. Ou, vous pouvez créer des variantes filtrées d'une collection existante. Nous pouvons modifier ou créer des collections en utilisant une série de fonctions fournies. Ceux-ci vivront dans le fichier de configuration .eleventy.js .

Dans cet exemple, nous utilisons la fonction addCollection pour filtrer les éléments d'une collection existante. La nouvelle collection sera basée sur l'existence de customKey dans le front matter. Cette clé est renvoyée de l'objet de data qui est attaché à tout le contenu Eleventy généré.

 eleventyConfig.addCollection("specialCollection", function (collection) { return collection.getAll().filter((post) => post.data.customKey); });

Vous pouvez consulter d'autres façons de créer, de modifier et d'utiliser des collections dans la documentation d'Eleventy.

Travailler avec la cascade de données

Eleventy a un concept plus complet de la façon dont les données sont compilées pour un modèle appelé la cascade de données que nous venons tout juste de commencer à explorer dans ce guide. Vous tirerez le meilleur parti d'Eleventy si vous passez en revue son fonctionnement, en commençant par la documentation. Ben Myers a également un excellent guide pour comprendre la cascade de données.

Plugins Eleventy recommandés

Dans l'intro, j'ai brièvement mentionné qu'il y avait des plugins disponibles, mais qu'ils ne sont pas toujours nécessaires. Cependant, il y en a quelques-uns que j'ai tendance à utiliser sur la plupart des projets, notamment :

• @11ty/eleventy-plugin-rss Si vous souhaitez avoir un flux RSS, ce plugin officiel fournit des filtres pour vous aider à générer le flux. Le référentiel lié comprend un exemple de flux, que vous pouvez également trouver utilisé dans certains démarreurs.
• @11ty/eleventy-plugin-syntaxhighlight Au lieu de charger Prism en tant que script pour la mise en surbrillance du code, ce plugin permet d'appliquer ce traitement dans le cadre du processus de construction d'Eleventy. Cela signifie que les blocs de code sont transformés pour inclure les classes permettant d'appliquer un thème Prism à l'avance, vous n'aurez donc qu'à ajouter un thème CSS Prism de votre choix.
• @11tyrocks/eleventy-plugin-social-images Une fonctionnalité que j'ai recherchée au début de mon exploration d'Eleventy était la possibilité de générer des images de partage sur les réseaux sociaux. Cela m'a amené à créer un plugin qui utilise Puppeteer dans les coulisses pour prendre l'instantané. Le plugin est livré avec des modèles prédéfinis ainsi que des options de configuration pour définir votre propre fichier de modèle.

Je recommanderais également de se familiariser avec le reste des plugins Eleventy officiels car ils répondent à d'autres besoins courants, notamment la navigation et la gestion des images.

Décider si Eleventy convient à votre projet

Eleventy, comme la plupart des sites statiques, est idéal pour le contenu qui n'a généralement pas besoin d'être diffusé de manière dynamique ou à la demande. Cela ne veut pas dire que tout le site doit être statique ou qu'il n'existe aucun moyen de rendre le contenu dynamique. Vous pouvez toujours charger JavaScript pour activer le contenu dynamique, comme la récupération à partir d'API ou la création de widgets interactifs. Vous pouvez également utiliser des services comme IFTTT ou Zapier pour faciliter la reconstruction de votre site si votre hébergeur prend en charge les webhooks de construction et que vous avez des parties que vous souhaitez actualiser selon un calendrier.

Grâce aux données personnalisées et à la pagination, nous avons vu qu'il était facile d'inclure des données externes à partir d'un CMS sans tête ou de toute autre API. Ainsi, bien qu'il soit servi de manière statique, vous disposez toujours d'une grande flexibilité quant à l'endroit où vous extrayez le contenu et à la manière dont vous le gérez.

Ce que je préfère à propos d'Eleventy, c'est qu'il n'impose pas beaucoup d'opinions sur la façon dont je devrais structurer mon site, au-delà des quelques répertoires attendus dont nous avons parlé pour _includes et _data (et vous pouvez également mettre à jour la convention de dénomination de ceux-ci). Cela peut également être utile si vous cherchez à migrer un site et que vous êtes également en mesure de déplacer une structure de fichiers existante. Cependant, si vous préférez une architecture plus opiniâtre, vous pouvez rechercher une option différente.

J'apprécie également la façon dont je peux modeler Eleventy pour l'adapter à mon modèle mental pour un projet donné en exploitant plusieurs langages de modèles ainsi que des filtres, des codes abrégés et des mises en page. Les démarreurs aident également à donner un coup de pouce afin que vous puissiez vous concentrer sur ce qui est vraiment important : votre contenu. Et la haute performance de la sortie purement statique est également un grand avantage.

Si vous avez besoin d'un peu plus dans votre processus de construction, vous pouvez ajouter d'autres outils familiers comme Webpack, Gulp ou Parcel. Vous pourrez peut-être trouver un démarreur qui inclut déjà ces choses. Gardez à l'esprit que vous pouvez également tirer parti des scripts Node qui sont déjà inhérents au processus de construction d'Eleventy.

Eleventy est très capable de gérer de grandes quantités de génération de pages. Il a été utilisé pour certains sites volumineux et complexes tels que le site Web.dev de Google et le site marketing de Netlify. J'ai également utilisé Eleventy à des fins non conventionnelles, comme les générateurs de courrier électronique et de composants Web, ainsi que d'autres qui sont décrits dans cet aperçu.

Ressources supplémentaires

J'espère que ce guide a à la fois suscité votre intérêt et vous a préparé à commencer à utiliser Eleventy ! Il comprenait de nombreux points que j'ai trouvé un peu difficiles à découvrir lorsque je créais mon premier projet avec. Depuis que j'ai trouvé Eleventy pour la première fois en avril 2020, j'ai construit plus de 20 projets Eleventy en comptant les démarreurs, les plugins, les projets parallèles et les supports de cours. Beaucoup d'entre eux peuvent être trouvés sur mon site 11ty.Rocks qui propose également des tutoriels et des astuces. Eleventy est un sujet dont j'aime beaucoup discuter, alors n'hésitez pas à me contacter sur Twitter !

Voici d'autres ressources pour vous aider dans votre cheminement pour apprendre et tirer le meilleur parti d'Eleventy :

• Andy Bell propose un cours payant très complet - "Learn Eleventy From Scratch".
• La série de didacticiels de Tatiana Mac, qui commence par "Beginners Guide to Eleventy", fournit des explications détaillées qui ne supposent aucune expérience préalable avec les générateurs de sites statiques.
• Bryan Robinson propose un cours YouTube pour convertir un thème HTML gratuit en un site Eleventy.

Enfin, je tiens à souligner que la communauté Eleventy est petite mais active ! Si jamais vous avez des difficultés à trouver des informations, vous pouvez tweeter votre question sur le compte officiel @eleven_ty. Le créateur d'Eleventy, Zach Leatherman, répond rapidement aux questions ou RT pour vous aider à reprendre la route !