Après deux semaines de réflexion et de tests, il est temps de se lancer. Beaucoup de choses restent à décider (Nom du site, nom de domaine, hébergeur, design, …) mais déjà quelques décisions ont été prises :
- Le site sera statique (quoi de plus éco-conçu qu'un site statique ?)
- J'utiliserai eleventy (11y) pour le générer (j'ai bien aimé l'approche bare bone de la techno, et puis le fait qu'il soit plébiscité par plusieurs personnes que je suis m'a rassuré)
- Je commencerai simple et j'augmenterais progressivement en gardant un œil sur l'accessibilité
Dès le démarrage, les premiers problèmes et questions :
- 11ty ne gère pas bien les remords : si un fichier "input" est supprimé, la page HTML correspondante n'est pas supprimé. Idem s'il est déplacé ou renommé. Après un peu de recherche, j'ai trouvé ce plugin
eleventy-plugin-cleanqui traque les modifications des fichier "input" et s'en sert pour nettoyer le dossier "output" - je passe mon temps à m'emmêler entre mes sources et le dossier
_site/(le dossier "output" que je mentionnais) : je décide donc de renommer certains dossiers du projets pour m'éviter ça :_site/est renommé__site/ce qui le logera bien proprement en haut de l'arborescence_src/accueillera toutes mes sources "statiques" (css, font, images, …)- je déplace tout mon contenu (page d'accueil, articles, journal de bord, etc.) dans un dossier
content/, bien isolé de notre dossier de sortie et des autres dossiers consacrés aux sources et autres briques du générateur de site.
- Le template "base". Je décide de créer un template "base" mais je tombe sur deux écueils :
- Impossible de définir mon template comme template par défaut (je ne veux pas avoir à penser à le déclarer dans le front matter de chaque page que j'ajoute à la racine). Je finis par trouver la réponse dans un échange sur le GitHub d'Eleventy(S'ouvre dans un nouvelle fenêtre) : j'ajoute un Data file(S'ouvre dans un nouvelle fenêtre) appelé
layout.js(le nom de la propriété permettant de déclarer un template) et exportant une unique chaîne de caractère, le nom de mon template "base" - Je n'arrive pas à définir une "cascade" d'options dans mon template et la syntaxe de Liquid pour les conditions if/else est lourde. Heureusement, je finis par tomber sur le filter
default:dans la doc de Shopify(S'ouvre dans un nouvelle fenêtre)
- Impossible de définir mon template comme template par défaut (je ne veux pas avoir à penser à le déclarer dans le front matter de chaque page que j'ajoute à la racine). Je finis par trouver la réponse dans un échange sur le GitHub d'Eleventy(S'ouvre dans un nouvelle fenêtre) : j'ajoute un Data file(S'ouvre dans un nouvelle fenêtre) appelé
- Implémentation de la 404. Je rencontre deux problèmes pour cette page incontournable :
- J'ai opté pour un fichier Markdown et vu comment eleventy gère ses URL, le fichier obtenu est
/404/index.html, ce que le serveur ne reconnaît pas comme une page 404. Heureusement la doc d'Eleventy a une solution(S'ouvre dans un nouvelle fenêtre) pour moi : définir l'URL finale de ma page 404 dans le Front matter de ma page, avec la propriétépermalink
- J'ai opté pour un fichier Markdown et vu comment eleventy gère ses URL, le fichier obtenu est
Une petite note sur l'usage de Liquid : j'ai longtemps hésité entre utiliser Nunjucks ou Liquid. J'ai déjà fait du Nunjucks par le passé, mais déjà à l'époque le soutiens du langage n'était pas très vivace… Liquid étant le langage par défaut d'eleventy et plus activement maintenu, j'ai opté pour celui-ci (même si je ne suis pas un gros fan de Shopify).