11ty est un puissant générateur de site statique basé sur NodeJS.
Chez LinuxAPT, dans le cadre de nos services de gestion de serveur, nous aidons régulièrement nos clients à effectuer des requêtes NodeJS associées.
Dans ce contexte, nous verrons comment installer 11ty sur votre système Ubuntu et générer des sites Web statiques.
Conditions préalables à remplir avant l'installation de 11ty
En tant qu'utilisateur Linux, vous devez disposer des deux packages suivants sur votre système :
- NodeJS
- MNP
Si vous n'avez pas installé NodeJS et NPM sur le système, vous pouvez facilement les installer en exécutant les commandes suivantes :
$ sudo apt update
$ sudo apt install node
$ sudo apt install npm
Remarque :Sans Node.js et NPM, vous ne pourrez pas continuer à travailler avec 11ty.
Ensuite, nous allons créer un nouveau répertoire, nous y déplacer et l'initialiser, respectivement :
$ mkdir newEleventySite
$ cd newEleventySite/
$ npm init -y
Comment installer et créer 11ty Project ?
Pour ce faire, suivez simplement les étapes ci-dessous.
1. Commencez par exécuter 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. Ici, nous n'avons pas choisi d'installer 11ty globalement. Cela rend l'installation plus facile et gérable.
2. Maintenant, lancez Eleventy et vous verrez que certains fichiers ont été écrits. Nous n'avons aucun fichier donc rien ne se passera à ce stade :
$ npx @11ty/eleventy
Maintenant, nous pouvons maintenant créer le site Web et le publier. Avant cela, nous avons besoin d'un modèle.
3. Pour créer un modèle, utilisez le code ci-dessous :
$ echo '<!doctype html><html><head><title>Page title</title></head><body><p>Hi, this is 11ty for Linuxapt.com</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. Une fois que vous avez exécuté la commande ci-dessus, vous remarquerez que 11ty a écrit avec succès les deux pages.
Comment publier le site Web avec 11ty ?
Une fois la création du modèle terminée, 11ty enregistre le site dans le dossier _site. Vous pouvez prendre tous les fichiers exportés et les publier sur votre hôte à l'aide d'un client FTP. Vous pouvez ajouter la commande –serve à la fin pour publier le site Web :
$ npx @11ty/eleventy --serve
Désormais, sur un navigateur Web, lorsque vous exécutez "localhost:8080", vous obtiendrez une réponse telle que celle-ci :
Hi, this is 11ty for Linuxapt.com