Un grand SSG vient de s’améliorer

soixante-dix (ou 11ty) est populaire générateur de site statique (SSG) et est considéré comme l’une des meilleures options Node.js pour la vitesse, la simplicité, la flexibilité et les performances du site Web. Ce didacticiel examine la version 2.0, publiée en février 2023.

Qu’est-ce qu’un générateur de site statique ?

(Si vous utilisez déjà un SSG, veuillez passe devant …)

Vous connaissez probablement WordPressun système de gestion de contenu (CMS) qui alimente près de la moitié de tous les sites Web. WordPress fournit des panneaux d’administration qui vous permettent d’éditer et de stocker du contenu dans une base de données. Lorsqu’un utilisateur visite une page WordPress, il extrait le contenu de la base de données dans un modèle et renvoie du code HTML. Une interface utilisateur simple combinée à de nombreux thèmes et plugins rend WordPress idéal pour les clients.

Ou le fait-il?

Je vais faire une affirmation controversée : un CMS est excessif sauf si vous avez de nombreux auteurs qui publient plusieurs fois par jour. L’installation de WordPress est facile et donne beaucoup de puissance aux clients non techniques. Malheureusement, le coût à long terme de la gestion du contenu, des performances, des dépendances et de la sécurité est souvent sous-estimé. Les sites peuvent échouer parce que les propriétaires cassent des pages, ralentissent le site ou font pirater leur installation.

Un SSG effectue la plupart des travaux de rendu une fois au moment de la construction pour créer un ensemble de fichiers HTML frontaux statiques (avec images, CSS et JavaScript si nécessaire). Il est plus difficile pour un client de casser quelque chose : vous pouvez tester les pages résultantes avant le déploiement, garantir de bonnes performances et éviter de maintenir des dépendances côté serveur telles que des runtimes ou des bases de données. Il n’est pas facile de pirater un site statique en direct, car il s’agit d’une collection de fichiers. Il n’y a aucune application à exploiter.

Un SSG tel qu’Eleventy a un coût initial plus élevé, car vous avez besoin d’une expertise en développement. Mais les coûts de maintenance et d’hébergement à long terme devraient diminuer. Vous pouvez avoir le meilleur des deux mondes en découplage du CMS: un SSG construit et déploie un site en extrayant le contenu du système de gestion de contenu hébergé en privé d’un client.

Pour en savoir plus sur les avantages et les inconvénients de l’utilisation de générateurs de sites statiques, consultez :

Pourquoi utiliser Eleventy ?

Générateur de site statique les applications sont nombreuses, mais Eleventy mérite votre attention, car :

• vous pouvez créer des sites plus simples sans configuration
• vous pouvez configurer une génération plus avancée à l’aide de code JavaScript (Node.js) familier aux développeurs Web
• vous pouvez extraire le contenu des fichiers Markdown, des données JSON ou de toute API
• vous pouvez choisir parmi les moteurs de modèles HTML populaires tels que Liquide, Nunjucks, Guidon, Moustache, EJS, Carlinet plus.
• vous n’êtes pas lié à un framework JavaScript : le site résultant n’a pas de dépendances JavaScript à moins que vous ne les ajoutiez intentionnellement
• Eleventy a l’une des plus petites tailles d’installation et est plus rapide au rendu que les autres options

Améliorations et fonctionnalités d’Eleventy 2.0

Eleventy 2.0 propose des mises à jour et des améliorations. Regardons certains d’entre eux maintenant.

Une taille d’installation plus petite

La version 2.0 nécessite 32 % de moins npm dépendances et réduit les node_module poids du répertoire de 155 Mo à 34 Mo. L’installation est 30 % plus rapide, donc les déploiements sur hôtes statiques tels que Cloudflare sont sensiblement plus rapides.

Temps de construction plus rapide

Eleventy était déjà rapide, mais la version 2 réduit les temps de construction jusqu’à 20 %.

Eleventy reste l’un des constructeurs de sites statiques Node.js les plus rapides, et un grand site sera généralement construit 12 fois plus vite qu’Astro, 15 fois plus vite que Gatsby et 37 fois plus vite que Next.js. Pour aller plus vite, vous devez envisager des SSG construits à l’aide de Go, Rust ou C++.

Un nouveau (expérimental) --incremental drapeau améliore encore les temps de rendu du développement en effectuant des constructions partielles sur les pages affectées par les modifications apportées au contenu ou aux modèles.

Nouveau serveur de développement

Un nouveau serveur de développement léger et plus rapide remplace Browsersync. Comme précédemment, vous démarrez le serveur avec ceci :

npx eleventy --serve

Ouvrez ensuite http://localhost:8080 dans votre navigateur. Les pages s’actualisent automatiquement lorsque vous apportez une modification aux modèles, au contenu, au CSS, au JavaScript, aux images ou à d’autres éléments intégrés.

Nouveaux composants Web WebC

Une nouvelle option de composant Web compatible côté serveur appelée WebC est disponible. Considérez le code que vous créez dans un webc déposer:

<p><a href="https://www.sitepoint.com/">SitePoint</a></p>

Essentiellement, ceci est utilisable dans un modèle utilisant un élément HTML personnalisé :

<!doctype html>
<html>
  <head>my page</head>
  <body>
    <h1>My page</h1>
    <sitepoint-link></sitepoint-link>
  </body>
</html>

Voir le Documentation WebC pour plus de détails et de tutoriels.

Nouveau plug-in de rendu

Le Plug-in de rendu fournit un shortcode qui vous permet de restituer une chaîne de modèle dans un autre modèle. Par exemple, voici Markdown dans Liquid :

{% assign title="Hello" %}
<h1>{% echo title %}</h1>

{% renderTemplate "md" %}
A new paragraph.

## An H2 sub-title

* list item 1
* list item 2
* list item 3
{% endrenderTemplate %}

Nouveau plugin d’internationalisation

Eleventy 2.0 facilite la mise à disposition de votre site statique dans différentes langues. Cela signifie généralement afficher la même page sur différentes URL pour chaque langue :

/about/index.html (default English "About" page)
/es/about/index.html (Spanish "About" page)
/fr/about/index.html (French "About" page)

Ensuite, vous fournissez une option de choix de langue dans l’interface utilisateur de chaque page ou vous redirigez côté serveur après avoir vérifié le HTTP du navigateur. Accept-Language en-tête de requête.

Le Plugin d’internationalisation facilite ce processus en fournissant des fonctionnalités telles que le locale_url filtre, qui maintient un utilisateur sur son choix de langue actuel. Par exemple:

<a href="https://www.sitepoint.com/eleventy-2/{{"/about/" | locale_url }}">Blog</a>

Cela rend l’URL /es/about/ sur les pages en espagnol ou /fr/about/ sur les pages en français.

Nouveau HTML <base> Brancher

Le HTML <base> Brancher fournit des options vous permettant d’appliquer un chemin de base à des URL spécifiques.

Nouvelles fonctions Server Edge

Eleventy 2.0 permet la dynamique côté serveur fonctions de bord pour gérer les connexions, personnaliser le contenu, soumettre des formulaires, etc. Il s’agit d’une option expérimentale limitée aux supporters d’Eleventy Netlifiermais la prise en charge d’autres hôtes statiques devrait apparaître au fil du temps.

Démarrer un nouveau projet Eleventy 2.0

Notre Eleventy Guide : Un générateur de site statique indépendant du framework Le didacticiel fournit un guide étape par étape pour l’installation et l’utilisation du SSG.

Le tutoriel utilise cette commande d’installation pour installer la dernière édition d’Eleventy :

npm install @11ty/eleventy

Vous pouvez également utiliser cette commande pour vous assurer d’installer Eleventy 2.0 si une version ultérieure est disponible :

npm install @11ty/eleventy@2

Mettre à niveau un site Eleventy 1.0

La plupart des sites devraient fonctionner correctement, mais méfiez-vous des modifications majeures suivantes de la version 2.0 avant d’essayer de mettre à niveau un site développé avec Eleventy 1.0 :

• il nécessite Node.js 14 ou supérieur (vérifiez également vos scripts de construction de déploiement)
• il installe des moteurs de modèles mis à jour
• il désactive les blocs de code indentés dans Markdown (ils peuvent être réactivés)
• il supprime les dates des noms de répertoire parent
• il préserve les points/points dans les noms de fichiers de données globales
• il supprime les sans-papiers renderData fonctionnalité
• ça supprime le --passthroughall indicateur de ligne de commande pour copier des fichiers dans le répertoire de sortie
• il prend en charge les noms de fichier de configuration par défaut de eleventy.config.js et eleventy.config.cjs ainsi que .eleventy.js
• addShortcode et addFilter supporte maintenant async les fonctions

Le Plug-in d’aide à la mise à niveau peut détecter tout problème potentiel sur votre site. Vous pouvez le tester avec le code du tutoriel sur GitHub.

En supposant que vous ayez un site Eleventy 1.0 fonctionnel, installez Eleventy 2.0 et le plugin Upgrade Help depuis votre répertoire de projet :

cd my-11ty-site
npm install @11ty/eleventy@2 @11ty/eleventy-upgrade-help@2

Ajouter l’aide à la mise à niveau en tant que dernier plugin dans votre fichier de configuration Eleventy (nommé .eleventy.js, eleventy.config.js ou eleventy.config.cjs). Le exemple de projet .eleventy.js déposer commence par ce code :

const
  dev = global.dev  = (process.env.ELEVENTY_ENV === 'development'),
  now = new Date();

module.exports = config => {

  

  
  config.addPlugin( require('@11ty/eleventy-navigation') );

  

  
  config.addTransform('inline', require('./lib/transforms/inline'));

  

Il utilise un seul @11ty/eleventy-navigation plugin, ajoutez donc la ligne du plugin d’aide à la mise à niveau en dessous :

const
  dev = global.dev  = (process.env.ELEVENTY_ENV === 'development'),
  now = new Date();

module.exports = config => {

  

  
  config.addPlugin( require('@11ty/eleventy-navigation') );

  
  config.addPlugin( require('@11ty/eleventy-upgrade-help') );

  
  

Lancez maintenant une build Eleventy :

npx eleventy

Votre console affichera une sortie telle que celle-ci :

[@11ty/eleventy-upgrade-help] PASSED This project is not using the previously deprecated and disabled by default `dataTemplateEngine` configuration property. Read more at https://www.11ty.dev/docs/data-preprocessing/
[@11ty/eleventy-upgrade-help] PASSED This project is not using the `--passthroughall` command line flag. Read more at https://www.11ty.dev/docs/copy/
[@11ty/eleventy-upgrade-help] NOTICE The `liquidjs` dependency was updated from 9.x to 10.x. This should not require action, but you can read the full release notes: https://github.com/harttle/liquidjs/releases/tag/v10.0.0
[@11ty/eleventy-upgrade-help] NOTICE Markdown’s indented code blocks have been disabled by default in 2.0. Unfortunately, this plugin does *NOT* currently test whether this change affects your content. You can re-enable this feature using `eleventyConfig.amendLibrary("md", mdLib => mdLib.enable("code"))`. Read more: https://www.11ty.dev/docs/languages/markdown/

Apportez les modifications requises et réexécutez la version d’Eleventy jusqu’à ce que tous les tests montrent PASSED ou NOTICE. Testez votre site dans divers navigateurs à l’aide du serveur Web de développement pour vous assurer qu’il fonctionne comme prévu :

npx eleventy --serve

Une fois terminé, vous pouvez supprimer le plugin Upgrade Help de votre fichier de configuration Eleventy :

Désinstallez-le de votre projet :

npm uninstall @11ty/eleventy-upgrade-help@2

Enfin, mettez à jour votre référentiel Git ou créez si nécessaire.

Résumé

Eleventy est l’un des meilleurs générateurs de sites statiques pour Node.js et la version 2.0 le rend plus attrayant. Voici un résumé des raisons :

• il est hautement configurable et une base JavaScript/Node.js facilite la vie des développeurs Web
• Documentation est bon
• il est facile à démarrer, rapide à installer et rapide à construire
• vous pouvez utiliser le système de modèles que vous préférez
• il prend en charge les fonctionnalités de base de la page telles que la navigation, la pagination et les données dynamiques
• vous pouvez sauvegarder et versionner des sites à l’aide de Git ou de tout autre système de contrôle de code source
• les sites construits ne dépendent pas de JavaScript, sauf si vous en avez besoin
• la fonctionnalité côté serveur est possible et s’améliore
• les mises à niveau sont indolores pour la plupart des sites (surtout par rapport aux autres SSG Node.js que je pourrais mentionner !)
• il est activement développé et un parrainage continu assure un soutien à long terme

Il y a quelques inconvénients :

• vous avez besoin d’une expertise en développement pour démarrer
• vous commencez avec du HTML vierge : il n’y a pas de cadre magique
• La configuration d’Eleventy utilise CommonJS et ne prend pas encore en charge les modules ES
• Les fonctionnalités de Netlify sont bonnes, mais il n’y a aucune garantie que des options similaires arriveront pour d’autres plateformes

Pour plus d’informations, consultez :