Guide d'Eleventy: un générateur de sites statiques à framework-framework

Eleventy (11ty): un générateur de sites statique Node.js pour la création de sites Web sans effort

Eleventy, un générateur de sites statiques Node.js populaire (SSG), simplifie la création de sites Web statiques. Les SSG effectuent le plus de rendu pendant le processus de construction, générant des fichiers statiques HTML, CSS et JavaScript. Cela élimine les dépendances côté serveur comme les temps d'exécution et les bases de données.

Avantages clés:

• Hébergement simplifié: Servir uniquement les fichiers HTML rend l'hébergement simple.
• Sécurité améliorée: L'absence de composants côté serveur minimise les vulnérabilités de sécurité.
• Performances exceptionnelles: Les fichiers statiques conduisent à des temps de chargement plus rapides.

La popularité d'Eleventy a considérablement augmenté, attirant des chiffres importants dans le développement Web. Bien que idéal pour les sites et les blogs axés sur le contenu, il est adaptable aux plates-formes de commerce électronique et aux systèmes de rapports.

Ce tutoriel montre la création d'un site Web de base en utilisant Eleventy, présentant ses capacités au-delà de la conversion de marque à HTML simple. Il illustre comment Eleventy peut fonctionner comme un système de construction complet, éliminant le besoin d'outils séparés tels que les scripts NPM, WebPack ou Gulp.js, tout en permettant des versions automatisées et des rechargements en direct.

Caractéristiques et capacités clés:

• Node.js Fondation: exploite Node.js pour une génération de fichiers statique efficace.
• Templage du moteur Prise en charge du moteur: offre une flexibilité avec divers moteurs de modèles, y compris les nunjucks, pour l'intégration de contenu dynamique.
• Framework Agnostic: ne mandater pas les cadres JavaScript spécifiques (bien que l'intégration avec react ou vue.js soit possible).
• Configuration rationalisée: implique la création d'un projet Node.js, l'installation d'Eleventy, la définition d'une structure de répertoire et la configuration des répertoires d'entrée / sortie.
• Rechargement en direct: utilise BrowSersync pour les mises à jour en temps réel pendant le développement.
• Caractéristiques avancées: prend en charge la création de menu de navigation (en utilisant le plugin de navigation), les transformations d'actifs et l'optimisation d'image via des modèles JavaScript.
• Gestion du contenu: gère efficacement les articles via des collections, permettant une pagination, des filtres personnalisés et des optimisations de production.

frameworks javascript: nécessaire ou non?

Bien que certains SSG intègrent des cadres JavaScript côté client (React, Vue.js), Eleventy ne les nécessite pas. À moins de créer une application complexe (auquel cas un SSG peut ne pas être le choix optimal), un cadre JavaScript n'est probablement pas nécessaire.

Un exemple pratique: construire un site Web simple

Ce tutoriel vous guide à travers la création d'un site Web avec des pages et des articles de blog, une tâche souvent gérée par des plateformes comme WordPress. Le code complet est disponible sur //m.sbmmt.com/link/6ec3ff0c922ce84561ce5162f912b47e . Vous pouvez cloner, installer et l'exécuter en utilisant ces commandes:

git clone //m.sbmmt.com/link/6ec3ff0c922ce84561ce5162f912b47e
cd 11ty-starter
npm i
npx eleventy --serve

Accédez au site à http://localhost:8080.

Les sections suivantes détaillent la construction du site à partir de zéro.

(Le reste du tutoriel suivrait, en adaptant le texte d'origine de manière similaire pour maintenir la signification d'origine tout en modifiant le libellé et la structure de la phrase.) N'oubliez pas de conserver toutes les images et leur formatage d'origine comme selon vos instructions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!