Dans cet article, je te présente de façon synthétique les caractéristiques fonctionnelles et techniques du blog que tu as sous les yeux. Cela te donnera un bon aperçu de ce qu'on peut faire avec un générateur de site statique tel qu'Eleventy, et cela pourra peut-être te donner des idées pour ton propre blog.
Fonctionnalités de mon blog
Voici les fonctionnalités principales de mon blog :
Ergonomie :
- Design adaptatif pour une lecture agréable sur mobile comme sur PC.
- Bouton de retour rapide en haut de la page.
- Sur mobile, le contenu des tableaux peut défiler horizontalement pour faciliter la lecture.
Multilingue :
- site en versions française et anglaise. On retrouve exactement les mêmes pages dans les 2 langues.
- détection automatique de la langue du navigateur à l'arrivée sur la page d'accueil.
- l'utilisateur peut changer de langue par clic sur un item du menu principal.
Taxonomie personnalisée :
- Les articles sont classés par catégories et peuvent avoir un ou plusieurs tags.
- On recherche un article tout d'abord par sa catégorie, puis en filtrant sur ses tags.
- Les tags peuvent être imbriqués et leur ordre définit leur niveau de pertinence pour l'article. Lorsqu'on filtre les articles par tag, les articles correspondants sont triés par ordre d'apparition du tag dans leur liste de tags, afin d'afficher les articles les plus pertinents en premier.
Navigation dans les articles :
- La page de blog affiche les catégories d'articles. Le clic sur une catégorie affiche la liste des articles de cette catégorie.
- en haut de chaque article, le fil d'Ariane permet de voir dans quelle catégorie se trouve l'article, et de revenir à la page de catégorie.
- en bas de chaque article, des liens permettent de naviguer vers les articles précédent et suivant.
Texte enrichi :
- polices différentes pour les titre, le texte ordinaire et le code.
- blocs d'alerte GitHub pour faire ressortir les notes, éléments importants, avertissements, conseils et points critiques.
- coloration syntaxique des blocs de code, avec possibilité de mettre des lignes en surbrillance.
- icônes Font Awesome pour agrémenter le texte.
Gestion des commentaires : les visiteurs peuvent s'identifier avec leur compte GitHub pour laisser des commentaires.
Flux RSS : générés automatiquement en anglais et français.
Optimisation du SEO et de l'intégration sur les réseaux sociaux à l'aide de métadonnées classiques, de données Open Graph, d'URL canoniques et de données structurées Schema.org
Fonctionnalité à venir
Au bas de certains articles, je prévois d'ajouter un formulaire permettant aux visiteurs de s'inscrire à ma newsletter ou de recevoir des fichiers zip des sources associées à certains articles. Les données saisies dans le formulaire (nom, prénom, adresse email et id de page) seront envoyées à une API que j'ai développée avec ASP.Net Core. Mon API pilotera à son tour l'API de systeme.io, un système automatisé de gestion de contacts et d'envoi d'emails.
Note
Ce que j'aime avec le principe de site statique, c'est que l'architecture technique et le déploiement du site restent simples, tout en permettant d'exploiter des API externes pour des fonctionnalités complexes. La solution globale est plus morcelée qu'avec une architecture de SPA classique, mais elle est légère et ne nécessite aucun framework JavaScript particulier.
Caractéristiques techniques
Sans entrer dans le détail du code, voici les caractéristiques techniques essentielles de mon projet Eleventy :
Styles : Je n'utilise aucun framework CSS. Tout le code CSS est intégré dans des balises <style> des templates pour une architecture modulaire et un chargement rapide. Chaque page n'intègre généralement guère plus de 10 Ko de CSS (non minifié).
JavaScript : Je n'utilise pas non plus de framework JavaScript. J'utilise du JavaScript vanilla pour le filtrage des articles par tags, la redirection vers la page d'accueil correspondant à la langue du navigateur, le bouton de retour en haut de la page et la connexion à Google Analytics.
Pour la gestion du formulaire décrit précédemment, environ 60 lignes de JavaScript suffisent pour récupérer les données du formulaire, les envoyer à l'API et afficher un message de confirmation.
Templates : j'utilise le langage Nunjucks qui est puissant et polyvalent. Eleventy gère nativement l'héritage de templates. J'utilise en revanche les macros Nunjucks pour créer des composants réutilisables : fil d'Ariane, résumé court d'article, formulaire.
Multilingue : le code de la langue ('en' ou 'fr') figure dans l'url et les métadonnées des pages. Les fichiers sources qui dépendent de la langue (fichiers Markdown des articles et fichiers de métadonnées et autres données traduites) ont les mêmes noms dans les 2 langues mais sont stockés dans des dossiers nommés en et fr. Cela facilite la navigation et le changement de langue.
Catégories d'articles et tags : dans le projet, chaque catégorie correspond à un sous-dossier du dossier de langue. Cela me permet de retrouver les articles beaucoup plus facilement. Dans le code, chaque page de catégorie contient sa collection d'articles, stockée dans la cascade de données, une architecture propre à Eleventy.
Les tags des articles sont définis dans les frontmater YAML des fichiers Markdown.
Texte enrichi : Eleventy utilise par défaut le moteur Markdown-it pour interpréter le Markdown, et j'ai ajouté les packages suivants pour enrichir la syntaxe :
markdown-it-github-alertspour les blocs d'alerte GitHub.markdown-it-anchorpour ajouter des ancres sur les titres et pouvoir construire une table des matières.@11ty/eleventy-plugin-syntaxhighlightpour la coloration syntaxique.@11ty/font-awesomepour ajouter facilement des icônes Font Awesome dans les pages. Il génère automatiquement des sprites pour éviter les doublons.
Images : toutes les images sont centralisées dans un dossier img pour pouvoir y faire référence facilement et les partager entre plusieurs langues. Mes images sont essentiellement des schémas et captures d'écran au format png, mais j'ai paramétré Eleventy pour qu'il les transforme en AVIF afin d'optimiser leur poids (grâce au plugin eleventy-img).
Je ne crée aucune variante de taille et Eleventy génère tout seul le code HTML pour les dimensions et le chargement tardif, ce qui est super pratique !
Enfin, je préfixe tous mes noms d'images par le nom de l'article dans lequel elles sont utilisées, afin de pouvoir retrouver rapidement les images de chaque article.
Note
Cette gestion d'images est un pur bonheur par rapport à ce que je connaissais dans WordPress !
Les commentaires sont gérés à l'aide de l'API Utterances et stockés dans un référentiel GitHub.
Important
La fonctionnalité qui a eu le plus d'impact sur l'architecture technique de mon blog est le multilingue. En effet, tous les articles, les textes de l'interface visuelle générale, les métadonnées et les flux RSS doivent être déclinés en au moins 2 langues, ce qui complexifie pas mal les choses.
Mais alors qu'un site créé avec WordPress aurait nécessité un plugin payant et assez lourd pour gérer cela, ma solution reste légère et entièrement gratuite ! Je te la présenterai plus en détail dans de futurs articles.
D'autres modèles
Sur la page Starter Projects du site officiel d'Eleventy, tu trouveras environ 170 modèles de sites de différents types : blog, sites vitrines, portfolios, etc. Les modèles sont généralement accompagnés d'un site de démo minimaliste. En revanche, il est souvent impossible d'en connaître les caractéristiques techniques sans télécharger le modèle et regarder son code, ce qui est assez dommage.
J'espère que cet article t'a permis de te faire une idée plus précise des possibilités offertes par le SSG Eleventy. Dis-moi en commentaire si cela t'a été utile et n'hésite pas à me poser des questions si tu en as 😉.