Présentation
11ty est un puissant générateur de site statique basé sur NodeJS. Dans ce didacticiel, je vais vous guider étape par étape et vous montrer comment installer 11ty sur votre système Ubuntu et générer des sites Web statiques. J'utilise Ubuntu 20.04 Edition. Toutes les instructions et commandes ne s'appliquent qu'à Ubuntu.
Prérequis
En tant qu'utilisateur Linux, vous devriez avoir les deux packages suivants disponibles sur votre système.
~ NodeJS
~ MNP
Si vous ne les avez pas en ce moment. Installez-les avec les commandes suivantes :
$ sudo apt update
$ sudo apt install node
$ sudo apt install npm
Sans Node.js et NPM, vous ne pourrez pas continuer à travailler avec 11ty.
La meilleure chose à propos de 11ty est que vous n'avez pas besoin de l'installer comme les autres packages de nœuds. Pour l'instant, créons un nouveau répertoire, déplaçons-nous dedans et initialisons-le, respectivement.
$ mkdir newEleventySite
$ cd newEleventySite/
$ npm init -y
Installation et création du projet 11ty
Étape 1. Maintenant, exécutez simplement la commande suivante pour créer un nouveau répertoire pour votre site statique 11ty.
$ npm install --save-dev @11ty/eleventy
Une fois cela fait, 11ty sera installé dans votre répertoire nouvellement créé. Il s'agit d'une installation par projet. Je n'ai pas choisi d'installer 11ty globalement. Cela rend l'installation plus facile et gérable.
Étape 2. Maintenant, lancez Eleventy et vous verrez que certains fichiers ont été écrits. Je n'ai aucun fichier donc rien ne se passera à ce stade.
$ npx @11ty/eleventy
Comme vous pouvez le voir sur l'écran ci-dessus, j'ai exécuté 11ty avec succès. Tout à ce stade fonctionne parfaitement bien. Nous avons travaillé si longtemps, et il est maintenant temps de créer le site Web et de le publier. Avant cela, nous avons besoin d'un modèle.
Créer un modèle
Étape 3. Maintenant, je vais vous aider à créer un modèle. C'est simple et il n'y a rien de complexe à réaliser. Ce n'est qu'un point de départ.
Voici le code :
$ echo '<!doctype html><html><head><title>Page title</title></head><body><p>Hi</p></body></html>' > index.html
$ echo '# Page header' > README.md
Une fois le modèle terminé, vous êtes prêt à publier votre site Web pour le moment. Dans la capture d'écran ci-dessus, vous remarquez que 11ty a écrit avec succès les deux pages.
Publication du site Web
Une fois la création de modèles terminée, 11ty enregistre le site dans _site dossier. Vous pouvez prendre tous les fichiers exportés et les publier sur votre hôte à l'aide d'un client FTP. Comme le montre la capture d'écran ci-dessous, j'ai ajouté la commande –serve à la fin pour publier le site Web.
Voici à quoi cela ressemble dans le navigateur.
Conclusion
Dans ce tutoriel, je vous ai expliqué comment installer Eleventy, qui est un joli générateur de site statique propulsé par NodeJS. Ce guide est destiné aux utilisateurs d'Ubuntu 20.04. J'écris constamment des articles pour différentes distributions. Je vous invite à les lire et à les partager avec vos amis et votre famille.