Améliorations du blog

Pour un blog plus facile à lire et plus rapide

lundi 7 août 2023 - nombre de mots : 1061

Cela fait 3 ans que j’ai migré de DotClear à Hugo. Je dis souvent que faire un blog (commencé en 2006) a changé ma vie, je peux dire que le passage à Hugo m’a encouragé à poursuivre l’écriture et surtout m’apporte beaucoup de plaisir à concevoir et essayer des trucs.

Entre des vacances en Norvège et une cousinade en Lorraine, je me suis bien amusé à bidouiller Hugo et le template Mainroad que j’ai conservé depuis la migration.

Voici quelques-uns des changements.

Recherche

Je savais qu’il y avait un widget de recherche dans Mainroad, mais je ne l’avais jamais essayé. Pourtant je cherche souvent dans mon blog (de bien plus de mille articles). Je le fais avec Visual Studio Code (avant avec Atom) mais ce n’est pas très pratique.

Dans deux des autres blogs dont je m’occupe, les templates choisies le font avec fuse.js :

Ce que propose Mainroad est bien différent, puisqu’on utilise un moteur externe. Je n’allais pas choisir Google, j’ai donc essayé avec Duckduckgo, qui est par ailleurs le moteur de recherche que j’utilise sur mon Firefox.

C’est beaucoup plus simple que ce que j’imaginais :

[Params.widgets.search]
  cached = true
  url = "https://duckduckgo.com/"
  [Params.widgets.search.input]
    name = "sites"
    pre = ""

J’ai été bluffé par les résultats. J’en conclus que mon site est bien indexé. Bien sûr l’activation de la recherche dans le widget fait quitter mon blog pour aller chez Duckduckgo, mais rien qu’avec une liste de liens de mon site.

C’est peut-être parce que j’utilise DDG et que je l’ai paramétré que je ne vois aucune pub, aucun lien autres que de mon site.

Essayez et dites-moi ce que ça donne chez vous.

Le résultat inespéré de cette recherche m’ouvre de nouveaux horizons et me pousse à réduire les autres types de découverte de mes articles (par exemple les tags).

Enrobage d’article

En-tête

J’ai supprimé la date de modification (LastMod) d’un article. LastMod correspond à la date du dernier commit de l’article dans git.

C’est intéressant mais la date change à chaque modification même une mineure de contenu ou une sur le frontmatter. À la longue cela n’avait plus vraiment de sens pour les lecteurs.

J’ai cependant conservé le widget des derniers articles modifiés, basé sur ce Lastmod.

J’ai aussi supprimé les infos de catégories et la possibilité de réagir à l’article. En fait je les ai déplacées en fin d’article, ce qui est plus logique.

Pour guider le lecteur, j’ai ajouté le nombre de mots de l’article. Je me suis refusé à indiquer la durée de lecture comme le font beaucoup de blogs. Cette durée idéale est trompeuse, pour les mêmes raisons que celles évoquées dans cet article La minute idéale du randonneur (passez par la recherche pour accéder à cet article, tiens.)

Articles en relation

J’utilise la notion de related fournie par Hugo depuis longtemps. Je suis passé de 3 à 5 articles en relation, tout en ajustant les paramètres de l’algorithme (oui un algo !).


[related]
  includeNewer = true
  threshold = 80
  toLower = false

  [[related.indices]]
    name = "title"
    weight = 30

  [[related.indices]]
    name = "description"
    weight = 30

  [[related.indices]]
    name = "categories"
    weight = 30

  [[related.indices]]
    name = "tags"
    weight = 30

  [[related.indices]]
    name = "date"
    weight = 10

  [[related.indices]]
    name        = "fragmentrefs"
    type        = "fragments"
    applyFilter = false
    weight      = 30

Je ne suis pas sûr d’avoir bien compris la notion de fragment mais bon tant que les résultats vont bien…

Un bon résultat de related peut pousser à limiter les liens dans le texte (ou les rappeler en fin d’article)

En bas de l’article

On y retrouve donc :

la possibilité de réagir par email (que je limite aux articles de moins de 9 mois),
l’année de l’article ;à part ceux de À propos, tous mes articles sont rangés dans un dossier, un par année. Hugo utilise la structure des fichiers pour bâtir la structure du site,
la catégorie. Je n’utilise presque plus cette notion, parce que ce n’est pas facile de classer chaque article dans une des 10 catégories que j’avais définies il y a un moment.

Lecture de l’article

Pour que le lecteur se concentre sur l’article, j’ai lu que la largeur ne doit pas être trop grande. Tous les articles (les pages régulières; pas les listes) sont maintenant présentées avec une sidebar, qui pour éviter de perturber la lecture, ne contient en général que le widget de recherche.

Ça se fait juste avec ça, placé dans le fichier _index.md de /post

cascade:
  widgets: ["search" ]

J’adore cette cascade !

J’ai utilisé l’outil Link Checker du W3C pour vérifier les liens de mon site. J’ai trouvé beaucoup plus d’erreurs que ce que j’imaginais.

J’ai supprimé ou corrigé tous les liens morts internes. Quant aux liens externes morts, il y en a plein, évidemment bien plus pour les articles anciens. Pour l’instant je me suis contenté d’éliminer les erreurs dans les articles les plus récents.

Listes

Hugo fonctionne avec des listes. Dans mon blog, il y en a de nombreuses. Plein. Elles contiennent le résumé des articles qui la composent.

À part la page d’accueil, toutes mes listes sont désormais présentées sans sidebar (le texte du résumé est limité à quelques lignes). Comme ça on peut voir plus d’articles sur un écran.

Taxonomies

Hugo fournit par défaut deux taxonomies : catégories et tags.

J’en ai ajouté 4 nouvelles :

séries en premier,
tutos,
livres,
exemples.

Elles apparaissent dans la barre de menu.

Les articles qu’on y trouve sont les plus notables du blog. Ils sont evergreen.

Performance

Hugo génère mon site rapidement (malgré ses plus de 1500 pages avec les pages de listes), mais je veux parler ici de la vitesse d’affichage pour les lecteurs.

Taille des images

J’ai drastiquement réduit la taille des images. J’avais déjà réduit le poids avec ImageOptim, mais là j’ai appliqué un paramètre de réduction plus important.

Mainroad propose la variable thumbnail pour les images associées à un article. J’utilisais l’image pour la liste et pour l’article. Désormais j’ai mis par défaut dans la config uniquement pour la liste. Cela a supprimé plein d’images dans les articles, je suis peut-être allé trop loin pour certains.

Impact environnemental

Pour tester l’impact, j’ai utilisé Ecoindex, outil gouvernemental.

Avec la page précédente — Devenir le changement au lieu de subir la flexibilité — voilà ce que ça donne :