Comment j’ai créé mon site personnel : Approche technique et choix stratégiques

Front-end : Typescript et Next.js

Pour la partie front-end, j’ai utilisé Typescript avec le framework Next.js.
Pourquoi ce choix ? Next.js offre :

• Une excellente performance côté serveur grâce au Server-Side Rendering (SSR).
• Une flexibilité pour créer des routes dynamiques.
• Une intégration parfaite avec des outils modernes comme sanity.io et Vercel.

Le site est hébergé sur Vercel, une solution qui simplifie énormément le déploiement des applications Next.js. C’est rapide, fiable et parfaitement adapté à ce projet.

Remarque : Le front n’est pas la partie la plus complexe ni la plus mise en avant. L’essentiel réside dans la gestion des contenus dynamiques.

Gestion des articles : Sanity.io pour un CMS intégré

Une question essentielle s’est posée : comment gérer le contenu dynamiquement ?
Je voulais pouvoir écrire des articles sans avoir besoin de :

• Modifier manuellement le code.
• Re-pusher et re-builder le site à chaque modification.

Mes options :

Créer une base de données + un back-end dédié
Cela aurait impliqué de :Inconvénient : Trop complexe et, soyons honnêtes, réinventer la roue.

• Créer une base de données pour stocker les articles.
• Développer un back-end en Typescript pour gérer les requêtes.
• Écrire les articles en Markdown.

Utiliser Sanity.io
J’ai choisi Sanity.io, une solution CMS moderne parfaitement intégrée à Next.js.Résultat : je peux désormais ajouter ou éditer des articles en quelques clics, et le site s’actualise automatiquement.

• Avantages :
  • Facile à configurer.
  • Offre un back-end puissant pour gérer les articles directement via une interface conviviale.
  • Permet une modification dynamique sans toucher au code.

Gestion des vidéos : GitHub Actions + API YouTube

Pour la page dédiée à mes vidéos, j’ai opté pour une approche différente, mais tout aussi optimisée.
Voici comment cela fonctionne :

Un repository GitHub comme base de données
J’ai créé un repository GitHub où je stocke toutes les données publiques nécessaires pour alimenter le site.

GitHub Actions pour l’automatisation
Grâce aux GitHub Actions, j’automatise la récupération des informations de ma chaîne YouTube.

• L’API v3 de YouTube est utilisée pour récupérer automatiquement les métadonnées (titre, description, lien, etc.) de mes vidéos.
• Ces données sont ensuite consolidées dans un fichier JSON, stocké sur le repository.

Pourquoi ne pas utiliser un back-end ?
J’aurais pu mettre en place un service back-end en Next.js pour interroger directement l’API YouTube à chaque requête.Solution : En utilisant GitHub Actions pour centraliser les données dans un fichier JSON, je peux :

• Problème : Si un utilisateur fait 100 requêtes, cela déclenche 100 appels à l’API YouTube.
• Résultat : Le quota peut être atteint rapidement, ce qui risquerait de faire tomber le site.
• Contrôler le nombre de requêtes via un scheduler.
• Simplifier le processus en ne faisant que lire le fichier JSON pour alimenter le site.

Des idées pour l’avenir : intégrer l’IA

Ce site est une base solide, mais il est loin d’être figé. J’ai plusieurs idées pour l’améliorer :

• Ajouter des fonctionnalités interactives basées sur l’intelligence artificielle.
• Créer des outils personnalisés pour mes visiteurs, comme des assistants virtuels ou des modules de recherche avancée.
• Intégrer des visualisations de données dynamiques pour rendre le contenu encore plus engageant.

Un projet en évolution

Ce site, c’est bien plus qu’un simple portfolio. C’est un projet technique évolutif, un espace où je peux expérimenter, partager mes connaissances et simplifier ma gestion de contenu. Je continuerai d’écrire et de documenter mes choix technologiques au fil des évolutions.

Merci de suivre cette aventure, et restez connectés pour découvrir les prochaines innovations que j’y intégrerai !