Fermer

septembre 26, 2020

Premiers pas avec Eleventy –


Eleventy (ou 11ty) est un générateur de site statique (SSG) Node.js. Les SSG effectuent la plupart des travaux de rendu au moment de la construction pour créer un ensemble de fichiers HTML, CSS et JavaScript statiques. Les pages résultantes n'ont pas besoin d'avoir des dépendances côté serveur telles que des runtimes ou des bases de données.

Cela conduit à plusieurs avantages clés:

  • l'hébergement est simple: vous servez des fichiers HTML
  • les systèmes sont sécurisés: il n'y a rien à pirater
  • les performances peuvent être excellentes.

Eleventy est devenu de plus en plus populaire et a attiré l'attention de grands noms du développement Web. Il est idéal pour les sites de contenu et les blogs, mais il a été adapté pour les boutiques en ligne et les systèmes de reporting.

Dans la plupart des cas, vous utiliserez Eleventy pour générer des pages HTML à partir de documents Markdown qui insèrent du contenu dans des modèles alimentés par des moteurs tels que Nunchucks . Cependant, ce didacticiel montre également comment utiliser Eleventy en tant que système de construction complet pour tous les actifs. Vous n'avez pas nécessairement besoin d'un système séparé tel que les scripts npm, webpack ou Gulp.js, mais vous pouvez toujours profiter des compilations automatisées et du rechargement en direct.

Avez-vous besoin d'un framework JavaScript?

Quelques SSG adoptent le client- côté des frameworks JavaScript tels que React ou Vue.js. Vous pouvez utiliser un framework avec Eleventy, mais il n’est pas appliqué.

À mon avis, un framework JavaScript est probablement inutile, sauf si vous créez une application complexe . Et si vous créez une application, un SSG n'est pas le bon outil! Les fans de Gatsby peuvent ne pas être d'accord, alors s'il vous plaît défiez-moi / ridiculisez-moi sur Twitter !

Montre-moi le code

Eleventy prétend être simple, mais cela peut être intimidant quand on va au-delà Les bases. Ce tutoriel montre comment créer un site simple avec des pages et des articles de blog / articles – une tâche souvent gérée par WordPress.

Le code complet est disponible sur https://github.com/craigbuckler/11ty-starter . Vous pouvez le télécharger, l'installer et le lancer sous Windows, macOS ou Linux en entrant les commandes suivantes dans votre terminal:

 git  clone https://github.com/craigbuckler/11ty-starter
 cd  11ty-starter
 npm  i
npx onze --serve

Accédez ensuite à la page d'accueil à l'adresse http: // localhost: 8080 dans votre navigateur.

Les étapes ci-dessous décrivent comment créer le site à partir de zéro.

Installez Eleventy

Comme tout projet Node.js, commencez par créer un répertoire et initialiser un fichier package.json :

 mkdir  mysite
 cd  monsite
 npm  init

Ensuite, installez Eleventy en tant que dépendance de développement:

 npm  i @ 11ty / eleventy --save-dev

Remarque: ce projet installe des modules en tant que dépendances de développement car ils ne doivent être exécutés que sur une machine de développement. Certains hôtes avec des processus de construction automatisés peuvent vous demander d'utiliser des dépendances d'exécution standard.

Rendre votre première page

Créez un répertoire src dans lequel tous les fichiers source résideront, puis créez un index . md à l'intérieur. Ajoutez du contenu de page d'accueil tel que:

 ‐‐‐
titre: 11ty site de démarrage
‐‐‐

Ceci est un site Web de démonstration utilisant le  [ 11ty site générateur statique ] (https://www.11ty.dev/) . Il affiche des pages, des articles de blog, des listes et des balises.

L'ensemble du processus de construction est géré via 11ty.

Le contenu entre les marqueurs de tableau de bord ‐‐‐ est connu sous le nom de avant-plan . Il définit les métadonnées nom-valeur de la page qui peuvent être utilisées pour définir les paramètres d'Eleventy et des modèles. Seul un titre est défini ici, mais vous ajouterez sous peu des descriptions, des dates, des balises et d'autres données.

Un fichier de configuration Eleventy nommé .eleventy.js doit être créé dans le dossier racine de votre projet. Cet exemple de code simple renvoie un objet, qui spécifie ce qui suit:

  1. le répertoire source src pour les fichiers source
  2. le répertoire build où les fichiers du site Web seront créés

 module .  exports   =   config   =>   {

  
   return   {

    dir :   {
      entrée :   'src' 
      sortie :   'build' 
    } 

  } ; 
} ;

Pour créer le site et démarrer un serveur de rechargement en direct optimisé par Browsersync entrez ce qui suit:

 npx onze --serve

Eleventy restitue tout ce qu'il trouve dans le répertoire src et affiche le contenu résultant dans build :

 $ npx onzeventy --serve
Écriture de build / index.html à partir de ./src/index.md.
A écrit  1   fichier   en   0,12  seconde  ( v0.11.0 ) 
Regarder  .. .
 [ Browsersync ]  URL d'accès:
 ---------------------------------------
       Local: http: // localhost: 8080
    Externe: http://172.27.204.106:8080
 ---------------------------------------
          Interface utilisateur: http: // localhost: 3001
 Interface utilisateur externe: http: // localhost: 3001
 ---------------------------------------
 [ Browsersync ]  Fichiers à diffuser à partir de: build

Dans ce cas, un seul fichier build / index.html est créé, accessible en chargeant l'URL http: // localhost: 8080 dans votre navigateur.

first 11ty render

Le fichier HTML créé à build / index.html contient le contenu rendu à partir du fichier de démarque à src / index.md :

 ] < p >  Ceci est un site Web de démonstration utilisant le  < a   href  =  " https: //www.11ty .dev /  " >  11ty générateur de site statique  </  a > . Il affiche des pages, des articles de blog, des listes et des balises.  </  p > 
 < p >  L'ensemble du processus de construction est géré via 11ty.  </  p >

Le serveur Eleventy peut être arrêté avec Ctrl | Cmd + C .

Remarque: il est rarement nécessaire d'arrêter Eleventy pendant le développement du site, car les nouveaux fichiers sont automatiquement rendus. Cependant, les sections ci-dessous ajoutent d'autres options de configuration, donc un redémarrage est nécessaire.

Création de modèles

Eleventy peut utiliser presque n'importe quel moteur de création de modèles JavaScript. Nunchucks est une bonne option car il est complet et utilisé tout au long de la documentation à 11ty.dev .

Remplacez le début de src / index.md par ceci:

 ‐‐‐
titre: 11ty site de démarrage
description: Il s'agit d'un site Web de démonstration généré à l'aide du générateur de site statique 11ty.
mise en page: page.njk
‐‐‐

Ceci indique à Eleventy d'utiliser le modèle page.njk Nunchucks pour la mise en page. Par défaut, Eleventy recherche les modèles dans un sous-répertoire _includes du répertoire source ( src / ). Tous les fichiers qui s'y trouvent ne sont pas rendus eux-mêmes mais sont utilisés pendant le processus de construction.

Créez ce nouveau modèle à src / _includes / page.njk :

 {% include "partials / htmlhead.njk "%}

 < main > 
{% block content%}

   < h1 >  {{title}}  </  h1 > 

  {{contenu | sûr }}

{% endblock%}
 </  main > 

{% include "partials / htmlfoot.njk"%}

Le modèle place le titre défini dans l'avant-propos de la page dans un en-tête

et remplace {{content}} par le HTML généré à partir du Markdown. (Il utilise le safe Nunchucks filter pour générer du HTML sans guillemets ni crochets.)

Les deux {% include%} définitions de fichiers de référence inclus dans le modèle . Créez un fichier d'en-tête HTML à src / _includes / partials / htmlhead.njk qui utilise également le titre de la page et la description :

   
 < html   lang  =  " en "  > 
 < tête > 
   < meta   charset  =  " UTF-8 "    /> 
   < meta   name  =  " viewport "   content  =  " width = device- largeur, échelle initiale = 1,0  "   /> 
   < titre >  {{title}}  </  titre > 
   < meta   name  =  " description "   content  =  " {{description} }  " > 
 </  tête > 
 < carrosserie >

Ensuite, créez le pied de page HTML à src / _includes / partials / htmlfoot.njk :

 </  body > 
 </  html >

Arrêtez et redémarrez Eleventy avec npx eleventy --serve .

Le fichier build index.html contient désormais une page HTML entièrement formée:

   
 < html   lang  =  " en "  > 
 < tête > 
   < meta   charset  =  " UTF-8 "    /> 
   < meta   name  =  " viewport "   content  =  " width = device- largeur, échelle initiale = 1,0  "   /> 
   < title >  11ty starter site  </  title > 
   < meta   nom  =  " description "   content  =  " Ceci est une démonstration site Web généré à l'aide du générateur de site statique 11ty.  " > 
 </  tête > 
 < carrosserie > 

   < h1 >  11ty site de démarrage  </  h1 > 

   < p >  Ceci est un site Web de démonstration utilisant le  < a   href  =  " https: // www .11ty.dev /  " >  11ty générateur de site statique  </  a > . Il affiche des pages, des articles de blog, des listes et des balises.  </  p > 
   < p >  L'ensemble du processus de construction est géré via 11ty.  </  p > 

 </  corps > 
 </  html >

Remarque: lorsque vous affichez la source dans un navigateur, vous verrez également qu'un

Le meilleur outil 2023 pour ta croissance Instagram !



Source link