Rechercher dans un site statique

Comment implémenter une fonction de recherche dans un site statique ? Illustration avec Jekyll.

Quelques soient les raisons qui peuvent pousser à opter pour un site statique, on se retrouve tôt ou tard à devoir implémenter une fonction de recherche. Que ce soit pour rechercher dans une documentation ou dans les archives d’un blog, cette fonctionnalité est un incontournable.

Ce qui est une évidence pour un site « à bases de données » devient plus compliqué qu’il n’y paraît pour un site statique. D’où mon intérêt pour cette solution entièrement construite avec Javascript qui ne demande aucun traitement côté serveur. Elle s’appuie notamment sur Lunr.js.

Limites de cette recherche

C’est pas mal de scripts à charger, et même si l’ensemble ne pèse pas trop lourd, la solution embarque son moteur de template, son formatage des dates… Tout ceci peut s’avérer redondant avec ce que vous avez déjà sur votre site.

Le navigateur charge l’index et si votre site contient beaucoup de contenu, celui-ci peut devenir conséquent. Sur Wooster, à date de parution de ce billet, le fichier pèse 255 KO pour l’ensemble des documentations et articles disponibles.

Cette fonction de recherche n’en reste pas moins efficace et nous avons décidé de commencer à l’utiliser sur Wooster, même si elle est un peu cachée pour le moment !

Olivier Jan

À propos de l’auteur

| Cofondateur de Check my Website.

Check My Website a arrêté son activité en 2017, n'hésitez pas à vous tourner vers Dareboost.