À propos de l'auteur

Stephanie Eckles est une SWE front-end chez Microsoft. Elle est également l'auteur de ModernCSS.dev qui fournit des solutions modernes à d'anciens problèmes CSS comme en profondeur…
En savoir plus sur
Stéphanie
↬

Mais d'abord, passons rapidement en revue ce que l'on entend par "site statique", puis ce que propose un générateur. 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 poussés vers 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 créez un processeur pour compiler votre contenu en HTML statique. Ils offrent généralement des aides pour fournir une flexibilité dans la rédaction 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 d'avoir à 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 création de modèles. Ensuite, le processus de création du générateur rassemblera tout et produira le code HTML final qui peut être téléchargé sur un hébergeur Web pour servir de site Web. Selon l'hôte Web que vous utilisez, ce processus de construction peut même être effectué par l'hôte.

Il existe de nombreux générateurs de sites statiques disponibles. Vous avez peut-être entendu parler ou même utilisé des modèles 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 de ne pas nécessiter le chargement d'un bundle JavaScript côté client afin de servir 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 utilise par défaut du HTML statique.

Ce qui rend vraiment Eleventy unique, c'est la possibilité de sélectionner et de mélanger jusqu'à dix langages de création de modèles différents. :

Le mélange de langues peut se produire dans le même fichier ou entre des 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 effectuer une boucle sur certaines données à l’aide de Nunjucks dans le fichier Markdown. Cette capacité à combiner des 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 activer le service du site localement et avec un rechargement à chaud lors des modifications de fichiers. C'est une grande commodité, et il est bon de garder à l'esprit si vous ne recherchez pas un générateur de site statique mais peut-être une mise à niveau d'outils de construction comme Gulp.

Dans le cadre de la zero-config, tous les fichiers de votre site pourraient 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 petit extrait de code montrant comment effectuer cette modification:

 module.exports = function (eleventyConfig) {
  revenir {
    dir: {
      // par défaut: [site root]
      entrée: "src",
      // par défaut: _site
      sortie: "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 d'un grand avantage, en particulier pour un démarrage rapide. Ceci est facilement remplaçable en attribuant un permalien personnalisé et cela peut être fait par fichier, pour un répertoire entier, ou dynamiquement pour un ensemble de données. Les permaliens offrent également une autre superpuissance que nous explorerons dans un instant!

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 exploitant des filtres et des codes courts à propos de ceux 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 création de modèles.

Remarque importante : Vous pouvez utiliser avec succès Eleventy sans ou avec un faible Connaissance de JavaScript.

Contrairement à d'autres SSG comme Gatsby, ou des environnements comme WordPress, la plupart des sites Eleventy ne nécessitent aucun plug-in. Il y a quelques plugins 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 aucun des autres langages de création de modèles. Eleventy est aussi complexe que votre projet l'exige!

Comprendre les concepts essentiels d'Eleventy

Passons en revue quelques bouts de terminologie et de concepts qui vous aideront à réussir à créer vos projets Eleventy.

Layouts And Templates

] Vous pouvez penser que ces termes sont interchangeables, mais dans le contexte d'Eleventy, ils ont une signification contextuelle:

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

For Par exemple, template fait référence à tous vos fichiers Markdown, alors 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 la mise en route.

Filtres et codes courts

Voici des moyens supplémentaires de modifier la sortie de contenu et de créer des éléments de modèle réutilisables. Ils sont disponibles pour une utilisation avec les modèles Nunjucks, Liquid, Handlebars et JavaScript. Les filtres et les codes courts sont définis dans .eleventy.js .

Au-delà des variables et des opérateurs disponibles dans la langue de modèle 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 retourné, comme choisir un élément aléatoire. Certains filtres sont fournis par Eleventy dont certains seront utilisés dans le didacticiel de mise en route.

Les codes courts permettent de créer des éléments de modèle réutilisables et peuvent 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 codes courts 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 périmées dans votre pied de page! Voici comment créer un shortcode year :

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

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

Vous pouvez consulter la documentation Eleventy pour exemples de codes courts appariés .

Collections

Les collections sont des groupes de contenu connexe et sont généralement créées dans le frontmatter en définissant des balises . Les options de syntaxe de balise incluent des chaînes simples, 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 la langue de modèle de votre choix dans l'objet global collections . Pour accéder à notre collection de «pages» ressemblerait à collections.pages . Cela renvoie un tableau des données de cette collection, et vous pouvez ainsi effectuer des opérations de tableau, comme le bouclage, 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 n'utiliser que 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. Ces données sont appelées «données personnalisées» et se produisent comme des exportations de modules JavaScript ou des fichiers JSON dans le répertoire _data .

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

• Définir un tableau JSON de base.
• Retour les résultats d'une opération d'extraction.
• Récupère et reformate 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 . À l'aide de Nunjucks, voici un exemple de bouclage sur les données de posts :

 {% for post in posts%}
  {{ titre de l'article }}
{% endfor%} 

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

En onze termes, 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 «bloc» de données. Cela se fait avec un fichier dédié qui définit la pagination dans le frontmatter. Le fichier comprend également la configuration de la 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 vers laquelle envoyer le contenu et ajouter des balises pour créer une collection pour faciliter la référence et la flexibilité de la sortie.

Remarque : 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 de nos posts données personnalisées dont nous supposerons que nous 'récupérez via une récupération à partir d'un CMS sans tête. Il est important de noter que la taille est définie sur 1, ce qui signifie que chaque «bloc de pagination» doit produire une seule page de sortie. Nous utilisons ensuite l'alias pour créer une référence à l'élément courant dans la boucle de pagination, puis nous utilisons cette référence dans la définition permalien et le corps du modèle.

Le fichier qui définit la pagination peut vivre où vous le souhaitez dans votre répertoire d'entrée. Ma préférence organisationnelle est de créer un répertoire generate puis de lui attribuer le même nom que la collection qu'il va créer. Considérez ce qui suit comme src / generate / posts.njk :

 ---
pagination:
  données: messages
  taille: 1
  alias: post
  addAllPagesToCollections: true
permalien: "/ {{post.title | slug}} /"
tags: messages
mise en page: poste
templateEngineOverride: njk, md
---
{{post.body | safe}} 

Dans ce cas, le permalien attribue la page à sortir directement de la racine du site. Vous pouvez changer cela pour ajouter un préfixe tel que / 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'exemple d'extrait de code, 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 le variable.

Si vous vous demandez ce que signifie coffre-fort nous allons l'apprendre ensuite!

Comment démarrer avec Eleventy

Très bien, vous êtes prêt à commencer aller avec votre premier projet Eleventy! Ce bref didacticiel vous aidera à mettre en place une structure de départ pour 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 de portée, alors voici la commande install:

 npm install @ 11ty / eleventy 

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

 "scripts": {
  "start": "onze --servir",
  "build": "onze"
} 

Comme mentionné précédemment, l'indicateur - serve activera 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 maintenant pour créer du contenu dans src ou dans le répertoire d'entrée de votre choix.

Afin de préparer notre projet à être plus flexible et évolutif dès le départ, je suggérerais de créer au moins une mise en page contenant le HTML5 passe-partout. Les mises en page doivent être définies dans un fichier 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 mise en page base . Je préfère en faire un fichier Nunjucks.

Voici un exemple base.njk :

 


  
  
  


  

    
 {{title}} 
  
  

     {{contenu | en sécurité }}
  

 

Les doubles accolades sont la syntaxe Nunjucks pour les variables. Ici, nous avons préparé une variable entrante title qui sera bientôt fournie via une introduction. La variable content est fournie par Eleventy et marque l'emplacement où doit être placé tout le contenu non-préliminaire entrant. Surtout, il est utilisé en conjonction avec le filtre safe fourni qui empêche le 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 qu'index .md :

 ---
title: Bonjour Smashing Readers!
mise en page: base.njk
---

Merci d'avoir lu - j'espère que vous êtes impatient d'essayer Eleventy! 

Notez que dans la première page, 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 ce petit conseil si vous souhaitez qu’il ouvre automatiquement le navigateur .

La dernière étape critique consiste à ajouter une feuille de style. Actuellement, CSS n'est pas reconnu comme un type de fichier inclus automatiquement, 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 /");

  // - personnalisation des entrées / sorties si vous utilisez -
}; 

Tout d'abord, nous ajoutons le répertoire css en tant que «copie passthrough», 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 tout en exécutant notre commande start Eleventy déclenchera une reconstruction pour mettre à jour notre site local.

Enfin, nous avons besoin n'oubliez pas d'ajouter le lien vers notre feuille de style dans notre mise en page de base :

Lorsque nous définissons l'emplacement de la feuille de style, nous la passons par le filtre url d'Eleventy qui

Ensuite, créons un type de message «pages» à explorer en utilisant un peu plus les collections et les mises en page. Pour ce faire, ajoutez le répertoire des pages et créez un ou deux fichiers Markdown, y compris un title clé de présentation mais pas un layout.

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 entre les fichiers. Le fichier doit être nommé de la même manière que le répertoire pour lequel il sera utilisé, alors créez le fichier pages.json et ajoutez le contenu suivant:

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

Nous avons également 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:

 ---
mise en page: base.njk
---


  {{contenu | en sécurité }}
 

Ici, nous utilisons le concept Eleventy de chaînage de mise en page pour pouvoir réutiliser notre modèle de base mais aussi ajouter un élément unique pour notre page qui est la

. Cela signifie que tout le contenu de nos pages utilisera à la fois la mise en page de la page et la mise en page de base .

Le chaînage de la mise en page réduit la duplication en permettant la réutilisation des passe-partout et de la 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 générer une liste de liens vers chaque page. Cette boucle sera ajoutée dans notre fichier index.md .

 {% pour publication dans collections.post -%}
- [{{ post.data.title }}] ({{post.url}})
{% endfor%} 

Nous avons fait quelque chose d'unique, c'est que le à l'intérieur de la boucle revient en fait à Markdown pour rendre les liens. Ce n'est pas une manière obligatoire de gérer ce scénario, mais cela peut être très pratique! Parfois, en fonction de la complexité, cela peut ne pas fonctionner. La vraie raison est que le moteur de 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 indiquer à Eleventy comment traiter le fichier.

Dans le section précédente sur la pagination, nous avons en fait déjà examiné la solution pour cela. Et c'est d'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’introduction du modèle: templateEngineOverride: njk, md .

À ce stade, vous avez créé un site de base de plusieurs pages! 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 y a une collection grandissante parmi laquelle choisir, et beaucoup peuvent être trouvées dans la liste dans les documents Eleventy .

Ma préférence est d'utiliser Sass avec mes projets Eleventy, et j'ai un Sass starter disponible si vous souhaitez savoir 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 propose également un petit exemple de récupération de données externes et montre comment ajouter une partie pour afficher la navigation du site en fonction d'une collection.

Expanding On The Basics

Une fois que vous avez expérimenté la création de votre premier site avec certains contenu de base et peut-être des données personnalisées, il est utile de connaître des moyens supplémentaires de travailler avec ce contenu. Voici un bref aperçu de quelques autres concepts à prendre en compte.

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 générer des types de fichiers non HTML.

Deux exemples utiles sont la création d'un flux RSS et d'un plan du site, qui sont généralement des fichiers XML. Ce qui est vraiment puissant, c'est que vous pouvez continuer à utiliser le langage de création de modèles de votre choix pour aider à générer ces fichiers, de sorte que vous pouvez boucler sur les données de 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. Vous pouvez également 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. Celles-ci se trouveront 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 les pages d'accueil. Cette clé est renvoyée hors de l'objet 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, modifier et utiliser des collections dans la documentation Eleventy.

Travailler avec la cascade de données

Eleventy a un concept plus complet de la façon dont les données est compilé 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 examinez comment cela fonctionne, à partir de 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 plugins disponibles mais qu'ils ne sont pas pas toujours nécessaire. Cependant, j'ai tendance à en utiliser quelques-uns dans 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 dépôt lié comprend un exemple de flux, que vous pouvez également trouver dans certains démarreurs.
• @ 11ty / eleventy-plugin-syntaxhighlight
  Au lieu de charger Prism en tant que script pour la mise en évidence du code, ce plugin permet à ce traitement d'être appliqué dans le cadre du processus de construction d'Eleventy. Cela signifie que les blocs de code sont transformés pour inclure les classes pour 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 caractéristique que j'ai recherchée au début de mon exploration d'Eleventy était la capacité à générer des images de partage sur les réseaux sociaux. Cela m'a conduit à 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 vous familiariser avec le reste des plugins officiels d'Eleventy car ils répondent à d'autres besoins courants, y compris la navigation et gestion des images.

Décider si Eleventy convient à votre projet

Eleventy, comme la plupart des sites statiques, convient mieux au 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 du site doit être statique, ou qu'il n'y a 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ôte prend en charge la création de webhooks et que vous avez des parties que vous souhaitez actualiser selon un calendrier.

Grâce aux données et à la pagination personnalisées, nous avons vu qu'il était facile d'inclure des données externes à partir d'un CMS headless ou de toute autre API. Ainsi, même s'il sera diffusé de manière statique, vous disposez toujours d'une grande flexibilité quant à l'emplacement de l'extraction du contenu et à la façon dont vous le gérez. , au-delà des quelques répertoires attendus dont nous avons parlé pour _inclut et _data (et vous pouvez également mettre à jour la convention de dénomination de ceux-ci). Cela peut également être utile si vous souhaitez migrer un site et pouvoir éventuellement déplacer une structure de fichiers existante. Cependant, si vous préférez une architecture plus avisée, vous pourriez chercher une autre option.

J'aime aussi la façon dont je peux modeler Eleventy pour l'adapter à mon modèle mental pour un projet donné en exploitant plusieurs langages de création de modèles ainsi que des filtres, des codes courts et mises en page. Les démarreurs contribuent également à vous 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 comprend déjà ces éléments. 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 vastes et complexes tels que 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 composants de courrier électronique et Web, ainsi que d'autres qui sont décrits dans cet aperçu .

Ressources supplémentaires

J'espère que ce guide a atteint son apogée. votre intérêt et vous a préparé à commencer à utiliser Eleventy! Il comprenait beaucoup de points que j'ai trouvé un peu difficile à 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 comptant des démarreurs, des plugins, des projets parallèles et du matériel de cours. Beaucoup de ceux-ci peuvent être trouvés sur mon site 11ty.Rocks qui a également des tutoriels et des astuces. Eleventy est quelque chose dont j'aime beaucoup discuter, alors n'hésitez pas à contacter sur Twitter !

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

Enfin, je tiens à noter que la communauté Eleventy est petite mais active! Si jamais vous avez des difficultés à trouver des informations, vous pouvez envoyer 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!

(vf, yk, il)