Depuis quelque temps, j’utilisais un moteur de recherche externe pour mon site statique, principalement grâce à Algolia. Ce service cloud, réputé pour sa rapidité et la pertinence de ses résultats, était une solution efficace mais coûteuse face à la croissance du trafic de mon site, qui connaît un succès grandissant. Chaque mois, la facture augmentait, ce qui m’a amené à réfléchir à une alternative plus économique et indépendante.
Après quelques recherches, j’ai découvert Pagefind, un moteur de recherche statique open source développé par CloudCannon. Concrètement, il parcourt lors du build tout le contenu HTML généré, crée un index de recherche local, puis fournit des fichiers JavaScript permettant d’interroger cet index directement dans le navigateur des visiteurs, sans dépendre d’une API externe. Cette solution élimine les coûts récurrents liés à des services comme Algolia, tout en assurant une performance optimale, notamment grâce au découpage en fragments de l’index qui ne charge que ce qui est nécessaire pour chaque recherche.
J’ai pu ainsi obtenir une recherche totalement autonome, gratuite, et rapide, tout en personnalisant l’interface à mon image dans un style rétro inspiré de Google en 1998.
L’intégration de Pagefind dans mon workflow Hugo s’est faite de manière relativement simple. J’ai téléchargé le binaire, l’ai placé sur mon serveur, puis automatisé sa mise à jour quotidienne avec un cron. La configuration fine se fait via un fichier YAML pour n’indexer que le contenu pertinent, en excluant les éléments superflus comme le header ou le footer. Sur le plan technique, le moteur utilise les imports ES6 dynamiques pour charger le script à la demande, ce qui permet de charger la recherche uniquement quand l’utilisateur en a besoin, optimisant ainsi les performances et la fluidité de l’expérience utilisateur.
Mais le vrai défi a été de donner à cette recherche une identité unique : celle du Google de 1998. J’ai recréé une interface minimaliste, avec la police Times New Roman, des liens bleus soulignés, et des boutons en relief façon Windows 95. Le logo a également été volontairement dégradé pour renforcer cette esthétique rétro, avec notamment cette pagination en « Koooooorben » où le nombre de « o » varie en fonction du volume de résultats, une touche humoristique et nostalgiquement absurde.
En intégrant des fonctionnalités modernes telles que le mode sombre, la gestion de l’historique navigateur, ou encore un bouton « J’ai de la chance » qui mène à un article aléatoire en utilisant le sitemap généré par Hugo, j’ai ainsi réussi à allier nostalgie et praticité. La recherche affiche des résultats triés par pertinence ou par date, avec une capacité à charger dynamiquement les résultats sans surcharge, tout en respectant l’accessibilité grâce à l’utilisation de la police OpenDyslexic.
