Comment créer et déployer votre site Web First Eleventy
L'auteur a sélectionné Internet Archive pour recevoir un don dans le cadre du programme Write for DOnations.
Eleventy (également connu sous le nom de 11ty) est un générateur de site statique (SSG) pour la création de sites Web. Il a été lancé en 2017 par Zach Leatherman en tant qu'alternative basée sur JavaScript à Jekyll, l'un des premiers SSG grand public, écrit en Ruby. Eleventy a acquis la réputation d'être l'une des options les plus flexibles et les plus performantes pour la création de sites Web statiques, entraînant une augmentation constante des taux d'adoption dans l'écosystème Jamstack.
Il est important de noter qu'Eleventy n'est pas un framework JavaScript et qu'il n'inclut aucun JavaScript côté client. Il prend des fichiers de modèle spécifiés en HTML, Markdown ou votre choix de langage de modèle et génère un site Web complet et statique prêt à être déployé sur un serveur Web de votre choix.
Alors que la plupart des autres SSG sont limités à un seul langage de modèle, Eleventy prend en charge plusieurs langages de modèle , tels que HTML, Liquid, Markdown, Nunjucks, Handlebars, moustache, EJS, Haml, Pug, etc., et vous pouvez même les combiner dans le même projet. Cette flexibilité est l'une des choses qui distinguent Eleventy de ses concurrents.
Dans ce didacticiel, vous allez développer un site Web statique à partir de zéro avec Eleventy et le déployer gratuitement sur la App Platform de DigitalOcean.
Conditions préalables
Pour terminer ce tutoriel, vous aurez besoin de :
- Un compte DigitalOcean.
- Un compte GitHub.
- Node.js installé et configuré sur votre machine, avec
npm, le gestionnaire de packages Node.js. Pour les instructions d'installation, suivez Comment installer Node.js et créer un environnement de développement local. Notez que la dernière version d'Eleventy au moment de la rédaction (v0.12.1) nécessite Node.js v10 ou une version plus récente. - Git initialisé et configuré sur votre ordinateur local. Pour démarrer avec Git, suivez Comment contribuer à l'Open Source : Premiers pas avec Git.
- Une connaissance de base de HTML, CSS et JavaScript, que vous pouvez trouver dans notre série Comment créer un site Web avec HTML, Comment créer un site Web avec la série CSS, et dans [ X180X]Comment coder en JavaScript.
Étape 1 - Configuration du projet
Contrairement à des concurrents tels que Jekyll et Hugo, Eleventy ne fournit pas de moyen d'échafauder un nouveau projet, vous devrez donc créer un projet Node.js normal, puis ajouter Eleventy en tant que dépendance.
La première étape consiste à lancer le terminal sur votre ordinateur, à créer un nouveau répertoire quelque part sur votre système de fichiers et à y accéder comme indiqué ci-dessous.
mkdir eleventy-blog cd eleventy-blog
A la racine du répertoire eleventy-blog, initialisez le projet avec un fichier package.json avec npm init -y, et installez Eleventy en tant que dépendance de développement en passant le drapeau -D à la sous-commande install.
npm init -y npm install -D @11ty/eleventy
Une fois le package Eleventy installé, inspectez le contenu de votre répertoire de projet avec ls. Il contiendra un fichier package.json, un fichier package-lock.json et un répertoire node_modules.
La sortie devrait ressembler à ceci :
Outputnode_modules package-lock.json package.json
Ouvrez le fichier package.json dans votre éditeur de texte préféré, puis remplacez la propriété scripts existante par les lignes en surbrillance ci-dessous.
onzety-blog/package.json
{
"name": "eleventy-blog",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "eleventy",
"start": "eleventy --serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@11ty/eleventy": "^0.12.1"
}
}
Il y a deux scripts ici : build pour créer les fichiers du site Web et start pour exécuter le serveur Web Eleventy sur http://localhost:8080.
Enregistrez le fichier, puis exécutez la commande ci-dessous pour créer le site Web :
npm run build
La sortie devrait ressembler à ceci :
Output> [email protected] build > eleventy Wrote 0 files in 0.04 seconds (v0.12.1)
La sortie indique que vous n'avez pas encore créé de fichiers, il n'y a donc rien à construire. À l'étape suivante, vous commencerez à ajouter les fichiers nécessaires au site Web.
La structure finale des répertoires du projet sur lequel vous allez travailler est illustrée ci-dessous. Vous commencerez à partir d'un répertoire vide et ajouterez progressivement de nouvelles fonctionnalités jusqu'à ce que vous arriviez à cette structure.
.
├── about
│ └── index.md
├── css
│ └── style.css
├── _data
│ └── site.json
├── _includes
│ ├── layouts
│ │ ├── base.njk
│ │ ├── page.njk
│ │ └── post.njk
│ └── nav.njk
├── index.njk
├── node_modules
├── package.json
├── package-lock.json
├── posts
│ ├── first-post.md
│ ├── second-post.md
│ └── third-post.md
└── _site
├── about
│ └── index.html
├── css
│ └── style.css
├── index.html
└── posts
├── first-post
│ └── index.html
├── second-post
│ └── index.html
└── third-post
└── index.html
Dans cette étape, vous avez créé un projet Node.js et ajouté Eleventy en tant que dépendance. À l'étape suivante, vous choisirez un langage de modèle.
Étape 2 - Choisir une langue de modèle
Pour les besoins de ce didacticiel, nous utiliserons le modèle Nunjucks, un choix courant pour de nombreux projets Eleventy. (Selon vos préférences, vous pouvez également choisir un autre langage de modèles.)
A la racine du répertoire de votre projet, créez un fichier index.njk et ouvrez-le dans votre éditeur de texte. Ajoutez un message "Hello world" au fichier comme indiqué ci-dessous, puis enregistrez le fichier.
onzety-blog/index.njk
<h1>Hello, world!</h1>
Une fois enregistré, exécutez à nouveau la commande build. Il convertira le fichier index.njk en un fichier index.html et le sortira dans un nouveau répertoire _site à la racine du projet.
npm run build
La sortie devrait ressembler à ceci :
Output> [email protected] build > eleventy Writing _site/index.html from ./index.njk. Wrote 1 file in 0.08 seconds (v0.12.1)
À ce stade, vous pouvez afficher le site Web dans le navigateur en démarrant un serveur de développement sur http://localhost:8080 comme indiqué ci-dessous.
npm start
La sortie devrait ressembler à ceci :
Output> [email protected] start > eleventy --serve Writing _site/index.html from ./index.njk. Wrote 1 file in 0.08 seconds (v0.12.1) Watching.. [Browsersync] Access URLs: ----------------------------------- Local: http://localhost:8080 External: http://172.29.217.37:8080 ----------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 ----------------------------------- [Browsersync] Serving files from: _site
Si vous souhaitez utiliser un port différent, vous pouvez le spécifier via l'option --port, comme illustré ici :
npm start -- --port 4040 to set a different port
Le séparateur -- dans la commande ci-dessus est utilisé pour distinguer les paramètres passés à la commande npm elle-même de ceux passés au script. Après avoir démarré le serveur de développement, ouvrez http://localhost:8080 dans votre navigateur Web pour voir le site en action. Vous pouvez quitter le serveur à tout moment en appuyant sur Ctrl + C sur votre clavier.
Dans cette étape, vous avez utilisé Nunjucks comme langage de modèle et commencé à créer un site Web. Dans la section suivante, vous découvrirez les mises en page [1] dans Eleventy et créerez une page d'accueil pour le site Web.
Étape 3 - Création de la page d'accueil
Afin de rendre votre projet plus flexible et évolutif dès le départ, vous devrez créer un modèle de base qui sera appliqué à toutes les pages du site. Classiquement, cela s'appelle la mise en page base, et elle doit aller dans un répertoire layouts imbriqué dans un répertoire _includes. Créez le répertoire _includes/layouts à l'aide de la commande ci-dessous :
mkdir -p _includes/layouts
Dans le répertoire _includes/layouts, créez un fichier base.njk et ouvrez-le dans votre éditeur de texte. Copiez et collez le code suivant dans le fichier. Il s'agit d'un passe-partout HTML5 de base qui servira de base à toutes les pages du site Web.
_includes/layouts/base.njk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<header>
<h1>{{ title }}</h1>
</header>
<main>
{{ content | safe }}
</main>
</body>
</html>
Le contenu entre accolades doubles sont des variables Nunjucks qui seront remplacées en conséquence lors de la construction d'une page dérivée. La variable Modèle:Title sera fournie via le bloc d'introduction de la page tandis que Modèle:Content sera remplacée par tout le contenu de la page entrante qui ne fait pas partie de l'introduction. Ce dernier est acheminé à travers le filtre safe pour l'empêcher de s'échapper.
Revenez au fichier index.njk dans la racine de votre projet et modifiez-le comme indiqué ci-dessous :
onzety-blog/index.njk
--- title: Homepage layout: layouts/base.njk --- <h1>Welcome to this brand new Eleventy website!</h1>
Le contenu de chaque côté des triples tirets constitue la première partie du fichier, tandis que le reste du fichier est ce qui sera transmis à vos mises en page en tant que content. Au début, les title et layout du fichier sont spécifiés en conséquence.
Si votre serveur de développement est toujours en cours d'exécution, accédez à l'URL localhost de votre site pour afficher les modifications ou démarrez d'abord le serveur avec npm start avant d'essayer de l'afficher dans un navigateur Web.
Comme vous pouvez le voir sur la capture d'écran ci-dessus, le modèle base.njk a pris effet sur la page d'accueil.
Dans cette étape, vous avez ajouté un modèle de base pour les pages de votre site et créé une page d'accueil. Cependant, il n'a pas encore de style au-delà des paramètres par défaut du navigateur. Dans la section suivante, vous améliorerez la conception du site Web en ajoutant un menu de navigation.
Le répertoire _includes est l'endroit où vous placerez les différents composants du site Web. Le contenu de ce répertoire sont des fichiers partiels qui peuvent être placés dans vos fichiers de mise en page pour faciliter la réutilisation. Dans cette section, vous allez créer le menu de navigation en tant que partiel et l'inclure dans la mise en page base.
Dans le répertoire _includes, créez un nouveau fichier nommé nav.njk. Ouvrez-le dans votre éditeur et remplissez-le avec le code ci-dessous. Il s'agit du balisage de la barre de navigation supérieure, et il comprend le titre du site ainsi que des liens vers la page d'accueil et une page "À propos" qui reste à créer.
onzety-blog/_includes/nav.njk
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
<div class="navbar-start">
<div class="navbar-item has-text-weight-bold">
My Eleventy Blog
</div>
</div>
<div class="navbar-end">
<a href="/" class="navbar-item">
Home
</a>
<a href="/about" class="navbar-item">
About Me
</a>
</div>
</nav>
Enregistrez et fermez le fichier nav.njk et ouvrez le fichier de modèle de base (_includes/layouts/base.njk) dans votre éditeur. Allez-y et incluez le nouveau partiel de navigation dans ce fichier via la syntaxe include illustrée ci-dessous :
onzety-blog/_includes/layouts/base.njk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ title }}</title>
</head>
<body>
<header>{% include "nav.njk" %}</header>
<main>
{{ content | safe }}
</main>
</body>
</html>
Dans le navigateur, le site devrait ressembler à ceci :
Lorsque vous vérifiez à nouveau la page d'accueil, le menu de navigation devrait apparaître comme dans la capture d'écran ci-dessus. Le titre du site "My Eleventy Blog" est codé en dur dans le partiel nav, mais cela n'est pas optimal car il est probable que vous répéterez le titre ailleurs sur le site, et le changer plus tard devient fastidieux puisque vous allez il faut ensuite trouver chaque endroit où il a été utilisé.
Une meilleure approche consiste à fournir cette valeur via un fichier de données globales. Ce sont des fichiers JSON placés dans un répertoire _data à la racine du projet qui fournissent des données globales accessibles à tous les fichiers modèles. À la racine du projet, créez un répertoire _data, suivi d'un fichier site.json. Ouvrez site.json dans votre éditeur de texte et spécifiez le titre du site à l'aide du code ci-dessous.
onzety-blog/_data/site.json
{
"title": "My Eleventy Blog",
"url": "https://example.com/",
"language": "en-US",
"description": "A simple blog with awesome content"
}
À ce stade, vous pouvez enregistrer et fermer le fichier, puis revenir au fichier nav.njk dans le répertoire _includes et remplacer le titre du site codé en dur par la variable appropriée.
onzety-blog/_includes/nav.njk
. . .
<div class="navbar-item has-text-weight-bold">
{{ site.title }}
</div>
. . .
Le site devrait avoir exactement le même aspect qu'avant, mais ce petit changement facilite grandement la configuration et la mise à jour des données globales. Une chose à noter à propos des variables globales est qu'elles sont limitées au nom du fichier JSON, c'est pourquoi nous avons utilisé Modèle:Site.title ci-dessus. Vous pouvez créer d'autres fichiers de données selon vos besoins et les utiliser dans vos modèles. Par exemple, vous pouvez avoir un fichier author.json contenant vos informations personnelles telles que votre nom, votre biographie et des liens vers vos profils de réseaux sociaux. Ces données pourraient alors être accessibles via des variables (telles que Modèle:Author.bio) sur n'importe quelle page du site Web.
Revenez à votre fichier index.njk à la racine du projet et mettez à jour son contenu comme indiqué ci-dessous afin qu'il utilise le titre et la description du site :
onzety-blog/index.njk
---
title: Homepage
layout: layouts/base.njk
---
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">{{ site.title }}</h1>
<h2 class="subtitle">{{ site.description }}</h2>
</div>
</div>
</section>
Dans le navigateur, le site devrait ressembler à ceci :
Dans cette étape, vous avez ajouté un menu de navigation au site Web. Cependant, le site utilise le style par défaut. Dans la section suivante, vous allez styliser le site Web à l'aide du framework CSS Bulma, qui fournit des composants frontaux basés sur flexbox pour la création de sites Web réactifs.
Étape 5 - Ajouter une feuille de style
Pour le moment, Eleventy ne reconnaît pas les fichiers CSS pour l'inclusion automatique dans le répertoire de construction, donc quelques étapes supplémentaires sont nécessaires pour que cela fonctionne. Plus précisément, vous devrez créer un répertoire de feuilles de style et vous assurer qu'il est copié dans la sortie de génération (_site) lors de la création du site. Vous devrez également vous assurer que la modification d'une feuille de style déclenche une reconstruction et une actualisation automatique dans le navigateur Web. Vous pouvez y parvenir en créant un fichier de configuration pour Eleventy.
À la racine du projet, créez un dossier css suivi d'un fichier style.css. Ouvrez style.css et importez le framework CSS Bulma en utilisant le code ci-dessous :
onze-blog/css/style.css
@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";
Enregistrez le fichier.
Ensuite, créez un fichier .eleventy.js dans la racine de votre projet. Ceci est le fichier de configuration pour Eleventy, similaire aux fichiers _config.yml dans les projets Jekyll. Notez que ce fichier sera caché dans votre système de fichiers car il est précédé d'un point. Vous devrez utiliser ls -a pour le faire apparaître lors de la liste du contenu du répertoire.
Ouvrez .eleventy.js dans votre éditeur de texte et collez ce qui suit pour inclure le répertoire css dans la construction, et aussi pour surveiller les modifications apportées au dossier :
onze-blog/.eleventy.js
module.exports = function (eleventyConfig) {
// Copy the `css` directory to the output
eleventyConfig.addPassthroughCopy('css');
// Watch the `css` directory for changes
eleventyConfig.addWatchTarget('css');
};
À ce stade, vous devez arrêter le serveur avec Ctrl+C et le redémarrer avec npm start avant que les modifications ne prennent effet. Vous devrez le faire chaque fois que vous modifierez le fichier de configuration.
Si vous consultez le site dans votre navigateur en ce moment, vous ne remarquerez aucun changement. C'est parce que la feuille de style n'a encore été liée à aucun modèle. Allez-y et ajoutez-le au modèle base.njk comme indiqué ci-dessous.
onzety-blog/_includes/layouts/base.njk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/style.css" />
<title>{{ title }}</title>
</head>
<body>
<header>{% include "nav.njk" %}</header>
<main>
{{ content | safe }}
</main>
</body>
</html>
Après avoir enregistré le fichier, les styles devraient démarrer immédiatement.
Dans cette étape, vous avez ajouté un style au site Web à l'aide du framework CSS Bulma. À l'étape suivante, vous développerez le site en créant une page "À propos".
Étape 6 - Création d'une page À propos
Pour le moment, il existe un lien vers une page "À propos" inexistante dans le menu de navigation. Vous changerez cela en créant une mise en page unique pour toutes les pages statiques, puis la page "À propos" elle-même. Dans le dossier _includes/layouts, créez un fichier page.njk. Ce sera la mise en page de toutes les pages statiques du site.
Ouvrez le nouveau fichier dans votre éditeur et remplissez-le avec le code ci-dessous. La propriété Front Matter layout est utilisée pour indiquer que la mise en page page doit hériter du modèle base.njk créé précédemment. Ceci est connu sous le nom de layout chaining, et cela nous permet de réutiliser un modèle tout en ajoutant des éléments uniques spécifiques au nouveau modèle, ce qui permet d'éviter la répétition inutile des structures de base du site.
onzety-blog/_includes/layouts/page.njk
---
layout: layouts/base.njk
---
<article class="page-layout">
<div class="container">
<div class="columns">
<div class="column is-8 is-offset-2">
<div class="content mt-5">
<h1>{{ title }}</h1>
{{ content | safe }}
</div>
</div>
</div>
</div>
</article>
Maintenant que vous avez une mise en page, vous pouvez créer la page "À propos". Pour ce faire, créez un répertoire à la racine du projet appelé about et ajoutez-y un nouveau fichier de démarquage index.md.
Ajoutez le code suivant dans le fichier :
onzety-blog/about/index.md
--- title: About Me layout: layouts/page.njk --- I am a person that writes stuff.
Après avoir enregistré le fichier, accédez à https://localhost:8080/about. La page doit se charger correctement avec la mise en page spécifiée.
La création d'autres pages, comme une page de contact ou une page de newsletter, peut se faire de la même manière : créez un répertoire avec le nom de la page, puis ajoutez un fichier index.md à la racine du nouveau répertoire. Vous pouvez également utiliser un fichier HTML ou Nunjucks au lieu de Markdown si vous préférez.
Au cours de cette étape, vous avez créé une mise en page unique pour les pages statiques et ajouté une page "À propos" au site. Dans la section suivante, vous allez créer et traiter des articles de blog sur un site Web Eleventy.
Étape 7 - Création de publications
La création d'un article de blog est très similaire à la création d'une page. Vous commencerez par créer un répertoire appelé posts à la racine du projet pour conserver tous les messages.
Cependant, vous allez créer une mise en page différente pour les publications. Cela va être similaire à la mise en page pour pages, mais vous inclurez une date pour la différencier. Dans un projet réel, il est probable que vous souhaitiez différentes mises en page pour les articles et les pages. Il est donc recommandé de créer une nouvelle mise en page pour chacun.
Dans le répertoire _includes/layouts, créez un nouveau fichier post.njk et ouvrez-le dans votre éditeur de texte. Collez le code ci-dessous dans votre fichier de mise en page post.njk.
onzety-blog/_includes/layouts/post.njk
---
layout: layouts/base.njk
---
<section class="page-layout">
<div class="container">
<div class="columns">
<div class="column is-8 is-offset-2">
<article class="content mt-5">
<h1 class="title">{{ title }}</h1>
<p class="subtitle is-6">
Published on: <time datetime="{{ page.date }}">{{ page.date }}</time>
</p>
{{ content | safe }}
</article>
</div>
</div>
</div>
</section>
Semblable au modèle page.njk, le modèle de publication étend le modèle de base avec des ajouts qui ont du sens pour les publications (comme la date de publication).
Pour utiliser ce modèle, créez un nouveau fichier dans votre répertoire posts appelé first-post.md et ouvrez-le dans votre éditeur de texte.
Collez le contenu suivant dans le fichier first-post.md :
onzety-blog/posts/first-post.md
--- title: My First Blog Post description: This is the first post on my blog tags: post date: 2021-06-19 layout: layouts/post.njk --- You’ll find this post in your `posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `eleventy --serve`, which launches a web server and auto-regenerates your site when a file is updated.
Enregistrez le fichier, puis rendez-vous sur http://localhost:8080/posts/first-post dans votre navigateur. Remarquez comment l'URL correspond à l'emplacement du fichier dans le projet (à l'exclusion de l'extension). C'est ainsi que les URL sont gérées par défaut, mais elles peuvent être modifiées dans un autre format via la clé permalink.
Le message s'affiche correctement, mais notez comment la date est actuellement formatée. Ce format de date est difficile à lire pour les utilisateurs, mais Eleventy ne fournit aucune option de formatage intégrée pour les dates, contrairement à la plupart des autres SSG. Cela signifie que vous devez utiliser un package externe pour obtenir un format plus lisible par l'homme dans Eleventy.
Au cours de cette étape, vous avez créé une mise en page unique pour les articles de blog et ajouté un article de blog au site. Dans la section suivante, vous allez créer un filtre personnalisé qui facilite le formatage de la date.
Étape 8 - Utilisation de filtres dans Eleventy
Eleventy prend en charge les filtres pour transformer le contenu de différentes manières. Par exemple, le filtre safe utilisé précédemment empêche l'échappement du contenu HTML, et il existe d'autres filtres intégrés comme slug pour transformer le texte en chaînes compatibles avec les URL. Vous pouvez également ajouter vos propres filtres personnalisés qui peuvent être utilisés dans n'importe quel modèle. Ces personnalisations peuvent être faites via le fichier de configuration.
Allez-y et ajoutez un filtre universel pour le formatage des dates afin qu'il puisse être utilisé dans le modèle de publication. Commencez par installer Luxon, une bibliothèque JavaScript légère pour le formatage des dates :
npm install --save luxon
Ensuite, ouvrez le fichier de configuration .eleventy.js et mettez à jour son contenu comme suit :
onze-blog/.eleventy.js
const { DateTime } = require('luxon');
module.exports = function (eleventyConfig) {
// Copy the `css` directory to the output
eleventyConfig.addPassthroughCopy('css');
// Watch the `css` directory for changes
eleventyConfig.addWatchTarget('css');
eleventyConfig.addFilter('readableDate', (dateObj) => {
return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat(
'dd LLL yyyy'
);
});
};
Les lignes en surbrillance décrivent comment ajouter un filtre personnalisé à Eleventy. Tout d'abord, vous devez importer tous les objets dont vous avez besoin à partir de n'importe quelle bibliothèque externe. Le type DateTime de Luxon propose plusieurs méthodes de formatage.
L'ajout d'un filtre implique l'appel de la méthode addFilter() fournie par l'argument eleventyConfig. Il prend le nom du filtre comme premier argument, et la fonction de rappel est ce qui sera exécuté lorsque le filtre est utilisé. Dans l'extrait de code ci-dessus, le filtre s'appelle readableDate et la fonction de rappel est utilisée pour formater un objet de date à l'aide des jetons de datefournis. Cela donnera une date au format suivant : 19 juillet 2021.
Enregistrez le fichier de configuration et redémarrez le serveur pour que les modifications prennent effet. Utilisez ensuite le filtre readableDate dans le modèle de publication comme indiqué ci-dessous pour formater la date de publication en fonction de la mise en page spécifiée.
onzety-blog/_includes/layouts/post.njk
. . .
<p class="subtitle is-6">
Published on: <time datetime="{{ page.date }}">{{ page.date | readableDate }}</time>
</p>
. . .
Une fois que vous ouvrez la publication dans votre navigateur, vous remarquerez que le formatage de la date a été mis à jour.
Dans cette étape, vous avez ajouté un filtre pour modifier le formatage de la date sur les articles de blog. Dans la section suivante, vous afficherez une liste de messages sur la page d'accueil, comme c'est le cas sur la plupart des blogs personnels.
Étape 9 - Affichage des publications sur la page d'accueil
Pour faciliter la découverte des articles du blog par les visiteurs de votre site, il est judicieux de les répertorier sur la page d'accueil. Vous utiliserez la fonctionnalité collections d'Eleventy afin de mettre en œuvre cette fonctionnalité.
Avant de procéder à la mise à jour du fichier index.njk, vous devez créer au moins trois messages supplémentaires à présenter sur la page d'accueil. Vous pouvez copier le premier article dans de nouveaux fichiers et modifier le titre et la description de chacun d'eux. Une fois que vous avez terminé, mettez à jour votre fichier index.njk comme indiqué ci-dessous :
onzety-blog/index.njk
---
title: Homepage
layout: layouts/base.njk
---
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">{{ site.title }}</h1>
<h2 class="subtitle">{{ site.description }}</h2>
</div>
</div>
</section>
<section class="postlist mt-3 pt-3">
<div class="container">
<h2 class="title has-text-centered mt-3 mb-6">Recent posts</h2>
<div class="columns">
{% for post in collections.post | reverse %}
{% if loop.index0 < 3 %}
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">
{{ post.data.title }}
</p>
</header>
<div class="card-content">
<div class="content">
{{ post.data.description }}
</div>
</div>
<footer class="card-footer">
<a href="{{ post.url }}" class="button is-fullwidth is-link card-footer-item">Read article</a>
</footer>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
La construction for loop dans l'extrait ci-dessus provient du langage de modélisation Nunjucks, et c'est l'un des moyens d'itérer sur une collection dans Eleventy. Il commence par {% for post in collection.post | reverse %} et se termine par {% endfor %}. La collection post est créée par Eleventy et se compose de toute page dont la propriété liminaire tags est définie sur post.
Le filtre reverse est utilisé ici pour que l'itération commence à partir de la publication la plus récente au lieu de l'ordre par défaut, qui place les publications les plus anciennes en premier. Dans la boucle, la sortie de la collection est limitée à trois éléments et la variable locale post est utilisée pour accéder au titre, à la description et à l'URL de chaque article de la collection.
Après avoir enregistré le fichier, accédez à la page d'accueil du navigateur pour voir les résultats. Cela devrait ressembler à la capture d'écran ci-dessous.
Au cours de cette étape, vous avez créé des articles de blog supplémentaires et utilisé la fonctionnalité de collections d'Eleventy pour les répertorier sur la page d'accueil du site Web. Vous avez maintenant un site Web stylisé avec une page d'accueil, une page "À propos" et quelques publications. Ensuite, vous le déploierez en production via GitHub et la plateforme d'applications de DigitalOcean.
Étape 10 - Pousser le site Web vers GitHub
Avant de pouvoir déployer votre code sur la plate-forme d'applications de DigitalOcean, vous devez placer votre site dans un référentiel Git et transférer ce référentiel vers GitHub. La première chose à faire est d'initialiser un dépôt Git dans votre répertoire de projet :
git init
Ensuite, créez un fichier .gitignore à la racine du projet afin de pouvoir exclure le contenu des répertoires node_modules et _site du suivi dans le référentiel Git.
.gitignore
node_modules _site
Après avoir enregistré le fichier, exécutez les commandes ci-dessous pour ajouter tous les fichiers du projet à la zone de staging, puis effectuez votre commit initial :
git add -A git commit -m "Initial version of the site"
La sortie devrait ressembler à ceci :
Output[master (root-commit) e4e2063] Initial version of the site 15 files changed, 6914 insertions(+) create mode 100644 .eleventy.js create mode 100644 .gitignore create mode 100644 _data/site.json create mode 100644 _includes/layouts/base.njk create mode 100644 _includes/layouts/page.njk create mode 100644 _includes/layouts/post.njk create mode 100644 _includes/nav.njk create mode 100644 about/index.md create mode 100644 css/style.css create mode 100644 index.njk create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 posts/first-post.md create mode 100644 posts/second-post.md create mode 100644 posts/third-post.md
Accédez à GitHub, connectez-vous avec votre profil et créez un nouveau référentiel vide pour votre projet appelé eleventy-blog (il peut être public ou privé). Une fois le référentiel GitHub créé, copiez le lien vers le référentiel et ajoutez-le en tant qu'emplacement distant pour votre projet dans le terminal :
git remote add origin https://github.com/username/eleventy-blog.git
Avant de pousser vos modifications vers l'emplacement distant, renommez la branche par défaut en main pour correspondre à ce que GitHub attend :
git branch -M main
Enfin, exécutez la commande ci-dessous pour pousser la branche main vers GitHub. Entrez les informations d'identification de votre compte GitHub lorsque vous y êtes invité.
Remarque : Si l'authentification à deux facteurs est activée pour votre compte GitHub, vous devrez utiliser un jeton d'accès personnel ou une clé SSH pour accéder à GitHub sur la ligne de commande. Pour plus d'informations, voir Utilisation de l'authentification à deux facteurs avec la ligne de commande.
git push origin main
La sortie devrait ressembler à ceci :
OutputEnumerating objects: 23, done. Counting objects: 100% (23/23), done. Delta compression using up to 4 threads Compressing objects: 100% (19/19), done. Writing objects: 100% (23/23), 64.41 KiB | 2.38 MiB/s, done. Total 23 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To https://github.com/username/eleventy-blog.git * [new branch] main -> main
Dans cette étape, vous avez ajouté votre site à un référentiel Git, que vous avez ensuite poussé vers GitHub. Vous êtes maintenant prêt à déployer votre site Web sur la plateforme d'applications de DigitalOcean.
Étape 11 - Déploiement sur DigitalOcean avec App Platform
Allez-y et connectez-vous à votre compte DigitalOcean, puis rendez-vous sur https://cloud.digitalocean.com/apps et cliquez sur le bouton vert Créer en haut à droite. Choisissez l'option Apps dans la liste déroulante, puis, sur la page résultante, sélectionnez GitHub comme source.
Vous serez redirigé vers GitHub et invité à donner à DigitalOcean l'accès à vos référentiels. Vous pouvez choisir tous les référentiels ou uniquement ceux que vous souhaitez déployer. Cliquez sur Installer et autoriser une fois que vous avez fait votre choix. Vous devriez être à nouveau redirigé vers la page Choisir la source.
Sur la page Choose Source, sélectionnez GitHub, puis choisissez le référentiel eleventy-blog dans la liste déroulante Repository. Assurez-vous que la branche sélectionnée est main et que la case à cocher pour déployer automatiquement les changements de code est cochée, puis cliquez sur Suivant pour continuer.
Sur la page suivante, votre projet sera automatiquement détecté en tant que projet Node.js. Vous devrez peut-être changer son Type en Site statique, et le Répertoire de sortie en _site comme indiqué dans la capture d'écran ci-dessous. Cliquez sur Suivant pour continuer une fois que tout correspond.
Nommez votre site statique et cliquez sur Suivant pour accéder à l'écran Finaliser et lancer.
Les sites statiques sont gratuits, conservez donc la sélection par défaut Starter sous Plans, et appuyez sur Launch Starter App en bas de la page.
Votre site se construira immédiatement et vous devriez voir un message de réussite après quelques minutes.
Par défaut, votre application se verra attribuer un sous-domaine sur ondigitalocean.app. Maintenant que votre site est déployé, vous pouvez visiter l'URL fournie pour afficher le site Web en direct dans votre navigateur. Vous pouvez également enregistrer un domaine personnalisé pour votre site en suivant Comment gérer les domaines dans la plateforme d'applications.
Conclusion
Dans ce didacticiel, vous avez créé un site statique avec Eleventy et l'avez déployé sur la plate-forme d'applications de DigitalOcean. À l'avenir, vous pouvez apporter des modifications à votre site Web localement, appliquer les modifications à GitHub et DigitalOcean mettra automatiquement à jour le site en direct. Vous pouvez accéder au tableau de bord de l'application pour voir la progression de la construction à tout moment.
Pour tirer parti de ce que vous avez réalisé dans ce didacticiel, consultez les Eleventy docs pour en savoir plus sur la façon dont vous pouvez personnaliser les modèles de votre site et ajouter des fonctionnalités telles que images réactives, . coloration syntaxique et mise en cache. Si vous souhaitez démarrer rapidement sans créer votre propre thème à partir de rien, consultez la page des projets de démarrage [2].
