Technologies

💡 Cette page est susceptible d’être mise à jour à chaque évolution de la stack technique du site. Dernière mise à jour : le 14/02/2026

Application

Architecture

Le site jbuget.fr adopte une architecture de type Static Website (site statique).

Dans la mesure où il s’agit principalement d’un site éditorial - présentation d’informations, articles, mise à disposition et publication de ressources - avec très peu d’interactions et peu d’intelligence métier, je ne voyais pas l’intérêt d’opter pour une architecture plus complexe type Single Page Application (SPA), Server Side Rendering (SSR) ou Progressive Webapp (PWA).

Mes principales préoccupations pour ce site sont : la clarté et pertinence du contenu, la navigation, l’accessibilité et le référencement. En second focus, je conserve une attention et un soin particulier pour la sécurité (HTTPS), la performance et le respect des données personnelles (limiter les traqueurs, ou à tout le moins les contrôler le plus finement, en toute transparence).

Framework

Le framework utilisé est Hugo (v0.155.3), un générateur de sites statiques open source.

Hugo offre propose nativement un ensemble très complet et très bien pensé de fonctionnalités et autres conventions. En une commande (via le CLI) il est possible de générer un site prêt-à-l’emploi avec un outillage efficace. D’autant plus que la techno est développée en Go, ce qui rend toutes les opérations (processing, compilations, etc.) extrêmement rapides et peu gourmandes en ressources.

Même si je ne compte pas mettre à disposition le thème et les outils du site, j’ai pris le parti de mettre un maximum de choses (layouts, styles, fonts, scripts) dans un thème custom baptisé Bloodywood (en référence au groupe de Metal Indien, découvert le jour de la création du site ^^).

Styles

Pour gérer les styles, j’utilise le langage SCSS, intégré et supporté nativement dans Hugo. SCSS est un sur-ensemble du langage CSS, qui couvre toutes les fonctionnalités de celui-ci et en ajoute d’autres (ex : nesting, reference, interpolation, fonctions, etc.).

Icônes

Les icônes du site proviennent de Font Awesome, une bibliothèque d’icônes vectorielles très répandue. Seul un sous-ensemble d’icônes (style solid) est intégré dans le thème afin de limiter le poids des ressources chargées.

Recherche

Le site intègre Pagefind pour la recherche côté client. Pagefind est une solution légère qui indexe le contenu statique au moment du build et permet une recherche instantanée directement dans le navigateur, sans serveur ni service tiers. L’indexation est automatique à chaque déploiement via la commande npx pagefind --site public.

Fonts

La police d’écriture utilisée sur le site est Nunito. Pour des raisons de respect des données personnelles et de confidentialité des visiteurs, j’ai pris le parti de les héberger localement. J’ai rédigé un article à ce propos : “Utiliser des fonts Google localement avec Hugo”.

Infrastructure

DNS

Le nom de domaine jbuget.fr est hébergé chez le fournisseur français Gandi.

Hébergement

Le site Web est déployé sur la plateforme d’hébergement Cloud Netlify.

Celle-ci propose un support complet pour les applications Hugo : CDN, déploiement continu, HTTPS, review apps, interface d’administration, etc. Netlify se charge tout seul de générer et packager les ressources statiques depuis le code source.

Par ailleurs, l’hébergement est gratuit pour les sites de taille modeste, comme un site Web / blog personnel. Le combo avec Hugo est d’autant plus rentable que la tarification de Netlify se base sur le temps de build, fortement réduit et optimisé par le CMS.

CI/CD

Le déploiement du site est entièrement automatisé via Netlify. À chaque push sur la branche main du dépôt GitHub, Netlify déclenche un pipeline de build qui :

Génère le site statique avec Hugo (hugo --gc --minify)
Indexe le contenu pour la recherche avec Pagefind (npx pagefind --site public)
Déploie les fichiers sur le CDN

Les deploy previews sont également activées : chaque pull request génère un aperçu du site accessible via une URL temporaire.

Propriété intellectuelle

Code source

Le code source est publié et disponible sur GitHub : https://github.com/jbuget/jbuget.github.io.

Licence

Le code source est distribué sous licence AGPL (v3).

Il s’agit d’une licence dite “permissive”, au sens où “[elle] impose des restrictions minimales sur la manière dont les autres peuvent utiliser les composants open source” (cf. open-source.developpez.com).

Vous pouvez récupérer le code source, le modifier et même l’exploiter à toutes fins (dont commerciale). Ce faisant, vous êtes tenus de rendre disponible le code source du logiciel (en l’occurrence, ce site Web) modifié lorsque ce dernier est mis à disposition du public par le biais d’un réseau à distance.

💡 Dans un monde idéal, j’aurais aimé séparer la licence du contenant (thème, scripts, ressources, configurations) de celle du contenu (dossier /content et /data) : couvrir les composants techniques avec une licence AGPL-3.0 et protéger le contenu intellectuel via une licence CC-NC
Dans les faits, pour rendre explicite cette intention, il semblerait que je doive gérer 2 entrepôts de code source. Cela irait à l’encontre de mes choix de design (stack simple, avec le minimum d’industrialisation et d’ingénierie) et des contraintes qui sont les miennes.
Finalement, et dans la mesure où le droit de la propriété intellectuelle où la licence CC-NC ne pourrait pas s’appliquer aux 2 répertoires cités ci-dessus, je compte sur le civisme, le respect et la reconnaissance de tout un chacun pour ne pas diffuser mon contenu à des fins commerciales ou dans des conditions portant préjudice à mon travail.

Misc

Environnement de développement

Je ne m’empêche d’utiliser aucun outil ou éditeur de texte / code pour produire le contenu de ce site.

Dans les faits, au quotidien et le plus souvent, j’utilise VSCode.

Comme tout dev moderne, j’ai intégré l’IA dans mon quotidien. J’utilise en priorité Claude Code, ou ChatGPT (pour économiser des tokens pour autre chose que du dev).

La machine que j’utilise pour développer le site et produire le contenu est un MacBook Pro 14 pouces 2023 d’Apple : Apple M2 Max, 64 Go de RAM (le grand luxe !).

En guise de navigateur Web, j’alterne entre Chrome, Brave et Firefox, ce dernier ayant ma préférence depuis quelques années.

Web Analytics

Le site intègre Google Analytics afin de suivre et comprendre l’audience du site, et ainsi pouvoir proposer un contenu et une expérience utilisateur pertinente et de qualité.

SEO et référencement

Hugo génère automatiquement plusieurs ressources utiles au référencement :

Sitemap XML : plan du site mis à jour à chaque build
Flux RSS : pour les lecteurs de flux
robots.txt : fichier de directives pour les moteurs de recherche
Balises Open Graph et Twitter Cards : intégrées dans le <head> de chaque page pour un rendu optimisé lors du partage sur les réseaux sociaux

Thème clair / sombre

Le site propose un sélecteur de thème (clair, sombre, ou synchronisé avec les préférences du système d’exploitation). Le choix est persisté dans le navigateur et appliqué instantanément via JavaScript, sans rechargement de page. J’ai rédigé un article à ce sujet : “Gérer des thèmes graphiques dans un site Web (v2)”.

Commentaires

Les articles du blog intègrent un système de commentaires via Disqus. Cette solution hébergée permet aux lecteurs de réagir sans nécessiter de backend supplémentaire côté serveur.

Formulaire de contact

Le site dispose d’une page de contact dont le formulaire est géré par Netlify Forms. Les soumissions sont protégées par un captcha (reCAPTCHA intégré à Netlify) et les messages sont consultables directement depuis le tableau de bord Netlify.

Raccourcisseur d’URL

La communication et le référencement sont pour moi des éléments importants relatifs au site.

Pour pouvoir disposer de souplesse, flexibilité, résilience, contrôle et métriques par rapport aux liens que je communique à chaque publication d’une nouvelle page ou article, j’utilise une application de gestion des URL.

J’ai opté pour Shlink, une solution open source. Après l’avoir auto-hébergée sur un VPS chez PulseHeberg, je l’héberge depuis septembre 2025 chez Scalingo (merci à eux 🙏).