L'évolution de mon site web personnel : Un voyage à travers les technologies
Publié le: 10 juin 2025
Le web évolue constamment, et mon site personnel en est le parfait reflet. En tant que professionnel du développement web et architecte de solutions, j'ai utilisé ce laboratoire personnel pour explorer les technologies émergentes et affiner mes compétences. Suivez mon parcours technique qui illustre bien les tendances du développement web des dernières années.
Les débuts : WordPress et PHP
Comme beaucoup de développeurs, j'ai commencé avec une solution éprouvée : WordPress. Cette plateforme offrait une combinaison idéale de flexibilité et de facilité d'utilisation. Le thème était personnalisé pour refléter mon identité professionnelle, mais j'ai rapidement ressenti le besoin d'explorer des alternatives plus modernes.
Caractéristiques de cette version :
- Backend WordPress en PHP
- Cycle de vie de page classique avec rechargements complets
- Base de données MySQL pour le stockage du contenu
- Thème personnalisé avec des templates PHP
L'expérience Hugo : premier pas vers les sites statiques
Ma première incursion dans le monde des générateurs de sites statiques s'est faite avec Hugo, un framework écrit en Go et reconnu pour sa vitesse de génération exceptionnelle. Cette étape représentait une rupture importante avec le modèle WordPress, privilégiant la simplicité et la performance à la richesse fonctionnelle.
Hugo m'a permis de découvrir les avantages d'une architecture sans base de données, où le contenu est stocké sous forme de fichiers Markdown et transformé en HTML statique lors du processus de build.
Caractéristiques de cette version :
- Génération ultra-rapide grâce au moteur Go
- Contenu en Markdown avec front matter YAML
- Thème personnalisé avec le langage de templates de Hugo
- Workflow Git-centered pour les mises à jour de contenu
- Déploiement simplifié via des fichiers statiques
- Absence de base de données, réduisant les vulnérabilités
Cette transition vers Hugo a constitué une véritable révélation concernant les avantages des sites statiques : vitesse de chargement, sécurité renforcée et simplicité d'hébergement. C'était un pas décisif vers l'adoption complète de l'approche JAMstack.
VitePress : l'adoption des générateurs de sites statiques JavaScript
Pour ma seconde expérience avec un générateur de sites statiques, j'ai opté pour une approche radicalement différente en utilisant VitePress, un générateur de sites statiques basé sur Vite et Vue.js. Cette transition marque un virage important vers l'architecture JAMstack (JavaScript, APIs, et Markup).
VitePress m'a permis de créer un site extrêmement rapide où le contenu est prérendu en HTML statique, tout en conservant la capacité d'intégrer des composants Vue.js interactifs lorsque nécessaire. Le contenu était principalement rédigé en Markdown, ce qui simplifiait grandement le processus d'écriture et de maintenance.
Caractéristiques de cette version :
- Génération de site statique avec VitePress
- Contenu en Markdown pour une rédaction simplifiée
- Styling avec UnoCSS (variante de Tailwind avec les presets Uno et Wind)
- Scripts de build personnalisés pour la génération de base de données de recherche
- Système de déploiement automatisé via FTP
- Support pour les webhooks permettant des mises à jour à distance
- Génération automatique de flux RSS
Cette approche "content-first" m'a permis de me concentrer davantage sur la qualité du contenu plutôt que sur la complexité technique. Ce changement vers un site statique a apporté des améliorations significatives en termes de performances, de sécurité et de simplicité de maintenance, tout en me permettant d'explorer les avantages de l'approche JAMstack.
L'ère d'Astro : Performance et simplicité
L'arrivée d'Astro a marqué un tournant important dans ma façon de concevoir le site. Astro propose une approche hybride qui m'a séduit : du HTML généré statiquement pour la vitesse, avec des "îlots" de JavaScript interactif uniquement là où c'est nécessaire.
Caractéristiques de cette version :
- Framework Astro pour la génération de pages
- Hydratation partielle ("islands architecture")
- Intégration de composants React uniquement lorsque nécessaire
- Markdown pour la gestion du contenu
- Optimisation poussée des performances (Core Web Vitals)
Architecture headless avec Optimizely DXP
La dernière évolution représente l'aboutissement de cette quête d'équilibre entre performance, expérience utilisateur et maintenabilité.
En tant qu'Optimizely MVP, j'ai naturellement choisi d'explorer les possibilités offertes par Optimizely SaaS en mode headless, couplé à Astro pour le frontend. Cette architecture sépare complètement la gestion du contenu de sa présentation.
Caractéristiques de cette version :
- Architecture JAMstack complète
- Astro comme framework frontend
- Optimizely SaaS comme CMS headless
- Requêtes GraphQL pour récupérer le contenu
- TypeScript pour la sécurité des types
- Tailwind CSS pour les styles UI
- Design minimaliste centré sur le contenu
Les bénéfices de cette évolution
Cette progression technologique a apporté plusieurs avantages significatifs :
- Performance : Les temps de chargement sont maintenant quasi instantanés grâce au HTML pré-rendu et à l'hydratation sélective.
- Expérience développeur : TypeScript et les outils modernes ont grandement amélioré la maintenabilité du code.
- Sécurité : L'architecture JAMstack élimine de nombreux vecteurs d'attaque traditionnels.
- Évolutivité : La séparation du contenu et de la présentation facilite les évolutions futures.
- SEO : Le contenu étant disponible directement dans le HTML, les moteurs de recherche peuvent l'indexer efficacement.
Conclusion : L'importance de l'itération constante
Ce parcours à travers les différentes versions de mon site personnel illustre bien l'importance d'une démarche d'amélioration continue. Chaque itération a apporté son lot d'apprentissages et a permis d'explorer de nouvelles approches.
En tant qu'architecte de solutions chez Verndale et Optimizely MVP, je continue à explorer les frontières des technologies web modernes. Mon site personnel reste un laboratoire d'expérimentation privilégié, où les nouvelles idées peuvent être testées avant d'être appliquées à des projets clients.
La tendance actuelle vers les architectures découplées et la génération de sites hybrides (partiellement statiques, partiellement dynamiques) me semble particulièrement prometteuse. Elle combine le meilleur des deux mondes : la performance des sites statiques et la flexibilité des applications dynamiques.
L'aventure continue, et je suis impatient de voir quelles nouvelles technologies viendront façonner la prochaine itération de ce site.