Mise en place de la recherche sur ce site

Je viens d’ajouter la recherche sur ce site : elle est disponible depuis le lien /search. Enjoy 😉

J’ai eu quelques difficultés à la mettre en place : la documentation sur hugo à ce sujet est difficle à comprendre et vraiment pas claire du tout ; poser des questions sur le forum amène souvent à des réponse de la forme “lis la doc” qui n’aident pas du tout au regard de la complexité de celle-ci. Il existe un grand nombre d’articles sur le sujet, mais hugo a évolué tellement que la plupart de ces articles proposent quelque chose qui ne fonctionne pas.

Je me suis fortement inspiré de ce gist. Contraitement à ce qu’on trouve en général sur internet, cette implémentation s’appuie sur fuse.js et non sur lunr.js comme on trouve habituellement aujourd’hui. Je n’ai pas d’avis sur la question, mais en tout cas cela fonctionne pour moi, c’est la première qualité du code !

Par contre je suis un peu “chagrin” car il a fallu que j’implémente à nouveau un peu de templating du site pour les réponses à une recherche, mais en js/html plutot que en hugo : de la duplication pas facile à faire sauter… J’ai également fait le choix de ne pas servir les fichiers javascript supplémentaires (fuse, jquery) par mon site mais de passer par les CDN existants (contrairement à ce que j’ai fait dans Un petit peu d’optimisation de ce site) car je me dis que la recherche sera très peu utilisée et qu’il n’est pas nécessaire d’en optimiser le chargement.

Mais alors, pourquoi l’avoir implémentée cette recherche ?

1. c’est tout de même fun à faire
2. je voulais progresser dans ma connaissance de hugo
3. c’est une étape indispensable pour passer en IndieMark niveau 2 (en fait, je suis plutôt déjà niveau 3 sur cet aspect) qui impose d’avoir un champ de recherche sur son site web.

J’avance bien sur mon passage en niveau 2 qui est constitué des éléments suivants :

• ✅ avoir une h-card complète et valide, avec icône de soi
• ✅ avoir posté plusieurs types de contenus différents (ici des articles de blog et des notes)
• ❌ faire du POSSE vers les silos existants (par exemple, twitter) avec des boutons d’actions pour y réagir/reposter
• ✅ avoir une navigation intégrée au site (des liens suivant/précédent entre les articles)
• ✅ avoir une interface pour rechercher des contenus directement sur son site (pas nécessairement hébergée par le site en niveau 2, mais qui peut le plus peut le moins)

Il ne me reste plus qu’un point à résoudre pour arriver au niveau 2, le niveau 3 implique de faire toutes ses interractions, y compris avec twitter et autres, depuis son propre site… exitant !