Ce projet a mûri longtemps dans ma tête. Des années, en fait. Mais entre le jour où je me suis dit « bon, c’est le moment » et la mise en ligne, il s’est écoulé environ deux mois de soirées et de temps libres. Être son propre client, c’est un drôle d’exercice. On n’a personne à blâmer pour le cahier des charges, et personne pour nous dire que c’est assez bon. Et ce n’est jamais assez bon jusqu’à temps qu’on lâche prise!
Craft CMS 5, en attendant le 6
WordPress était exclu d’emblée, pour des raisons sur lesquelles je ne reviendrai pas ici (elles sont expliquées dans cet article). Quant au choix de Craft CMS, il était fait bien avant la première ligne de code. Ce n’est pas un désaveu de Statamic, au contraire. C’est un excellent outil, que j’utilise surtout pour des sites plus légers, comme des pages d’atterrissage ou des sites informatifs qui bougent peu. Statamic pourrait en faire davantage, mais Craft est conçu pour les sites à grand déploiement, et je voulais que le mien en soit un.
Laravel pur? Il n’en a jamais été question, ce n’est pas fait pour ça. Par contre, Craft 6, qui sera bâti sur Laravel, un framework que j’utilise déjà au quotidien, me semble la recette parfaite. J’ai très hâte! Mais la version 6 n’était pas prête et je ne pouvais pas attendre, alors le site roule sur Craft 5.
La migration viendra. Elle me servira de répétition générale avant de faire passer les sites de mes clients qui voudront franchir le pas eux aussi. Autrement dit, je serai mon propre cobaye.
Tailwind, et pas de Vue (pour une fois)
Côté interface, Tailwind CSS allait de soi : c’est à mon avis le framework CSS le plus polyvalent. J’ai d’abord pensé ajouter Vue.js, que j’utilise beaucoup dans mes applications. En y regardant de plus près, rien sur ce site ne justifiait des composants réutilisables. J’ai donc opté pour du JavaScript « vanille », découpé en petits modules. Moins de dépendances, moins de poids, moins de choses à mettre à jour. Parfois, le bon outil, c’est l’absence d’outil.
Les polices sont hébergées sur le serveur du site plutôt que chargées depuis Google Fonts. C’est plus rapide, et ça évite d’envoyer l’adresse IP des visiteurs à un tiers.
Forge, même sans Laravel
Pour l’hébergement, j’avais plusieurs options. J’ai choisi Laravel Forge, même si Craft 5 n’est pas une application Laravel, parce que c’est l’outil que j’utilise déjà pour mes autres projets. Le site a son environnement de préproduction (staging), une copie privée où j’essaie chaque changement avant de le mettre en ligne, et son environnement de production, c’est-à-dire le site que vous visitez en ce moment. Les images sont stockées dans DigitalOcean Spaces, et Craft les redimensionne et les convertit automatiquement au format WebP. Pourquoi? Chaque appareil reçoit une image à la bonne taille plutôt qu’un gros fichier pensé pour un grand écran. Et le format WebP est nettement plus léger que le JPEG ou le PNG, à qualité égale. Résultat : des pages qui se chargent plus vite, surtout sur un téléphone, et moins de données consommées pour les visiteurs.
Bilingue, parce que pourquoi pas
La réponse courte : pourquoi pas? Et non, ce n’est pas un excès de prétention. La vraie raison, c’est Cookie Consent Kit. J’ai d’abord créé cette extension pour mes propres besoins, puis je l’ai distribuée dans les boutiques d’extensions de Craft et de Statamic. Sa documentation devait donc être en anglais, pour le marché mondial.
Un site dont seules certaines parties sont en anglais me semblait boiteux, alors j’ai opté pour la totale. Et Craft en multilingue, c’est un charme, autant pour le développeur que pour l’éditeur. Dans ce cas-ci, je suis les deux.
Une bannière de consentement faite maison
Le site a aussi servi de bac à sable pour bâtir Cookie Consent Kit. J’étais tanné de payer une licence, site après site, pour une extension de consentement aux témoins qui ne répondait pas tout à fait à mes besoins et qui n’avait pas été pensée pour la Loi 25. J’ai donc décidé de bâtir la mienne, sur mesure. Je l’ai conçue comme je la souhaitais, avec un tableau clair de chaque témoin déposé. Elle s’adapte aussi à n’importe quel site : elle offre de base un thème clair et un thème sombre, entièrement personnalisables pour la mettre aux couleurs de n’importe quelle marque. Une chose ne change jamais, toutefois : les boutons « Accepter » et « Refuser » restent sur un pied d’égalité, comme le veulent les règles de consentement de la Loi 25. Et tout ça a été éprouvé ici même, sur ce site! Elle est gratuite pour la plupart des usages, alors j’espère que d’autres en profiteront.
Le plus difficile : se vendre soi-même
Pour mes clients, je sais normalement comment les mettre en valeur. Après avoir discuté avec eux et pris le temps de comprendre leur marché, leurs produits et leur vision, les mots viennent. Pour soi-même, c’est une autre histoire. Je ne suis pas du genre vantard, et je travaille beaucoup dans l’ombre. Trouver les bons mots pour présenter mon propre travail a été, de loin, la partie la plus difficile du projet. Bien plus que le code. C’était la même chose pour les témoignages. J’ai demandé à quelques clients s’ils accepteraient de m’écrire quelques mots, sans pression, et rien que de le demander me gênait! Mais j’ai des clients formidables : ils ont accepté tout de suite et m’ont répondu rapidement. Vous trouverez leurs témoignages dans la section Réalisations.
La plus belle surprise
C’est d’avoir enfin concrétisé ce que j’avais en tête depuis si longtemps. Le résultat est exactement celui que j’imaginais. L’ambiance geek est assumée, avec ses bouts de code et son terminal, mais le site reste agréable à parcourir pour les personnes qui ne parlent pas PHP. De ma tête au HTML, une copie conforme!
Si c’était à refaire
Je ne changerais rien, sauf peut-être le calendrier : j’aurais dû le faire bien avant. Mais je ne regrette pas d’avoir attendu non plus. Aujourd’hui, l’IA m’assiste dans mon travail et me permet d’aller encore plus loin. Ce site, je l’ai d’ailleurs bâti avec Claude, mon fidèle acolyte, toujours prêt à tester mes idées les plus périlleuses.
Pour les curieux
Oh, je vous entends déjà : PHP est mort. Si c’était vrai, je me demande bien pourquoi il fait encore tourner environ sept sites web sur dix, Wikipédia compris, et pourquoi il a droit à une nouvelle version chaque année. Pour un mort, il pète le feu : il s’améliore sans cesse, s’adapte aux standards les plus modernes et va toujours plus vite!
| Couche | Outil |
|---|---|
| Langage | PHP 8.5 |
| CMS | Craft CMS 5.11 |
| Base de données | MySQL |
| Code maison | Module Craft sur mesure |
| Gabarits | Twig |
| CSS | Tailwind CSS 4 |
| JavaScript | JavaScript natif, en modules, sans framework |
| Compilation | Vite 8, branché à Craft avec l’extension Vite (nystudio107) |
| Éditeur riche | CKEditor 5 (Pixel & Tonic) |
| Référencement | SEOMate (Værsågod) |
| Formulaires | Contact Form (Pixel & Tonic) |
| Courriel | SendGrid (PutYourLightsOn) |
| Consentement | Cookie Consent Kit (Québec Studio) |
| Fichiers | DigitalOcean Spaces, avec l’extension DigitalOcean Spaces Volume (Værsågod) |
| Polices | Inter et Titillium Web, auto-hébergées avec Fontsource |
| Gestionnaire de paquets | Bun |
| Hébergement | Laravel Forge (préproduction et production) |
| Assistant de programmation | Claude Code (Anthropic), avec Claude Opus 5.5 (1M) |
En terminant
Tout ce que vous voyez ici, ce sont les mêmes outils et la même façon de travailler que j’apporte aux projets de mes clients. Et pour les curieux qui ont lu jusqu’ici, une petite récompense : j’ai glissé dernièrement quelques surprises un peu partout sur le site. Je ne vous dirai pas où, ce serait gâcher le plaisir. En fouillant, vous trouverez peut-être des bogues (ça m’étonnerait, mais si c’est le cas, rapportez-les-moi, s’il vous plaît), mais plus probablement des fantômes! Quelques indices tout de même : essayez de copier le lien de cet article, surtout si vous êtes amateur de Mortal Kombat II. Tentez aussi de débloquer vos 30 vies, ou de vous faufiler dans les coulisses du site grâce à son terminal. Bonne chasse!
Et à ce stade de la lecture, vous avez sûrement déjà un succès de débloqué!
Richard, client exigeant envers lui-même