Colophon

Éléments de base

Le site est produit par le générateur de site statique Hugo avec l’infrastructure logicielle CSS Bulma. Les sources du contenu, dans le sous-répertoire content/, sont des fichiers de texte simples qui obéissent à la syntaxe de mise en forme Markdown. Toutes les sources, à l’exception de celles qui sont renseignées dans le fichier d’exclusion .gitignore (à la racine du dépôt), sont placées sous le contrôle du système de gestion de versions Git.

La mise en pages, sans thème au sens propre, doit beaucoup à une série de billets de blog rédigés par Janne Kemppainen à propos de Hugo. Le partiel en charge de la production des « liens retours » (en anglais backlinks) est dû à Kaushal Modi. Ce partiel cherche les « liens retours » éventuels vers le billet courant dans toutes les autres pages du site, et est lui-même appelé depuis le modèle (en anglais template) utilisé par tous les billets du site : il est donc susceptible d’une inflation combinatoire en O(n²), où n représente le nombre de pages du site. (Voir tableau suivant.)

La police de caractères est Ysabeau ¹ et celle d’icônes est Feather Icons ². Toutes deux sont disponibles au format TTF : il est nécessaire de les produire au format WOFF, ce qui est assuré par les programmes sfnt2woff-zopfli (norme 1.0) et woff2_compress (norme 2.0).

Suppression du code CSS inutilisé

Le site n’utilise pas toutes les classes CSS de Bulma. Un billet de blog, rédigé par Zachary Wade Betz, indique comment employer PurgeCSS afin de supprimer le code inutilisé et de servir ainsi un fichier CSS aussi réduit que possible. Outre Hugo, le seul prérequis est l’environnement d’exécution JavaScript Node.js et son gestionnaire de paquets npm.

Du côté de Hugo, il suffit d’agir sur la section de configuration de build, afin de créer un fichier hugo_stats.json (à la racine du dépôt) qui mentionne tous les tags, classes et ids contenus dans les modèles *.html du projet. Voici l’extrait correspondant dans le fichier de configuration hugo.toml (à la racine du dépôt) :

[build]
    writeStats = true

Du côté de Node.js, il faut installer les trois extensions requises, à partir de la racine du dépôt :

$ npm install postcss postcss-cli @fullhuman/postcss-purgecss

Il faut ensuite configurer PurgeCSS au moyen du fichier postcss.config.js (à la racine du dépôt). Attention : le code JavaScript en charge de la présentation d’une partie de la barre de navigation, pour les périphériques d’affichage de taille restreinte, ajoute son propre élément (une classe), à savoir is-active, qui doit donc se trouver dans la safelist du fichier de configuration de PurgeCSS.

On peut enfin revenir à Hugo, et en particulier au partiel layouts/partials/head.html qui contient les lignes suivantes pour la production du fichier CSS final, avec une « empreinte digitale » et une vérification de l’intégrité de la ressource :

{{ $options := (dict "outputStyle" "compressed" "includePaths" (slice "bulma/sass")) -}}
{{ $style := resources.Get "style.scss" | resources.ToCSS $options | resources.PostCSS -}}
{{ if hugo.IsProduction -}}
    {{ $style = $style | resources.Fingerprint "sha256" | resources.PostProcess -}}
{{ end -}}
<link rel="stylesheet" type="text/css" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">

(Dans le sous-répertoire assets/, le fichier style.scss importe en effet bulma/bulma.sass, entre autres opérations.)

Gestion du projet

Le fichier Makefile (à la racine du dépôt) permet de gérer le projet grâce au programme GNU Make. Les cibles sont les suivantes :

• help. Affiche toutes les cibles du Makefile avec leurs messages d’aide respectifs. Cette cible invoque elle-même les programmes GNU Awk et GNU Grep, qui doivent donc être présents sur le système ;
• ginit. Initialise un dépôt Git dans le répertoire de travail, si ce n’est pas déjà le cas. Si le dépôt est déjà initialisé, affiche son statut Git ;
• depend. Installe PostCSS, PurgeCSS et leurs dépendances avec npm, comme indiqué plus haut ;
• clean. Supprime les sous-répertoires public/ et resources/ ainsi que leurs contenus éventuels ;
• fonts. Produit les polices de caractères aux formats WOFF et WOFF2, à partir des sources dans le sous-répertoire ttf/. Utilise sfnt2woff-zopfli pour la norme 1.0 et woff2_compress pour la norme 2.0. Recopie les licences pour Ysabeau et Feather. Les programmes sfnt2woff-zopfli et woff2_compress doivent donc être présents sur le système ;
• build (dépend des cibles ginit et clean). Construit le site et le publie dans le sous-répertoire public/ ;
• serve (cible par défaut ; dépend des cibles ginit et clean). Construit le site et le sert grâce au serveur Web intégré de Hugo.

Déploiement sur Netlify

Les sources du site se trouvent dans un dépôt sur GitHub. Le site est déployé sur Netlify via le fichier de configuration netlify.toml (à la racine du dépôt).