Vous utilisez probablement des clés SSH pour vous connecter à vos serveurs et vous savez aussi qu'elles sont stockées sur votre disque, bien au chaud dans ~/.ssh/, accessibles à n'importe quel malware qui passerait par là. Pas très rassurant quand on y pense...

Mais bonne nouvelle les amis ! Sur macOS, il existe une fonctionnalité méconnue qui permet de stocker des clés cryptographiques directement dans le Secure Enclave de votre Mac, et de les utiliser pour SSH. Du coup, la donnée de la clé privée est conçue pour ne pas être exportable, reste enfermée dans cette puce dédiée, et les opérations de signature peuvent être protégées par Touch ID selon la configuration choisie. Arian van Putten , un chercheur indépendant, a documenté cette fonction qui est pourtant native dans macOS.

sc_auth create-ctk-identity -l ssh -k p-256-ne -t bio

ssh-keygen -w /usr/lib/ssh-keychain.dylib -K -N ""

ssh-add -K -S /usr/lib/ssh-keychain.dylib

Bon, faut qu'on parle un peu du moteur de recherche de mon site. Ceux qui l'ont déjà utilisé savent de quoi je parle : c'était pas terrible. Enfin, « pas terrible » j'suis gentil. C'est un espèce d'overlay avec des résultats certes fiables mais c'était vraiment pas pratique.

Et en plus de ça, comme j'ai un site statique généré avec Hugo, je passais par Algolia pour la recherche. Si vous ne connaissez pas, Algolia c'est un service cloud qui indexe votre contenu et vous fournit une API de recherche ultra-rapide. Sur le papier c'est génial et dans la pratique aussi d'ailleurs sauf que voilà, ça coûte des sous. Et mon site rencontre un franc succès ces derniers temps (merci à vous !), donc j'ai de plus en plus de visiteurs, donc de plus en plus de recherches, donc une facture Algolia qui grimpe gentiment chaque mois.

Du coup je me suis dit : « Et si je trouvais une solution de recherche pour sites statiques ? » Parce que oui, ça existe et c'est comme ça que j'ai découvert Pagefind.

Pagefind c'est donc un moteur de recherche statique open source développé par CloudCannon qui fonctionne comme ceci : Au moment du build de votre site, Pagefind parcourt tout votre HTML généré et crée un index de recherche qu'on peut interroger avec un peu de JS. Y'a donc plus d'API, et tout se fait localement sur le navigateur des internautes.

Bref, ça avait l'air très cool alors évidemment, je me suis lancé dans l'aventure et comme j'aime bien me compliquer la vie, j'ai décidé de pas juste intégrer Pagefind tel quel. Non non. J'ai voulu recréer l'interface du Google de 1998 parce que à quoi bon avoir son propre site web si on peut pas s'amuser un peu ^^.

Laissez-moi donc vous raconter cette aventure.

Le problème avec Algolia

Leur service est excellent, je dis pas le contraire, la recherche est rapide, les résultats sont pertinents, l'API est bien foutue mais voilà, y'a le modèle de pricing puisque Algolia facture au nombre de requêtes de recherche.

Plus les gens cherchent sur votre site, plus vous payez et quand vous avez un site qui fait plusieurs millions de pages vues par mois, bah... ça chiffre vite. En gros je dépasse très vite les 10 000 recherches offertes chaque semaine et ensuite ça chiffre. C'est pas la mort, mais c'est un coût récurrent débile pour un truc qui pourrait être gratuit.

En plus de ça, y'a la dépendance à un service externe. Si Algolia tombe, ma recherche tombe. Et si Algolia change ses prix, je vais devoir subir. Même chose si Algolia décide de modifier son API... il faudra que j'adapte mon code. Bref, c'est le cloud dans toute sa splendeur... C'est pratique mais on n'est jamais vraiment chez nous.

Pagefind à la rescousse

Pagefind résout donc tous ces problèmes d'un coup. C'est un outil en ligne de commande qui s'exécute après votre générateur de site statique (Hugo dans mon cas, mais ça marche avec Jekyll, Eleventy, Astro, ou n'importe quoi d'autre).

Concrètement, vous lancez :

npx pagefind --site public

Et Pagefind va :

• 1. Scanner tous vos fichiers HTML dans le dossier public/
• 2. Extraire le contenu textuel (en ignorant la nav, le footer, les pubs si vous lui dites)
• 3. Créer un index de recherche optimisé
• 4. Générer des fichiers JavaScript pour interroger cet index côté client

Et le résultat c'est un dossier pagefind/ qui contient tout ce qu'il faut. Ensuite; à vous de servir ces fichiers statiquement avec le reste de votre site, et la magie pourra opérer !

L'index pour mes 18 000 articles fait environ 1,5 Go. Ça peut paraître beaucoup, mais Pagefind est malin car il découpe l'index en fragments et ne charge que ce qui est nécessaire pour la recherche en cours. Du coup en pratique, une recherche typique télécharge quelques centaines de Ko, et pas plus.

L'intégration technique

Pour intégrer Pagefind dans mon workflow Hugo, j'ai donc été cherché le binaire, je l'ai mis sur mon serveur et je l'ai appelé dans un cron comme ça, je rafraichi l'index de recherche 1 fois par jour (et pas à chaque génération du site).

0 4 * * * /home/manu/pagefind/pagefind --site /home/manu/public_html --output-path /home/manu/public_html/pagefind >> /var/log/pagefind.log 2>&1

J'ai aussi créé un fichier de configuration pagefind.yml pour affiner le comportement :

root_selector: "[data-pagefind-body]"
exclude_selectors:
 - "header"
 - ".site-header"
 - "footer"
 - ".sidebar"

L'astuce ici c'est d'indexer uniquement les div ayant la class data-pagefind-body='true' et d'exclure les éléments qui ne font pas partie du contenu éditorial afin de ne pas indexer ce qui se trouve dans le header, les natives, le footer...etc.

Côté JavaScript, Pagefind utilise les imports ES6 dynamiques. Ça veut dire que le moteur de recherche n'est chargé que quand l'utilisateur lance effectivement une recherche :

async function initPagefind() {
pagefind = await import('/pagefind/pagefind.js');
await pagefind.init();
}

Et pour faire une recherche :

const search = await pagefind.search("linux");
// search.results contient les IDs des résultats
// On charge le contenu de chaque résultat à la demande
for (const result of search.results) {
 const data = await result.data();
 console.log(data.url, data.meta.title, data.excerpt);
}

C'est bien fichu parce que search.results retourne immédiatement les références des résultats, mais le contenu réel (titre, extrait, URL) n'est chargé que quand vous appelez result.data(). Du coup vous pouvez implémenter une pagination propre sans télécharger les données de milliers de résultats d'un coup.

Le délire rétro - Recréer Google 1998

Maintenant que j'avais un moteur de recherche fonctionnel, fallait l'habiller. Et c'est là que j'ai eu cette idée un peu débile : Pourquoi pas recréer l'interface du Google de 1998 ?

Pour les plus jeunes qui lisent ça, Google en 1998 c'était une page blanche avec un logo, un champ de recherche, et deux boutons : « Google Search » et « I'm Feeling Lucky« . Pas de suggestions, pas de carrousels, pas de pubs... Juste un champs de recherche. C'était la belle époque !

J'ai donc créé une page de recherche avec deux vues distinctes. La page d'accueil avec le logo centré et le champ de recherche au milieu, exactement comme le Google originel.

Et la page de résultats avec le logo en petit en haut à gauche et les résultats en dessous.

Pour le code CSS, j'ai voulu être fidèle à l'époque. Times New Roman comme police par défaut, les liens en bleu souligné qui deviennent violet une fois visités. Et surtout, les boutons avec l'effet 3D des interfaces Windows 95 :

.search-button:active { border-style: inset; }

Ce border: outset et border-style: inset au clic, c'est exactement ce qui donnait cet effet de bouton en relief qu'on avait partout dans les années 90. Pour moi, ça fait toute la différence pour l'authenticité. Même le logo, je l'ai volontairement « dégradé » pour qu'il soit de la même qualité que le logo Google d'origine.

La pagination « Koooooorben »

Vous vous souvenez de la pagination de Google avec « Goooooogle » en bas de page ? Le nombre de « o » correspondait au nombre de pages de résultats. J'ai fait pareil, mais avec « Koooooorben ».

let logo = 'K'; for (let i = 0; i < oCount; i++)
{
logo += o;
} logo += 'rben'; }

Plus il y a de résultats, plus il y a de « o ». C'est complètement inutile mais ça me fait marrer à chaque fois que je le vois.

Le bouton « J'ai de la chance »

Ah, le fameux « I'm Feeling Lucky » de Google, j'ai voulu l'implémenter comme à l'époque ! Si vous tapez une recherche et cliquez sur « J'ai de la chance », vous êtes envoyé sur le premier résultat. Classique. Mais si vous cliquez sur le bouton avec le champ vide sur la home de la recherche, vous êtes envoyé sur un article aléatoire parmi les +18 000 du site.

Pour ça, j'ai utilisé une astuce : le sitemap. Mon Hugo génère un fichier sitemap.xml qui contient toutes les URLs du site et je peux aller piocher dedans en JS :

const articles = [...xml.querySelectorAll('loc')] .map(loc => loc.textContent) .filter(url => {
// Exclure les pages qui ne sont pas des articles
const path = new URL(url).pathname;
return !path.startsWith('/categories/') && !path.startsWith('/page/') && path !== '/';
});
const randomUrl = articles[Math.floor(Math.random() * articles.length)];
window.location.href = randomUrl;
} }

Un seul fetch, un peu de parsing XML natif, et hop c'est le grand retour de la fonctionnalité « article aléatoire » qui vous manquait, je le sais !

Tri et nombre de résultats

Je vous ai aussi mis une listbox qui vous permet d'afficher 10, 25 ou 50 résultats ainsi qu'un tri par pertinence ou data. Et ça aussi Pagefind sait parfaitement le navigateur.

Mode sombre et accessibilité

Même si l'interface est rétro, j'ai quand même ajouté quelques fonctionnalités modernes. Le mode sombre respecte les préférences système, et j'ai intégré la police OpenDyslexic pour les personnes dyslexiques.

Le truc important c'est de charger ces préférences avant le rendu de la page pour éviter le fameux flash. J'ai donc un petit script qui lit les préférences dans le localStorage et applique les classes CSS immédiatement :

function() {
 if (localStorage.getItem('theme') === 'dark') {
 document.documentElement.classList.add('dark-mode');
 }
 if (localStorage.getItem('dyslexic-font') === 'true') {
 document.documentElement.classList.add('dyslexic-mode');
 }
});

Gestion de l'historique navigateur

Un détail qui peut sembler anodin mais qui est super important pour l'expérience utilisateur c'est la gestion du bouton retour du navigateur.

Quand vous faites une recherche, l'URL change selon votre requête du genre /recherche/?q=linux&p=2. Du coup si vous partagez cette URL à un collègue, la personne arrivera directement sur les résultats de recherche. Et si vous utilisez le bouton retour, vous reviendrez alors à la recherche précédente.

window.addEventListener('popstate', () => {
const query = new URLSearchParams(location.search).get('q');
if (query) doSearch(query);
else showHomePage();
});

Liens vers d'autres moteurs

Et si vous ne trouvez pas votre bonheur dans mes +18 000 articles (ce qui serait quand même étonnant ^^), j'ai ajouté des liens pour relancer la même recherche sur Google, DuckDuckGo, Qwant, Brave et Ecosia. Bref, un petit service bonus pour mes visiteurs, exactement comme le proposait Google à l'époque.

Le bilan - Algolia vs Pagefind

Après 1 semaine d'utilisation, voici donc mon verdict ! Côté portefeuille d'abord, Algolia me coûtait entre 60 et +100 euros par mois et maintenant pour Pagefind, c'est zéro euros ! Et les performances sont également au rendez-vous. Algolia c'était rapide et bien là, ça l'est encore plus. Seul compromis à noter, l'index Algolia se mettait à jour en temps réel, alors que Pagefind nécessite une reconstruction au moment du build.

La conclusion

Voilà, j'ai maintenant une recherche qui marche vraiment bien, qui me coûte 0€ par mois, et qui a un look rétro qui va en surprendre plus d'un...

Alors est-ce que c'était nécessaire de passer autant de temps sur le design rétro ? Hé bien absolument pas. Mais est-ce que ça valait le coup ?

Franchement, oui !! C'est mon site, je fais ce que je veux, et si ça peut faire sourire quelques visiteurs nostalgiques des débuts du web, c'est du bonus. D'ailleurs un grand merci aux Patreons qui me soutiennent car sans eux, je n'aurais pas pu passer mon dimanche là dessus ^^

Et puis surtout, ça m'a permis de découvrir Pagefind qui est vraiment un excellent outil. Donc si vous avez un site statique (ou n'importe quel type de contenu textuel) et que vous cherchez une solution de recherche gratuite et performante, je vous le recommande chaudement. La documentation est claire, l'intégration est simple, et le résultat est top !

Allez, maintenant vous pouvez aller tester la nouvelle recherche sur le site . Et si vous cliquez sur « J'ai de la chance » sans rien taper... bonne découverte !

Vous avez un parc de Raspberry Pi à déployer et vous en avez marre de refaire la config à chaque fois ? Ou pire, votre carte SD commence à faire des siennes et vous voulez la sauver avant qu'elle rende l'âme ? Hé bien j'ai le combo parfait pour vous les amis !

Je vais vous parler en réalité de deux outils complémentaires que vous connaissez déjà je pense : ddrescue pour le clonage/sauvetage de cartes SD, et Raspberry Pi Imager pour créer des images préconfigurées. Ensemble, ils forment une chaîne de production quasi "industrielle" pour vos projets Pi. Ça va vous faire gagner un temps précieux mais aussi vous sécuriser car on sait à quel point les cartes SD c'est capricieux parfois sur les Rpi (surtout quand y'a des coupures de jus ^^).

Commençons donc par ddrescue qui est l'outil libre parfait pour cloner des disques, mais avec un truc en plus que dd n'a pas : la gestion des erreurs et la reprise. Son secret, c'est le mapfile, un fichier journal qui garde trace de tout ce qui a été copié, du coup, si votre clone plante en plein milieu (câble qui se débranche, coupure de courant, carte SD qui fait la gueule), vous relancez la même commande et ça reprend exactement où ça s'était arrêté. Sans ce fichier, par contre, c'est retour à la case départ... snif.

⚠️ Attention : la destination va être écrasée. Donc vérifiez 3 fois vos /dev/... avant d'appuyer sur Entrée. Et oui, l'option --force porte bien son nom puisqu'elle autorise l'écriture sur un disque brut, donc si vous vous trompez de cible, c'est le drame.

La commande de base, c'est ça :

sudo ddrescue --force /dev/sdX /dev/sdY rescue.map

Vous remplacez /dev/sdX par votre carte source et /dev/sdY par la destination et le fichier rescue.map, c'est votre filet de sécurité, donc gardez-le précieusement à côté de vos images.

Après si vous préférez cloner vers un fichier image plutôt que directement vers une autre carte, c'est quasi pareil :

sudo ddrescue /dev/sdX raspios.img rescue.map

Et pour les cartes un peu fatiguées avec des secteurs défectueux, y'a une astuce en deux passes. D'abord une passe rapide qui saute les erreurs (le but c'est de récupérer le max sans s'acharner tout de suite) :

sudo ddrescue -n /dev/sdX raspios.img rescue.map

Puis une deuxième passe qui insiste sur les zones problématiques :

sudo ddrescue -r3 /dev/sdX raspios.img rescue.map

Le -r3 dit à ddrescue de réessayer 3 fois sur chaque secteur récalcitrant par contre, évitez de mettre --no-split par défaut. Ça peut sembler logique ("ne coupe pas"), mais sur un support vraiment abîmé, laisser ddrescue découper et isoler les zones foireuses est souvent plus efficace.

Maintenant faut vérifier que tout s'est bien passé… alors oui, on peut faire des contrôles, mais il faut être clair, si vous comparez juste un bout, vous validez juste un bout. Par exemple cette commande compare seulement 1 Go, et pas toute la carte :

sudo cmp -n 1G /dev/sdX /dev/sdY

Donc si vous voulez comparer TOUT (et que ça ne vous dérange pas d'attendre ^^), vous pouvez comparer l'image et la carte clonée en faisant un hash sur la totalité. Par exemple, pour vérifier que l'image écrite sur la carte correspond bien à l'image d'origine :

sha256sum raspios.img
sudo ddrescue /dev/sdY - | sha256sum

Si les deux hashes sont identiques, là, on parle (beaucoup plus) sérieusement. Et si vous ne voulez pas streamer le disque, vous pouvez aussi faire un hash du périphérique directement (mais ça lit tout le disque, donc c'est long).

Vous l'aurez compris, ddrescue nous sert à cloner ou à sauver une carte existante, mais pour déployer proprement une image, on va maintenant utiliser le fameux Raspberry Pi Imager. Car oui, l'outil officiel de la fondation a une fonction que beaucoup de gens ne connaissent pas qui est la personnalisation avancée. Comme ça, avant de flasher votre carte, vous pouvez préconfigurer plein de trucs.

Par exemple, le hostname du Pi, genre pi-cuisine ou pi-garage, l'utilisateur et son mot de passe, le Wi-Fi avec SSID et mot de passe, le SSH activé avec mot de passe ou clé publique, le fuseau horaire et la config clavier. Et précision importante, Imager prépare tout ça pour que ce soit appliqué au premier boot (c'est injecté pour l'initialisation), ce qui revient au même pour vous, mais ça explique pourquoi c'est si pratique en mode headless.

Du coup, vous flashez la carte, vous la mettez dans le Pi, vous branchez l'alimentation, et souvent c'est accessible en SSH très vite :

ssh [email protected]

C'est le mode headless parfait puisque ça vous évite d'avoir à brancher un écran + clavier + souris sur votre Rpi. Notez que l'extension en .local de mon exemple ci-dessus dépendra du mDNS (Bonjour / Avahi)... Sur certains réseaux (ou certains PC), ça pourra ne pas résoudre donc dans ce cas-là, vous passez par l'IP ou votre DNS/DHCP habituel.

Et maintenant, roulements de tambours, voici le workflow magique pour déployer un parc de Pi. Cela consiste tout simplement à configurer un Pi de référence avec tout ce qu'il vous faut dedans (paquets, services, configs...). Ensuite vous l'éteignez proprement, vous clonez sa carte avec ddrescue, et vous dupliquez cette image à volonté.

MAIS (et là c'est le point qui évite des sueurs froides), cloner une carte Linux telle quelle, ça clone aussi des identifiants qui devraient être uniques, typiquement :

• le machine-id
• les clés SSH hôte (host keys)

Donc si vous déployez 10 Pi clonés à l'identique, vous vous retrouvez avec 10 machines qui se présentent pareil, et côté SSH vous pouvez avoir des alertes cheloues (et côté admin, c'est pas propre).

La solution la plus simple c'est donc de préparer votre image "master" pour que chaque nouveau Pi régénère ça au premier démarrage. Sur votre Pi de référence (avant de cloner), vous pouvez faire :

sudo rm -f /etc/machine-id
sudo truncate -s 0 /etc/machine-id
sudo rm -f /etc/ssh/ssh_host_*

Comme ça, au prochain boot, le système régénère un machine-id propre, et OpenSSH régénère ses clés hôte. (Si jamais ça ne se régénère pas automatiquement sur votre variante d'OS, un redémarrage + réinstallation/relance SSH règle généralement le truc.)

Après ça, à chaque nouveau Pi, vous flashez l'image.

Maintenant si vous n'avez pas de parc à déployer, mais que vous voulez simplement personnaliser le hostname, le Wi-Fi, le user, etc., le plus simple ça reste donc de passer par Raspberry Pi Imager au moment du flash avec ses options avancées car si vous écrivez l'image avec dd/ddrescue directement sur la carte, Imager ne pourra évidemment pas appliquer ses paramètres.

Et SURTOUT, avant de lancer quoi que ce soit, pensez à identifier vos disques pour pas faire de bêtises (c'est une commande Linux, btw) :

lsblk -o NAME,SIZE,MODEL,MOUNTPOINT

Ah et désactivez aussi l'automontage sur votre machine, sinon vous allez avoir des soucis avec la destination qui se retrouvera occupée par l'OS.

Bref, avec ddrescue et Raspberry Pi Imager, vous avez maintenant de quoi cloner vos cartes SD beaucoup plus sereinement (et pas juste "les yeux fermés").

Enjoy !