01 · Contexte & objectif
Un portfolio qui tient lieu de démonstration plutôt que de vitrine : ce qui est décrit ici tourne sur le serveur qui sert cette page.
02 · Contraintes
Contraintes que je me suis données : hébergement et exploitation autonomes sur un VPS, aucun service tiers pour les statistiques, pas de cookies, et un site qui reste rapide malgré une scène WebGL animée en arrière-plan.
03 · Architecture
Site statique généré par Astro, servi par Caddy en conteneur avec certificat Let’s Encrypt automatique. Les statistiques sont collectées par une instance Umami auto-hébergée sur un sous-domaine. La scène de particules est en Three.js, animée au défilement via GSAP ScrollTrigger, et désactivée lorsque la machine annonce trop peu de cœurs ou que le système demande une réduction des animations.
04 · Décisions techniques
Une CSP stricte, donc générée. Autoriser les scripts inline aurait vidé la politique de son intérêt. Chaque bloc inline est autorisé par empreinte SHA-256 — mais des empreintes écrites à la main deviennent fausses au premier changement de code. Elles sont donc calculées au build, injectées dans un fragment de configuration Caddy, et le déploiement refuse de publier si ce qui est réellement servi ne correspond pas à ce qui a été construit.
Un déploiement qui sait revenir en arrière. Le script effectue une rotation de sauvegardes, vérifie le site après publication et restaure automatiquement la version précédente en cas d’échec — politique de sécurité comprise, sans quoi l’ancien contenu se retrouverait sous une CSP conçue pour le nouveau.
Des tests de régression visuelle sur le site en ligne. Quatre captures pleine page, deux résolutions, deux thèmes, comparées pixel à pixel à la référence précédente. Les animations sont neutralisées pour rendre la comparaison déterministe ; la scène WebGL, aléatoire par nature, est délibérément exclue et contrôlée autrement.
05 · Ce que j’en retire
Presque tous les incidents rencontrés venaient de l’outillage, pas du site : un piège de montage Docker qui servait silencieusement une configuration périmée, un test qui validait sa propre implémentation au lieu de celle du site, un garde-fou qui annulait des déploiements sains. Les mécanismes de sécurité méritent la même défiance que le code qu’ils protègent.
01 · Context & goal
A portfolio that acts as its own demonstration rather than a showcase: what’s described here runs on the server delivering this page.
02 · Constraints
Self-imposed: independent hosting and operations on a VPS, no third-party analytics service, no cookies, and a site that stays fast despite an animated WebGL background.
03 · Architecture
Static site generated by Astro, served by containerised Caddy with automatic Let’s Encrypt certificates. Analytics come from a self-hosted Umami instance on a subdomain. The particle scene runs on Three.js, animated on scroll through GSAP ScrollTrigger, and disabled when the machine reports too few cores or the system asks for reduced motion.
04 · Technical decisions
A strict CSP, therefore a generated one. Allowing inline scripts would have emptied the policy of its purpose. Each inline block is allowed by SHA-256 hash — but hand-written hashes go stale on the first code change. They’re computed at build time, injected into a Caddy configuration fragment, and deployment refuses to publish if what’s actually served doesn’t match what was built.
A deployment that can walk itself back. The script rotates backups, verifies the site after publishing and automatically restores the previous version on failure — security policy included, without which the old content would sit under a CSP built for the new one.
Visual regression tests against the live site. Four full-page screenshots, two resolutions, two themes, compared pixel by pixel with the previous baseline. Animations are neutralised to make the comparison deterministic; the WebGL scene, random by nature, is deliberately excluded and checked another way.
05 · Takeaways
Nearly every incident came from the tooling, not the site: a Docker mount pitfall silently serving stale configuration, a test that validated its own implementation instead of the site’s, a safety net cancelling healthy deployments. Safety mechanisms deserve the same suspicion as the code they protect.