Avec l’essor des générateurs de sites statiques (Static Site Generator ou SSG) comme Eleventy, la création d’un site web statique élégant et efficace n’a jamais été aussi facile.
Dans cet article, nous verrons comment utiliser Eleventy pour créer un site web statique de portfolio à la fois étonnant et fonctionnel, sans avoir besoin d’un langage côté serveur ou d’une base de données.
Vous apprendrez également comment déployer votre site web statique directement depuis votre dépôt GitHub vers l’hébergement de site statique de Kinsta, obtenant ainsi rapidement la production de votre site web sur un domaine gratuit .kinsta.page.
Voici une démonstration en direct du site de portfolio statique que vous construirez avec Eleventy.
Vous pouvez accéder au dépôt GitHub de ce projet si vous souhaitez l’examiner de plus près.
Qu’est-ce qu’Eleventy ?
Eleventy, également connu sous le nom de 11ty, est un générateur de sites statiques qui crée des sites web alimentés par HTML, CSS et JavaScript sans avoir besoin de bases de données ni de langages de programmation backend.
Eleventy est connu pour sa simplicité et sa flexibilité, car il ne vous oblige pas à utiliser un seul langage de modèle ou un seul framework. Il prend en charge plus de 10 langages de modèles et vous permet même d’en utiliser autant que vous le souhaitez dans un même projet :
Eleventy, comme la plupart des SSG, vous permet de construire le contenu de votre site statique en utilisant des composants réutilisables plutôt que de créer des documents HTML complets pour chaque page.
Comment installer Eleventy
Il est facile d’installer Eleventy. Voici comment procéder :
- Assurez-vous que Node.js est installé sur votre ordinateur. Vous pouvez le vérifier en lançant la commande
node -vdans votre terminal. Vous n’êtes pas disponible ? Voici comment installer Node.js sur votre ordinateur. - Créez un nouveau répertoire pour votre projet.
- Ouvrez votre terminal et exécutez la commande
npm init -ydans le répertoire de votre projet pour initialiser un nouveau projet Node.js, en créant un fichier package.json avec les réglages par défaut. - Exécutez la commande
npm install @11ty/eleventy --save-devpour installer le package en tant que dépendance de développement dans votre projet. - Voilà, c’est fait ! Vous pouvez maintenant lancer Eleventy en exécutant la commande
npx @11ty/eleventydans le répertoire de votre projet. Cette commande générera les fichiers de votre site et les placera dans un répertoire _site (ou dans le répertoire que vous avez configuré) dans le dossier de votre projet.
Note : Lorsque vous exécutez la commande npx @11ty/eleventy. Vous obtiendrez ce résultat :
[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)Ici, 0 fichier est écrit car il n’y a pas de modèles dans le dossier de votre projet.
Commandes et configuration d’Eleventy
Vous avez maintenant créé votre projet Eleventy, mais ce n’est pas tout. Vous devez créer quelques configurations et connaître quelques commandes de base pour votre site statique qui peut être servi au navigateur.
Commandes Eleventy
Voici quelques-unes des principales commandes d’Eleventy que vous devez connaître :
npx @11ty/eleventy: Cette commande est utilisée pour construire votre site et produire le résultat dans le dossier _site (ou tout autre dossier que vous avez configuré comme répertoire de sortie).npx @11ty/eleventy --serve: Cette commande démarre un serveur local afin que vous puissiez prévisualiser votre site dans votre navigateur. Lorsque vous apportez des modifications à votre site, votre projet est automatiquement reconstruit et mis à jour dans votre navigateur.npx @11ty/eleventy --serve --port=8081: Cette commande démarre le serveur Eleventy et spécifie un port personnalisé sur lequel le serveur écoutera.npx @11ty/eleventy --watch: Cette commande surveille les modifications apportées aux fichiers de votre projet et reconstruit automatiquement votre site si nécessaire.
Vous n’avez pas besoin de mémoriser ces commandes car vous pouvez les ajouter aux commandes générales dans l’objet scripts de votre fichier package.json :
"scripts": {
"build": "npx @11ty/eleventy",
"start": "npx @11ty/eleventy --serve",
"watch": "npx @11ty/eleventy --watch"
},Vous pouvez maintenant utiliser npm start pour servir votre application au lieu de npx @11ty/eleventy --serve, et vous pouvez également exécuter npm run build au lieu de npx @11ty/eleventy.
Comment configurer votre site statique avec Eleventy
Eleventy est « zero-config » par défaut et dispose d’options de configuration flexibles. Voici quelques options de configuration clés que vous devriez connaître :
- input : Cette option vous permet de spécifier le répertoire de vos fichiers de projet. La meilleure pratique est d’utiliser src.
- output : Cette option vous permet de spécifier le répertoire dans lequel votre site construit doit être modifié. Par défaut, Eleventy produit le site dans le dossier _site. (Il n’est pas nécessaire de modifier ceci).
- templateFormats : Cette option vous permet de spécifier quelles extensions de fichiers doivent être traitées comme modèles. Par défaut, Eleventy traite les fichiers .html, .njk et .md comme des modèles.
Il ne s’agit là que de quelques commandes et options de configuration disponibles dans Eleventy. Pour configurer votre projet Eleventy, créez un fichier .eleventy.js à la racine de votre projet. Collez ensuite ce code dans le fichier pour donner à votre projet une structure qui inclut le répertoire input :
module.exports = function (eleventyConfig) {
return {
dir: {
input: 'src',
},
};
};Remarque : eleventyConfig est transmis en tant qu’argument, fournissant plus d’options de configuration qui seront utilisées plus tard dans ce projet.
Comment prévisualiser un site Eleventy
Vous connaissez maintenant quelques commandes clés qui peuvent être utilisées pour prévisualiser votre site Eleventy statique, mais lorsque vous exécutez la commande npm run build (npx @11ty/eleventy), rien n’est servi. C’est parce que vous n’avez pas de fichier de modèle.
Vous pouvez créer un dossier src dans le dossier racine de votre projet, puis créer des fichiers modèles tels que index.html ou utiliser votre langage modèle préféré pour représenter la page d’accueil :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Eleventy Static Site</title>
</head>
<body>
Hello World!
</body>
</html>Si vous exécutez maintenant la commande npm run build, un dossier _site sera créé avec le fichier statique généré. Vous voudrez certainement que celui-ci soit servi à votre navigateur et activer certaines fonctionnalités de rechargement à chaud. Ceci est possible en utilisant la commande npx @11ty/eleventy --serve que vous avez maintenant configurée comme npm start. Cela servira votre site sur http://localhost:8080/.
Comment créer un site web statique de portfolio avec Eleventy
Vous savez maintenant comment créer un site statique avec Eleventy. Créons le projet de portfolio.
Vous pouvez créer un nouveau projet Eleventy à partir de zéro, ou utiliser nos fichiers de démarrage qui incluent les images, le CSS et le contenu de ce projet pour vous aider à accélérer les choses. Dans GitHub, sélectionnez Utiliser ce modèle > Créer un nouveau dépôt pour copier ces actifs et les fichiers de configuration initiaux dans un nouveau dépôt qui vous est propre, puis téléchargez-les sur votre machine locale.
Votre projet aura la structure suivante :
├── node_modules/
├── public/
├── src/
├── _includes
├── layouts
├── assets
├── css
├── projects
└── index.njk
├── .eleventy.js
├── .gitignore
├── package.lock.json
└── package.jsonComment utiliser les modèles dans Eleventy
Lorsque vous utilisez Eleventy, il existe trois principaux types de modèles que vous devez comprendre. Ces modèles peuvent être créés avec Nunjucks, qui vous permet de définir des variables, des boucles, des conditions et d’autres éléments logiques qui peuvent être utilisés pour générer dynamiquement le contenu de la page.
- Modèles de page : Ils définissent la structure et le contenu des pages individuelles de votre site web.
- Modèles de mise en page : Ils définissent la structure globale et la conception des pages de votre site web. Ils comprennent généralement des éléments communs tels que les en-têtes, les pieds de page, les menus de navigation et les barres latérales, qui sont partagés par plusieurs pages.
- Modèles partiels : Ils définissent de petites sections réutilisables du balisage HTML de votre site web. Ils sont utilisés pour définir des éléments communs tels que les en-têtes, les pieds de page, les menus de navigation et les barres latérales, qui peuvent être inclus dans les modèles de mise en page et de page.
Maintenant que vous avez compris chacun de ces types de modèles. Créons des modèles pour le site Web statique du portfolio.
Comment créer des mises en page dans Eleventy
Dans le répertoire src, créez un répertoire _includes. Il contiendra toutes nos mises en page et tous les éléments partiels.
Vous pouvez créer un dossier layouts pour organiser tous vos modèles, en utilisant votre langage de mise en page préféré, tel que Nunjucks.
Créez un fichier base.njk qui contiendra votre mise en page générale pour toutes vos pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{{ content | safe }}
</div>
</body>
</html>Dans le code ci-dessus, un balisage HTML général est créé et Font Awesome est inclus à partir d’un CDN afin que vous puissiez avoir accès à ses icônes. De plus, la variable content est passée afin que tout le contenu de n’importe quelle page utilisant cette mise en page soit inclus.
Mais ce n’est pas tout. Votre mise en page comportera des sections qui apparaîtront sur chaque page, telles que la barre de navigation et le pied de page. Créons des partiels pour chacune de ces sections.
Comment utiliser les partiels dans Eleventy
Tous les partiels sont stockés dans le répertoire _includes. Pour une bonne organisation, vous pouvez les stocker dans un dossier components au sein du répertoire _includes. Créez un fichier navbar.njk et stockez le code ci-dessous pour les éléments partiels de votre barre de navigation.
<div class="nav-container">
<div class="logo">
<a href="/">
J.
</a>
</div>
<div class="nav">
<a href="/projects" class="link">
Projects
</a>
<a href="https://docs.google.com/document/d/10ZosQ38Z3804KYPcb_aZp9bceoXK-q3GrkHjYshqIRE/edit?usp=sharing" class="cta-btn">Resume</a>
</div>
</div>Créez ensuite un fichier footer.njk pour vos éléments partiels de pied de page :
<hr />
<div class="footer-container">
<p>© 2023 Joel's Portfolio</p>
<div class="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>Ajoutez ces éléments partiels à votre modèle de page ou de mise en page à l’aide de l’instruction {% include %}. Voici à quoi ressemblera le modèle layouts/base.njk quand vous aurez inclus les éléments partiels Navbar et Footer :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{{ content | safe }}
{% include "components/footer.njk" %}
</div>
</body>
</html>Lorsque vous exécutez la commande npm start, cette mise en page n’apparaît pas car elle n’a pas été ajoutée à un modèle de page. Créez un modèle de page et ajoutez cette mise en page.
Comment créer des modèles de page dans Eleventy
Dans votre dossier src, créez un fichier index.njk qui servira de page d’accueil à votre site de portfolio. Cette page utilisera la mise en page de base :
---
layout: layouts/base.njk
title: Home
---
<h1> This is the {{title}} Page. </h1>Lorsque vous exécutez la commande npm start, votre site statique se chargera sur http://localhost:8080/. Voici à quoi ressemblera la sortie :
Comment utiliser le CSS et les images dans Eleventy
Vous remarquerez que dans le fichier layouts/base.njk, un fichier CSS est lié pour styliser la page du portfolio, mais quand le site se charge, les styles CSS ne sont pas affectés parce que le fichier CSS n’est pas ajouté au dossier _site.
Pour que le CSS fonctionne, configurez-le dans votre fichier .eleventy.js à l’aide du paramètre eleventyConfig Cela permet à Eleventy de savoir que le(s) fichier(s) CSS existe(nt) et de surveiller les éventuelles modifications apportées au fichier CSS.
Dans le dossier src, vous pouvez créer un dossier css pour stocker tous les fichiers CSS que vous utiliserez dans votre projet, mais pour cet article, vous pouvez utiliser un seul fichier CSS – global.css. Vous pouvez ensuite configurer le dossier css de manière à ce qu’il configure tous les fichiers qui s’y trouvent :
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');Il en va de même pour les images. Si vous ajoutez des images dans votre page, elles ne s’afficheront pas tant que vous n’aurez pas configuré le dossier dans lequel vos images sont stockées. Créez un dossier assets pour stocker toutes nos images et configurez le dossier assets.
eleventyConfig.addPassthroughCopy('src/assets');Voici à quoi ressemblera votre fichier de configuration :
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
return {
dir: {
input: 'src',
},
};
};Lorsque vous lancez npm start, le style CSS fonctionnera et votre page d’accueil ressemblera à ceci :
Création de partiels et ajout à la page d’accueil
Vous avez maintenant réussi à créer une mise en page et à l’ajouter à votre page d’accueil (index.njk). Personnalisons la page d’accueil pour qu’elle contienne des informations vous concernant, telles que des informations complémentaires sur vous, vos compétences et vos coordonnées.
Vous pouvez décider d’ajouter votre code et votre balisage directement au modèle index.njk, mais créons des partielles individuelles pour le héros, à propos, les compétences et les informations de contact.
Les partiels Hero
Il s’agit de la première section en dessous de la barre de navigation, dont l’objectif principal est de donner aux utilisateurs une idée du contenu du site web.
<div class="hero-container">
<img src='assets/profile.jpeg' class="profile-img" alt="Joe's personal headshot" />
<div class="hero-text">
<h1>Hey, I'm Joe 👋</h1>
<p>
I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between.
</p>
<div class="social-icons">
<a href="https://twitter.com/olawanle_joel">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://github.com/olawanlejoel">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/olawanlejoel/">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>Quelques détails vous concernant sont inclus dans le code ci-dessus, ainsi que quelques icônes sociales pour connecter des liens vers vos profils de réseaux sociaux.
Les éléments partiels Hero devraient ressembler à ceci :
Vous pouvez ajouter du contenu à la section Hero, modifier les styles dans le fichier css/globals.css ou même créer votre propre version de cette section.
Les partiels À propos
La section « À propos » donne aux visiteurs de votre portfolio plus d’informations sur vous, en autant de paragraphes que vous le souhaitez. Cette section peut faire l’objet d’une page séparée si vous avez plus d’informations à communiquer.
<div class="about-container">
<h2>About Me</h2>
<div class="flex-about">
<div class="about-text">
<p>
As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality.
</p>
<p>Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.</p>
</div>
<div class="about-img">
<Image src='/assets/about.jpeg' class="profile-img" alt="Joe and animal relaxing and having fun" />
</div>
</div>
</div>Le code contient des informations sur vous (une image et du texte). Voici à quoi est censée ressembler la section « À propos » :
Partiels Compétences
Cette section est utilisée pour afficher les technologies que vous utilisez ou que vous aimez utiliser.
<div class="skills-container">
<h2>Skills</h2>
<div class="grid-skills">
<div class="skill-card html">
<i class="fa-brands fa-html5 html-icon"></i>
<p>HTML</p>
</div>
<div class="skill-card css">
<i class="fa-brands fa-css3-alt css-icon"></i>
<p>CSS</p>
</div>
<div class="skill-card js">
<i class="fa-brands fa-js-square js-icon"></i>
<p>JavaScript</p>
</div>
<div class="skill-card react">
<i class="fa-brands fa-react react-icon"></i>
<p>React</p>
</div>
<div class="skill-card node">
<i class="fa-brands fa-node-js node-icon"></i>
<p>Node</p>
</div>
<div class="skill-card python">
<i class="fa-brands fa-python python-icon"></i>
<p>Python</p>
</div>
</div>
</div>Le code ci-dessus crée une carte qui contient l’icône de la technologie et le nom de chaque compétence. Vous pouvez également ajouter d’autres styles et modifier le code pour le rendre plus attrayant et distinct. Voici à quoi est censée ressembler la section des compétences :
Partiels contact
Comme il s’agit d’un portfolio, vous devez ajouter un moyen pour les clients/employeurs potentiels de vous contacter. L’un des moyens serait d’ajouter un e-mail.
<div class="contact-container">
<h2>Get In Touch</h2>
<p>If you want us to work together, have any question or want me to speak at your event, my inbox is always open. Whether just want to say hi, I'll try my best to get back to you! Cheers!</p>
<a href="mailto:[email protected]" class='cta-btn'>Say Hello</a>
</div>Remplacez l’adresse e-mail de la balise a par la vôtre afin que le bouton lance une application de messagerie permettant aux internautes de vous envoyer un message.
Vous avez créé avec succès tous les éléments partiels de votre page d’accueil. Vous devez maintenant les inclure dans votre fichier index.njk pour qu’ils s’affichent sur la page d’accueil :
---
layout: layouts/base.njk
title: Home
---
{% include "components/hero.njk" %}
{% include "components/about.njk" %}
{% include "components/skills.njk" %}
{% include "components/contact.njk" %}Lorsque vous exécutez la commande npm start, votre page d’accueil affichera tout les partiels ajoutés en conséquence.
Comment utiliser les collections dans Eleventy
Dans Eleventy, les collections sont un moyen de regrouper du contenu similaire afin de générer des pages basées sur ce contenu. Par exemple, si vous avez des fichiers markdown de contenu similaire (articles de blog) stockés dans un dossier blog de votre projet, vous pouvez utiliser les collections pour les récupérer et afficher une liste de tout le contenu. Vous pouvez également créer une mise en page pour gérer l’affichage de ces contenus.
Les collections sont définies dans le fichier de configuration .eleventy.js et peuvent inclure des données provenant de diverses sources, telles que des fichiers markdown ou JSON.
Pour ce site de portfolio, créons un répertoire projects dans le répertoire src, pour stocker le contenu markdown de chaque projet. Ce contenu comprendra des détails sur le projet, le problème résolu, les technologies utilisées, les défis rencontrés et les leçons tirées.
Vous pouvez créer un fichier markdown avec le nom du projet (quotes-generator.md) et coller le code ci-dessous :
---
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
The quotes generator project is a software tool designed to display random inspirational or thought-provoking quotes to users. This project aims to solve the problem of lack of motivation or inspiration by providing users with a quick and easy way to access inspiring quotes.
### Technologies Used
The technologies used in this project include HTML, CSS, and JavaScript. The application utilizes an API to fetch random quotes and display them to the user.
### Challenges and Lessons Learned
One of the main challenges faced during this project was designing the user interface to be visually appealing and responsive on different devices. The team had to consider various design elements such as font sizes, colors, and layout to create a user-friendly and aesthetically pleasing interface.
Another challenge was handling errors and edge cases such as network connectivity issues or invalid API responses. The team had to implement error handling and fallback mechanisms to ensure that the application would continue to function smoothly under various conditions.
Throughout the project, the team learned valuable lessons about front-end development, such as the importance of clean and efficient code, effective debugging and troubleshooting, and responsive design principles. They also learned the importance of utilizing APIs to access and display data from external sources.
Overall, the quotes generator project was a valuable learning experience that allowed the team to develop their technical and creative skills, and create a useful tool for users looking for daily inspiration or motivation.Note : Si vous avez utilisé le modèle de démarrage, vous devriez déjà les avoir, sinon vous pouvez les copier depuis le répertoire projects de notre modèle de démarrage sur GitHub.
Le frontmatter en haut de ces fichiers, rend les valeurs disponibles pour l’injection dans vos modèles.
Comme ces fichiers Markdown se trouvent dans le répertoire src, Eleventy les traitera comme des modèles et générera une page HTML pour chacun d’entre eux. Leur URL sera quelque chose comme /projects/quotes-generator.
Eleventy, cependant, ne saura pas quelle mise en page utiliser pour ces pages parce qu’elles n’ont pas encore de valeur de mise en page dans leur frontmatter.
Créons d’abord une mise en page pour ce contenu avant de créer une collection et de les ajouter sous forme de liste à une page dédiée aux projets.
Comme précédemment, créez un fichier de mise en page (project.njk) dans le dossier layouts. Pour éviter les répétitions, puisque ce fichier utilisera le balisage HTML par défaut, vous ajusterez la mise en page base.njk en créant un bloc pour indiquer la section de votre mise en page qui sera modifiée.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{% block content %}
{{ content | safe }}
{% endblock %}
{% include "components/footer.njk" %}
</div>
</body>
</html>Le bloc reçoit un nom de contenu car vous pouvez avoir plusieurs blocs dans vos modèles. Vous pouvez maintenant étendre ce principe à votre mise en page project.njk, de sorte que vous n’avez plus qu’à spécifier le bloc content :
{% extends "layouts/base.njk" %}
{% block content %}
<div class="project-layout">
<h2>{{title}}</h2>
<img src="{{image}}" alt="image" class="banner-img" />
<a href="{{gitHubURL}}" class="cta-btn pt-btn">
<div class="small-icons">
GitHub <i class="fa-brands fa-github"></i>
</div>
</a>
{{ content | safe }}
</div>
{% endblock %}Dans le code ci-dessus, vous indiquez comment chaque projet sera affiché. Il récupère le titre, l’image et le gitHubURL du frontmatter, puis ajoute d’autres contenus en utilisant la variable content ({{ content | safe }}).
L’étape suivante consiste à ajouter la mise en page à la page d’accueil de chaque projet :
---
layout: layouts/project.njk
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
…Lorsque vous rechargez l’URL de chaque projet, par exemple /projects/quotes-generator, vous remarquerez qu’elle utilise désormais la mise en page créée :
Comment utiliser les collections dans les modèles
Chacun de vos projets s’affiche désormais joliment avec la mise en page spécifiée, mais comment les internautes peuvent-ils accéder à ces projets ? Vous devez créer une liste sur laquelle les utilisateurs peuvent cliquer pour accéder à chaque projet. C’est là que les collections entrent en jeu.
Pour utiliser une collection, vous devez la définir dans le fichier de configuration .eleventy.js en utilisant la méthode addCollection().
module.exports = function (eleventyConfig) {
// …
eleventyConfig.addCollection('projects', (collection) => {
return collection.getFilteredByGlob('src/projects/*.md');
});
return {
// ...
};
};Dans le code ci-dessus, la méthode addCollection() est utilisée pour définir une collection appelée projects. La fonction de rappel passée à addCollection() renvoie tous les fichiers markdown dans le répertoire projects à l’aide de la méthode getFilteredByGlob().
Une fois que vous avez défini une collection, vous pouvez l’utiliser dans un modèle pour générer des pages basées sur ce contenu. Créons un modèle de page projects.njk, qui utilisera la mise en page de base.njk :
---
layout: layouts/base.njk
title: Projects
---
<div class="projects-container">
<h2>Projects</h2>
<div class="projects-grid">
{% for project in collections.projects %}
<div class="project-card">
<div class="project-header">
<i class="fa-regular fa-folder-open folder-icon"></i>
<div class="small-icons">
<a href={{project.data.gitHubURL}}><i class="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{{project.data.title}}</h3>
<p>{{project.data.description}}</p>
<a href="{{project.url}}" class="cta-btn">Read more</a>
</div>
{% endfor %}
</div>
</div>Dans le code ci-dessus, l’instruction {% for %} est utilisée pour parcourir en boucle tous les projets de la collection et générer une fiche de projet pour chacun d’entre eux.
Vous aurez accès à toutes les variables en utilisant project.data.[key]. Par exemple, le code ci-dessus affichera le titre, la description et l’URL GitHub du projet. Vous pouvez également accéder à l’URL du projet en utilisant project.url.
Lorsque vous exécutez la commande npm start et que vous naviguez jusqu’à la page des projets, voici à quoi ressemblera votre page lorsque vous aurez ajouté plusieurs projets :
Comment utiliser les codes courts
Les codes courts permettent de définir des balises HTML personnalisées ou des valeurs dynamiques JavaScript que vous pouvez réutiliser dans vos modèles. Par exemple, vous pouvez définir un code court pour générer l’année en cours et l’ajouter à votre site web.
Dans le fichier de configuration .eleventy.js, vous pouvez définir un code court à l’aide de la méthode addShortcode(). Par exemple, le code suivant définit un code court appelé year :
module.exports = function (eleventyConfig) {
// ...
eleventyConfig.addShortcode('year', () => {
return `${new Date().getFullYear()}`;
});
return {
// ...
};
};Le shortcode year ci-dessus renvoie l’année en cours, que vous pouvez ajouter à n’importe quel modèle de votre projet. Par exemple, au lieu de coder en dur l’année dans le pied de page de ce site web, vous pouvez l’ajouter dynamiquement à l’aide de {% year %}, de manière à ce qu’elle se mette à jour chaque année :
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
// ...
</div>
</div>Lors du rendu de la page, la sortie inclura l’année en cours dans la balise HTML p.
Comment ajouter un thème à un site Eleventy
L’ajout d’un thème à un site Eleventy peut être un excellent moyen de personnaliser rapidement l’aspect et la convivialité de votre site. Officiellement, Eleventy fait référence aux thèmes en tant que « starters » (ils signifient la même chose). De nombreux sites web fournissent des thèmes Eleventy gratuits, tels que les thèmes officiels Eleventy et les thèmes Jamstack.
Tout ce que vous avez à faire est de sélectionner votre thème ou démarreur préféré, puis d’accéder à son dépôt GitHub pour le cloner sur votre machine locale. Veillez à lire la documentation pour connaître les étapes de configuration et de personnalisation des projets.
Exécutez npm install pour installer tous les paquets utilisés, puis exécutez npm start pour servir votre application localement à http://localhost:8080/.
Comment déployer un site Eleventy
Vous avez maintenant réussi à créer un site web statique de portfolio élégant avec Eleventy. Avoir ce type de site sur votre machine locale n’est pas suffisant. Vous voudriez l’héberger en ligne pour le partager avec votre public.
Kinsta est une plateforme cloud qui vous permet d’héberger des sites web statiques, dont Eleventy. Vous pouvez le faire en poussant votre code vers votre fournisseur Git préféré (Bitbucket, GitHub ou GitLab), puis en le déployant sur Kinsta.
Avant de pousser vos fichiers vers n’importe quel fournisseur Git, créez un fichier .gitignore à la racine de votre projet pour spécifier les fichiers et dossiers que Git doit ignorer quand il pousse votre code :
# dependencies
/node_modules
# run
/_sitePousser votre site Eleventy vers GitHub
Pour ce guide, nous utiliserons GitHub. Créez un dépôt sur GitHub, puis vous pourrez utiliser les commandes git pour pousser votre code.
Initialisez votre dépôt Git local en ouvrant votre terminal, en naviguant jusqu’au répertoire qui contient votre projet et en exécutant la commande suivante :
git initAjoutez maintenant votre code au dépôt Git local à l’aide de la commande suivante :
git add.Vous pouvez maintenant valider vos modifications à l’aide de la commande suivante :
git commit -m "my first commit"Remarque : Remplacez « my first commit » par un bref message décrivant vos modifications.
Enfin, poussez votre code sur GitHub à l’aide des commandes suivantes :
git remote add origin [repository URL]
git push -u origin masterNote : Remplacez [repository URL] par l’URL de votre dépôt GitHub.
Si vous avez réussi, vous pouvez maintenant déployer votre site sur Kinsta !
Déploiement de votre site Eleventy sur Kinsta
Le déploiement vers Kinsta se fait en quelques secondes. Une fois que votre dépôt est prêt, suivez les étapes ci-dessous pour déployer votre site statique sur Kinsta :
-
- Connectez-vous ou créez un compte pour voir votre tableau de bord MyKinsta.
- Autorisez Kinsta avec votre fournisseur Git.
- Cliquez sur Sites statiques dans la colonne latérale de gauche, puis sur Ajouter un site.
- Sélectionnez le dépôt et la branche à partir desquels vous souhaitez effectuer le déploiement.
- Attribuez un nom unique à votre site.
- Ajoutez les réglages de construction dans le format suivant :
- Commande de construction :
npm run build - Version de Node :
18.16.0 - Répertoire de publication :
_site
- Commande de construction :
- Enfin, cliquez sur Créer un site.
Et c’est tout ! Vous disposez maintenant d’un site déployé en quelques secondes. Un lien est fourni pour accéder à la version déployée de votre site.
Comme alternative à l’hébergement de sites statiques, vous pouvez opter pour le déploiement de votre site statique avec l’hébergement d’applications de Kinsta, qui fournit une plus grande flexibilité d’hébergement, un plus large éventail d’avantages et l’accès à des fonctionnalités plus robustes. Par exemple, l’évolutivité, le déploiement personnalisé à l’aide d’un fichier Docker, et des statistiques complètes englobant des données en temps réel et historiques.
Résumé
Dans cet article, vous avez appris à créer un site web élégant avec Eleventy, à personnaliser un site statique Eleventy à partir de la base, et à construire un joli site web de portfolio.
Que vous construisiez un blog personnel, un site de portfolio ou une boutique en ligne, Eleventy peut vous aider à atteindre vos objectifs avec un minimum d’effort et un maximum d’impact.
Alors pourquoi ne pas l’essayer dès aujourd’hui et l’héberger gratuitement sur Kinsta ? Nous avons un modèle Eleventy « Hello World » que vous pouvez utiliser pour vous aider à commencer à créer encore plus rapidement.
À vous de jouer : que pensez-vous d’Eleventy ? Avez-vous utilisé Eleventy pour construire quelque chose ? N’hésitez pas à partager vos projets et vos expériences avec nous dans la section des commentaires ci-dessous.
Laisser un commentaire