Comment j'ai construit et déployé un portfolio full-stack pour 0€

Avez-vous déjà vérifié votre facture cloud après un « déploiement rapide » et découvert une charge surprise de 47 $ qui vous fixait du regard ?

Quand j'ai décidé de construire mon portfolio de développeur, je me suis fixé une règle : il doit coûter exactement 0€ à l'exécution — hors nom de domaine. Pas 5€/mois. Pas « gratuit pendant 30 jours ». Zéro.

Mais j'ai aussi refusé de faire des compromis. Je voulais un CMS complet, du contenu dynamique, un blog, un chatbot IA, et un support multilingue. Le genre de portfolio qui représente vraiment ce que je peux construire en tant qu'ingénieur.

Spoiler : j'y suis arrivé. Voici exactement comment.

La Stack

Voici ce qui tourne réellement derrière mon portfolio :

• Frontend : Next.js (App Router) + Tailwind CSS + shadcn/ui
• CMS : Strapi v5 — headless, auto-hébergé
• Base de données : PostgreSQL
• CDN d'images : Cloudinary
• Cache : Redis (pour le chatbot IA)
• IA : Groq API pour l'inférence LLM
• Keep-alive : cron-job.org — le héros méconnu

Pourquoi Next.js + Strapi ? Je voulais que chaque section soit pilotée par le CMS — pas du JSX codé en dur avec mon nom intégré. Les dynamic zones de Strapi me permettent de définir des schémas de composants, composer des pages visuellement, et le frontend affiche tout ce que le CMS envoie. 16 sections — hero, à propos, compétences, projets, timeline, certifications, blog, contact, et plus — toutes alimentées par un seul DynamicZoneManager qui charge chaque section à la demande en lazy loading.

Combiné avec ISR (Incremental Static Regeneration), les pages sont générées statiquement mais se revalident toutes les heures. Chargements en millisecondes, mais je peux mettre à jour le contenu sans redéployer.

La Répartition de l'Hébergement à 0€

C'est le cœur de toute la configuration — 7 services en tier gratuit, chacun faisant ce qu'il fait de mieux :

• Vercel — Frontend Next.js + CDN (100 GB de bande passante gratuite)

• Koyeb — Backend CMS Strapi (1 instance nano, 512 MB RAM)

• Neon — Base de données PostgreSQL (0,5 GB de stockage, 191 heures de calcul/mois)

• Cloudinary — Hébergement d'images + CDN (25 GB de stockage, 25 GB de bande passante/mois)

• Upstash — Redis pour chatbot IA (10 000 commandes/jour, 256 MB)

• Groq — Inférence IA (API gratuite, limitée par taux)

• cron-job.org — Keep-alive Strapi (crons gratuits illimités)

Total : 0,00€/mois. Pas de pièges de carte bancaire. Pas de périodes d'essai. De véritables tiers gratuits qui tournent en production. Le seul coût réel ? Un nom de domaine — et même celui-ci est optionnel puisque Vercel vous donne un sous-domaine .vercel.app gratuitement.

Le Problème du Cold Start — Et le Héros Qui M'a Sauvé

Voici la partie dont personne ne vous prévient. Le tier gratuit de Koyeb descend à zéro après 5 minutes d'inactivité. Pas de trafic pendant 5 minutes ? Votre instance Strapi s'endort. Le visiteur suivant déclenche un cold start qui prend 10-30 secondes.

Imaginez un recruteur cliquant sur le lien de votre portfolio et fixant un spinner pendant 20 secondes. C'est un onglet fermé et une opportunité manquée.

Mon premier correctif ? UptimeRobot avec des pings toutes les 5 minutes. Ça n'a pas marché. S'il ping à la minute 4:59 et que Koyeb s'endort à 5:00, vous avez une race condition. L'intervalle était trop proche du seuil.

Le vrai correctif : cron-job.org

J'ai configuré un cron job qui ping mon endpoint de santé Strapi chaque minute. C'est 1 440 pings par jour, tous gratuits. Avec un intervalle d'1 minute, l'instance ne s'approche jamais du seuil de 5 minutes de sommeil de Koyeb. Il y a toujours un battement de cœur dans les 60 dernières secondes.

Ma configuration :

- URL : Endpoint /api/health de Strapi sur Koyeb

- Planification : Chaque minute, 24/7

- Notifications : Email si 3 pings consécutifs échouent

Comme filet de sécurité, le côté Next.js a aussi une logique de retry avec backoff exponentiel — 3 tentatives avec des délais de 2s → 4s → 8s. Le cron empêche les cold starts ; le retry gère les cas limites. Ensemble, ils ont été ultra-fiables.

Le Chatbot IA — Gratuitement

C'est la partie dont je suis le plus fier. Mon portfolio a un chatbot IA qui répond aux questions sur mon expérience, mes projets et mes compétences. Gratuitement.

L'architecture est ce que j'appelle « Push & Stream » :

Push — Quand je mets à jour du contenu dans Strapi, un webhook pousse les données vers Upstash Redis. Cela garde une base de connaissances pré-construite du contenu de mon portfolio prête à l'emploi.

Stream — Quand un visiteur pose une question, la route API récupère le contexte depuis Redis, l'insère dans le prompt, et diffuse la réponse depuis Groq via le Vercel AI SDK.

Pourquoi le context stuffing au lieu du RAG avec embeddings vectoriels ? Parce que mon corpus de portfolio est assez petit pour tenir directement dans le prompt. Pas besoin de modèles d'embedding, de bases de données vectorielles, ou de recherche par similarité. Parfois la solution la plus simple est la bonne.

La synchronisation est stratifiée pour la fiabilité :

- Webhook Strapi → met à jour Redis lors du changement de contenu

- Hook de déploiement Vercel → re-synchronise à chaque déploiement

L'Architecture

Voici comment les 7 services se connectent, de la création de contenu à ce que voient les visiteurs :

• J'écris du contenu dans le CMS Strapi (hébergé sur Koyeb)
• Strapi stocke les données dans Neon PostgreSQL et les images dans Cloudinary
• Quand le contenu change, un webhook le synchronise vers Upstash Redis pour le chatbot IA
• cron-job.org ping Strapi chaque minute pour empêcher les cold starts de Koyeb
• Next.js (hébergé sur Vercel) récupère le contenu depuis Strapi via l'API REST
• Le chatbot IA diffuse les réponses via l'API Groq
• Les visiteurs obtiennent une page statique rapide servie depuis le CDN global de Vercel

Ce Que J'ai Appris

La meilleure infrastructure est celle que vous comprenez complètement. J'aurais pu tout mettre sur un VPS à 20€/mois et m'arrêter là. Au lieu de ça, j'ai appris comment 7 services différents fonctionnent, comment ils se connectent, et comment les rendre résilients.

Chaque contrainte a forcé une meilleure décision. Pas de budget pour l'hébergement ? J'ai appris le pipeline d'optimisation de Cloudinary. Le backend continue de s'endormir ? J'ai découvert cron-job.org et construit une logique de retry. Besoin de deux langues ? J'ai architecturé l'i18n depuis la couche CMS au lieu d'ajouter des fichiers de traduction.

Si vous construisez votre portfolio, mon conseil : ne commencez pas par le design — commencez par l'architecture. Déterminez où vit votre contenu, comment il atteint le navigateur, et comment vous le mettrez à jour dans 6 mois quand vous aurez de nouveaux projets à présenter.

Les outils sont là. Les tiers gratuits sont généreux. La seule chose que vous devez investir, c'est du temps — et en tant qu'ingénieurs, c'est la seule ressource que nous aimons dépenser.

Des questions sur cette stack ? Vous avez trouvé une meilleure combinaison de tiers gratuits ? Contactez-moi via le formulaire de contact ou connectez-vous avec moi sur LinkedIn.