Site personnel
Ce site : blog bilingue en Markdown versionné, déployé sur Vercel.
- Objectif
- Un espace personnel pour écrire et présenter mon travail.
- Résultat
- En production sur Vercel, pensé pour les performances, l’accessibilité et le référencement.
- Stack technique
- AstroTailwind CSSMarkdownVercel
Ce site est construit avec Astro et Tailwind CSS, entièrement bilingue (français / anglais), et déployé sur Vercel. Les articles sont des fichiers Markdown versionnés avec le code : chaque publication passe par une pull request, les images vivent dans le dépôt, et un push suffit à déclencher le déploiement. Un terrain de jeu pour soigner les performances, l’accessibilité et le référencement.
Le contexte
Ce site est le projet sur lequel je reviens le plus souvent, et mon terrain d’essai pour les stacks et les outils. Sa première version associait Astro pour le blog, Next.js pour la page de présentation, et Notion comme CMS : un webhook relançait le build à chaque modification, et les images étaient recopiées dans Vercel Blob parce que Notion n’expose que des URL temporaires.
Je l’ai simplifiée depuis : tout le site tourne aujourd’hui sur Astro seul, et les articles sont des fichiers Markdown dans le dépôt. Les anciennes adresses des articles redirigent de façon permanente vers les nouvelles.
Ce que j’ai construit
Le français est la langue par défaut, l’anglais vit sous /en. Chaque article existe en deux fichiers reliés par une clé de traduction commune, ce qui alimente le sélecteur de langue et les balises hreflang de chaque article. Le site propose un thème clair et un thème sombre, un flux RSS par langue et des données structurées (Person, ProfessionalService, BlogPosting, fil d’Ariane).
Au build, une intégration Astro compose avec sharp des cartes Open Graph de 1200 × 630 pixels pour les pages et les projets (celles des articles sont recadrées depuis leur image de couverture), afin que les partages sur LinkedIn ou Slack ne recadrent plus une image verticale. Le formulaire de contact passe par une fonction Vercel qui envoie le message via l’API Brevo ; il fonctionne aussi sans JavaScript, avec une redirection vers une page de confirmation.
La stack et pourquoi
Astro génère du HTML statique et n’envoie presque pas de JavaScript au navigateur, ce qui convient à un site dont l’essentiel du contenu est du texte. Tailwind CSS gère le style, et la coloration du code dans les articles passe par Shiki, en version claire et sombre.
La qualité est vérifiée à chaque pull request par une intégration continue GitHub Actions : lint avec Biome, vérification des types avec astro check, tests unitaires Vitest, build, puis tests de bout en bout Playwright. Chaque pull request obtient aussi son URL de prévisualisation sur Vercel, pratique pour relire un article avant de le fusionner. Renovate propose chaque lundi les mises à jour de dépendances et fusionne seul les versions mineures et correctives.
Où en est le projet
Le site est en production sur Vercel, et son code est public sous licence MIT. Je continue de l’améliorer, notamment sur les performances, l’accessibilité et le référencement.