Créer ton site avec newsletter automatique pour 15 € par an

C’est le prompt que j’ai utilisé pour construire ce site : un site pro avec des guides, des ressources, des liens courts pour mes DM, et une newsletter hebdomadaire qui s’écrit et se programme toute seule. Le seul truc que je paie, c’est le nom de domaine.

Le principe

Tu colles un seul prompt dans Claude Code. Il commence par te poser des questions (ton projet, ta marque, ton contenu, ton design), te propose un plan que tu valides, puis construit le site par étapes, en s’arrêtant à chaque fois que c’est à toi de jouer : créer un compte, copier une clé, ajouter un enregistrement DNS. Rien ne se code avant que tu aies validé le plan, et rien ne se met en ligne avant que tu dises « go ».

À la fin, tu as : un site rapide et propre (Astro, tests automatisés, mise en ligne sur Netlify), tes guides et ressources avec des liens courts type tonsite.com/motcle pour tes DM, des formulaires de contact, des statistiques de visite sans cookies, et une newsletter hebdomadaire automatique qui collecte l’actu, la fait écrire par une IA, la programme, et te laisse l’annuler d’un clic si tu n’es pas convaincu.

Ce que ça coûte

Les étapes en bref

Le prompt est découpé en 8 phases. Claude Code s’arrête entre chacune pour que tu valides ou que tu agisses.

1. Comprendre ton projet. Des questions sur ton contenu, ta marque, ce que tu veux montrer ou cacher, puis un plan complet à valider avant que quoi que ce soit soit codé.
2. Fondations du site. Astro, TypeScript, tests, CI, hébergement Netlify, et 2 à 3 directions de design parmi lesquelles choisir.
3. Pages et contenus. Accueil, bibliothèque avec recherche et filtres, modèles de guide et de ressources, liens courts, et un script pour créer un nouveau contenu en 2 minutes.
4. Services gratuits à brancher. Adresse e-mail pro, newsletter, formulaires, mesure d’audience : un compte à la fois, expliqué pas à pas.
5. Le cadre légal. Mentions légales et politique de confidentialité, avec le rappel que ce n’est pas un conseil juridique.
6. La newsletter automatique. Le workflow qui collecte l’actu, la fait écrire, programme l’envoi et te laisse annuler.
7. SEO, performance et qualité. Sitemap, Open Graph, tests, un site rapide sur mobile.
8. Mise en ligne et routine. Un audit avant le « go », la mise en production, un premier essai de la newsletter avec toi, puis ta routine hebdomadaire.

Le prompt

Tout le texte ci-dessous se colle en un seul bloc dans Claude Code, à la racine d’un dossier vide (ou de ton ancien site).

Tu vas m'aider à créer, de A à Z, un site web professionnel de contenu
(guides, ressources, présentation, contact) avec une newsletter
hebdomadaire automatisée, des tests, et une mise en ligne propre.
Objectif : un site de qualité qui tourne presque tout seul, avec
0 € d'abonnement (hors nom de domaine).

RÈGLES DE TRAVAIL
- Planifie d'abord, code ensuite. Ne code rien avant ma validation.
- Travaille par phases. Chaque tâche = une branche feature/... = une PR
  avec une CI verte. Jamais de push direct sur la branche de production.
- Arrête-toi (STOP) à chaque fois que je dois agir moi-même : créer un
  compte, récupérer une clé, ajouter un enregistrement DNS, valider
  un design. Dis-moi exactement où cliquer et quoi copier.
- Ne me demande JAMAIS la valeur d'un secret. Je les ajoute moi-même
  dans GitHub et dans l'hébergeur.
- N'invente jamais de chiffres, de témoignages ou d'informations
  personnelles : mets des TODO(contenu) et liste-les.
- Avant d'utiliser un service ou une API, vérifie sa documentation
  officielle ACTUELLE (les offres gratuites et les API changent).
- Crée un CLAUDE.md avec les conventions du projet, et un README clair.

=====================================================================
PHASE 0 — COMPRENDRE MON PROJET (questions)
=====================================================================
Pose-moi ces questions, par petits groupes, et attends mes réponses.
Si je ne sais pas, propose-moi 2 ou 3 options avec ta recommandation.

1. Le projet : de quoi parle mon contenu ? Pour qui ? Quelle promesse
   en une phrase ?
2. Moi : prénom affiché, parcours en quelques lignes, ce que je veux
   montrer ou cacher (vie privée : nom de famille, employeurs…).
3. La marque : nom, nom de domaine (j'en ai un ou pas ?), réseaux
   sociaux et identifiants.
4. Le contenu : quels types (guides pas à pas, listes de ressources,
   articles…) ? Quelles catégories ? Ai-je déjà des contenus à migrer ?
5. Mes vidéos : est-ce que je fais des vidéos avec un mot-clé à
   commenter pour recevoir un lien en DM ? (si oui : liens courts)
6. La newsletter : fréquence, jour et heure d'envoi, contenu souhaité
   (actu de mon domaine, mes nouveaux contenus, les deux ?).
7. Les contacts : quelles adresses reçoivent quoi (questions,
   partenariats, events) ?
8. Le cadre légal : pays, statut (particulier, micro-entreprise…),
   adresse publiable ou domiciliation.
9. Le design : 2-3 sites que j'aime, ambiance souhaitée, couleur
   d'accent éventuelle, clair/sombre.
10. L'existant : ai-je déjà un site ou un dépôt GitHub à reprendre ?

Puis rédige un PLAN.md : résumé du projet, arborescence du site,
design system, modèle de données des contenus, choix techniques
justifiés, phases et tâches, liste de ce que je dois fournir,
décisions à valider. STOP : j'attends ta validation du plan.

=====================================================================
PHASE 1 — FONDATIONS DU SITE
=====================================================================
Stack recommandée (à confirmer dans le plan) :
- Astro en génération statique (HTML lisible par Google, rapide),
  TypeScript, Content Collections en MDX avec schémas Zod.
- React uniquement en îlots pour l'interactivité (filtres, modale).
- Recherche statique Pagefind.
- ESLint, Prettier, tests unitaires, tests Playwright, CI GitHub
  Actions (lint + build + tests sur chaque PR).
- Hébergement Netlify, relié au dépôt GitHub (dépôt privé).

Design :
- Épuré, aéré, mobile-first (la majorité du trafic arrive d'un
  téléphone via les réseaux), une seule couleur d'accent, mode clair
  et sombre, typographie soignée, accessibilité WCAG AA.
- Une page /styleguide (noindex) avec tous les tokens et composants.
- Propose-moi 2-3 directions visuelles. STOP pour que je choisisse.

=====================================================================
PHASE 2 — PAGES ET CONTENUS
=====================================================================
- Accueil : promesse claire, derniers contenus, courte présentation,
  appel à la newsletter.
- Bibliothèque(s) : recherche, filtres par catégorie, tri.
- Modèle de page "guide" : fiche récap (coût, prérequis, durée),
  blocs de code et prompts copiables, encadrés, dépannage, sources.
- Modèle de page "ressources" : cartes cliquables (nom, description,
  langue, prix, niveau), bouton "copier tous les liens".
- Liens courts /[mot-clé] générés depuis le frontmatter (redirections,
  insensibles à la casse, build en échec si doublon), avec ?ref=dm.
- À propos, Contact, Travailler ensemble (si pertinent), 404 avec
  recherche, page /merci (noindex).
- En fin de page : un bloc de 3 cartes (contenus, newsletter,
  réseaux). Jamais deux formulaires newsletter sur la même page.
- Un script "npm run new" pour créer un nouveau contenu en
  2 minutes, avec le frontmatter prérempli.
- Migre mes contenus existants. STOP pour que je relise.

=====================================================================
PHASE 3 — SERVICES GRATUITS À BRANCHER
=====================================================================
Pour chaque service : explique-moi pas à pas la création du compte et
où trouver la valeur à copier, puis STOP.

a) Adresse e-mail pro sur mon domaine (gratuit)
   - Redirection avec ImprovMX vers ma boîte actuelle.
   - Enregistrements DNS : 2 MX + 1 TXT SPF.
   - ATTENTION : un domaine n'a qu'UN SEUL enregistrement TXT
     "v=spf1". S'il faut en combiner plusieurs, fusionne-les.

b) Newsletter avec Kit (gratuit jusqu'à 10 000 abonnés)
   - Adresse d'expéditeur = mon adresse pro, JAMAIS une adresse Gmail
     (sinon DMARC échoue et l'e-mail part en spam). Supprime les
     adresses gratuites des expéditeurs dans Kit.
   - Domaine d'envoi vérifié (CNAME SPF, 2 DKIM, TXT DMARC p=none).
   - Formulaire avec double opt-in : e-mail de confirmation traduit,
     "Auto-confirm" décoché, redirection vers /merci.
   - Sur le site : mon propre formulaire (design du site) qui poste
     vers l'endpoint du formulaire Kit (Form ID public, jamais la clé
     API), consentement RGPD non pré-coché, honeypot.
   - Ne connecte PAS mon domaine principal dans "Custom domains" de
     Kit (conflit avec l'hébergeur) ; renomme juste le sous-domaine
     .kit.com.

c) Formulaires de contact avec Web3Forms (gratuit)
   - Une clé par adresse de réception (ex. une pour les questions,
     une pour les partenariats).

d) Mesure d'audience avec Umami Cloud (gratuit, sans cookies)
   - Script en production uniquement, data-domains = mon domaine
     (les aperçus ne sont pas comptés).
   - Événements : inscriptions, clics sur les ressources, arrivées
     via les liens courts, envois de formulaires.

Variables : les valeurs publiques côté navigateur commencent par
PUBLIC_ (Astro). Les secrets restent sans ce préfixe, côté serveur.
Documente tout dans .env.example.

=====================================================================
PHASE 4 — LÉGAL (France)
=====================================================================
- Mentions légales (éditeur, statut, SIRET, adresse, hébergeur avec
  son adresse officielle vérifiée), en noindex.
- Politique de confidentialité : données, finalités, bases légales,
  durées, prestataires, transferts hors UE.
- Rappelle-moi qu'un site professionnel doit afficher l'adresse de
  l'éditeur (une domiciliation est possible), et que tu ne fais pas
  de conseil juridique.

=====================================================================
PHASE 5 — NEWSLETTER AUTOMATIQUE (0 € par mois)
=====================================================================
Fonctionnement :
- Un workflow GitHub Actions planifié (dépôt privé) qui, chaque
  semaine :
  1. collecte l'actu de la semaine depuis des flux RSS / API publics
     que tu vérifies un par un ;
  2. fait sélectionner et rédiger les sujets par un modèle d'IA avec
     une offre gratuite (vérifie laquelle est disponible aujourd'hui,
     par exemple l'API Gemini) ;
  3. ajoute mes contenus de la semaine (flux RSS du site) et mes
     vidéos longues (flux YouTube des vidéos longues uniquement :
     ID de chaîne avec "UC" remplacé par "UULF") ;
  4. programme l'envoi dans Kit via l'API (broadcast avec send_at) ;
  5. crée un ticket GitHub avec l'aperçu et un lien "Annuler l'envoi"
     (je reçois le ticket par e-mail).
- Si je ne fais rien, la newsletter part. Si j'annule, elle repasse
  en brouillon dans Kit.

Règles de contenu :
- Format "brèves" : titre + une phrase + lien vers la source.
- N'utiliser que les informations des articles fournis, ne jamais
  inventer de chiffre ni de citation, tout reformuler, citations de
  moins de 15 mots. Objet d'e-mail accrocheur mais jamais trompeur.
- Moins de sujets plutôt que des sujets faibles.

Sécurité du lien d'annulation :
- Jeton HMAC-SHA256 (id du broadcast + expiration à l'heure d'envoi).
- Page d'annulation en noindex avec un BOUTON : aucune action sur un
  simple GET (Gmail et les antivirus ouvrent les liens tout seuls).
- Fonction serverless Netlify qui vérifie le jeton et déprogramme.
- Dépôt GitHub PRIVÉ (le ticket contient le lien d'annulation).

Design de l'e-mail :
- HTML e-mail en tableaux, 600 px, TOUS les styles en ligne (Gmail
  ignore ou perd les blocs <style>), bgcolor sur les <td>.
- N'envoie pas un document HTML complet à Kit, uniquement le contenu.
- Images en JPG/PNG, à une URL ABSOLUE et stable en production
  (dossier public/), jamais relative ni sur un aperçu.
- En-tête avec la marque et le numéro d'édition, sections claires,
  signature avec photo et réseaux, invitation à répondre.

Tests : mode test (envoi uniquement à un tag Kit "test" qui contient
mon adresse) par défaut. Passage en production uniquement quand je
le demande, via une variable de dépôt.

=====================================================================
PHASE 6 — SEO, PERFORMANCE, QUALITÉ
=====================================================================
- Titres et descriptions uniques, Open Graph, images OG générées,
  sitemap, robots.txt, flux RSS, JSON-LD, URL canoniques en HTTPS.
- Lighthouse ≥ 95 sur mobile, zéro JS inutile, images optimisées.
- Tests Playwright des pages clés et des formulaires (requêtes
  externes mockées).

=====================================================================
PHASE 7 — DE L'APERÇU À LA PRODUCTION
=====================================================================
- Netlify : branche de production = master (ou main), branch deploy
  pour la branche de refonte, deploy previews activées.
  Rappel : les deploy previews ne se déclenchent que pour les PR vers
  la branche de production ou une branche de déploiement déclarée.
- Si le dépôt a été transféré ou renommé, mets à jour le remote git
  et vérifie le dépôt lié dans Netlify.
- Fais un audit de mise en ligne : TODO visibles, liens cassés,
  redirections des anciennes URL (301), pages légales, formulaires,
  HTTPS. STOP : je relis l'aperçu sur mon téléphone et je dis "go".
- Après le "go" : fusion vers la production, vérification du
  déploiement, des pages clés et des workflows dans l'onglet Actions.
- Rappel quota : sur l'offre gratuite Netlify, vérifie le coût actuel
  d'un déploiement en crédits. Regroupe les fusions, et préfère une
  reconstruction automatique HEBDOMADAIRE (build hook déclenché par
  GitHub Actions) plutôt que quotidienne.
- Si un aperçu échoue avec "git ref pull/N/head does not exist" :
  la branche a été supprimée trop tôt, attends la fin de l'aperçu
  avant de fusionner.

=====================================================================
PHASE 8 — PREMIER ESSAI ET ROUTINE
=====================================================================
- Lance la newsletter en mode test, vérifie avec moi : ticket reçu,
  envoi programmé dans Kit, bouton Annuler, e-mail reçu en boîte de
  réception avec le design, authentification (De = mon adresse pro,
  DKIM = mon domaine, DMARC = PASS).
- Écris dans le README ma routine hebdomadaire : ce qui est
  automatique, ce que je fais (relire l'aperçu en 5 minutes, publier
  un contenu avec npm run new, regrouper les déploiements).

Commence par la PHASE 0 : pose-moi les premières questions.

Les comptes à créer

Tous gratuits, à créer au fil des phases (Claude Code te dit quand) :

• GitHub — dépôt privé, CLI gh connectée (gh auth status)
• Netlify — site relié au dépôt, domaine géré en Netlify DNS
• ImprovMX — adresse pro sur ton domaine
• Kit — newsletter, domaine d’envoi vérifié, formulaire double opt-in, clé API v4, tag test
• Web3Forms — une clé par adresse de réception
• Umami Cloud — Website ID
• Google AI Studio (ou une autre IA gratuite) — clé API pour la newsletter
• Nom de domaine — le seul coût, à renouveler chaque année

Les secrets et variables

Pour générer un secret aléatoire (par exemple NEWSLETTER_CANCEL_SECRET) :

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Les pièges que j’ai rencontrés

L’expéditeur ne doit jamais être une adresse Gmail

Si l’adresse d’envoi dans Kit est une Gmail alors que le domaine d’envoi est le tien, l’authentification DMARC échoue et l’e-mail part en spam, voire n’arrive pas du tout. Supprime les adresses gratuites des expéditeurs dans Kit, et vérifie que le « De » est bien ton adresse pro.

Un domaine n’a droit qu’à un seul enregistrement TXT SPF

Si tu ajoutes le SPF de Kit en plus de celui d’un autre service (ImprovMX, par exemple), deux enregistrements TXT v=spf1 séparés cassent l’authentification. Il faut les fusionner en un seul.

Les styles doivent être en ligne dans l’e-mail, jamais dans un <style>

Gmail retire ou ignore les balises <style>. Sans styles en ligne (l’attribut style="..." sur chaque élément, bgcolor sur les <td>), l’e-mail arrive en texte brut, sans couleurs ni mise en page, même si l’aperçu dans Kit semble parfait.

Chaque image doit être à une URL absolue et stable

Une image en chemin relatif, ou hébergée sur un aperçu Netlify qui finit par disparaître, ne s’affichera pas dans la boîte de réception : Gmail montre alors le texte alternatif à la place. Mets tes images dans public/ et utilise l’adresse complète du site en production.

Le lien « Annuler l’envoi » ne doit jamais agir sur un simple GET

Gmail et certains antivirus ouvrent automatiquement les liens des e-mails pour les scanner. Si l’annulation se déclenche au chargement de la page, elle part toute seule avant même que tu aies cliqué. Il faut un vrai clic sur un bouton, avec une requête POST.

Le dépôt doit être privé

Le ticket d’aperçu contient le lien d’annulation, avec son jeton signé. Sur un dépôt public, n’importe qui pourrait le lire et annuler ta newsletter à ta place.

Les aperçus Netlify ne se déclenchent pas pour n’importe quelle branche

Un Deploy Preview n’apparaît que pour une pull request vers la branche de production ou vers une branche déclarée comme « branch deploy » dans Netlify. Une PR vers une autre branche n’aura jamais d’aperçu.

Chaque déploiement de production coûte des crédits Netlify

Sur l’offre gratuite, un déploiement de production consomme des crédits limités par mois : vérifie le nombre actuel dans ta console Netlify. Regroupe tes fusions plutôt que de déployer à chaque petit changement, et préfère une reconstruction automatique hebdomadaire à une reconstruction quotidienne.

Vérifie que le service d’IA gratuit choisi est toujours disponible

Les offres gratuites de modèles d’IA changent vite : GitHub Models, par exemple, a fermé son accès gratuit. Vérifie la documentation officielle du service avant de t’y fier, et prévois un modèle de repli si le premier n’est plus accessible.

Ta routine chaque semaine

Ce qui tourne tout seul : chaque semaine, le site se reconstruit pour rafraîchir tes dernières vidéos, puis la newsletter est collectée, rédigée et programmée dans Kit.

Ce qu’il te reste à faire :

• relire le ticket d’aperçu de la newsletter (5 minutes) et cliquer sur « Annuler » si quelque chose ne te convient pas ;
• publier un nouveau contenu avec npm run new quand tu sors une vidéo ;
• regrouper tes changements plutôt que de fusionner un par un vers la production, pour économiser tes crédits Netlify.

Une question ? Écris-moi en DM, je réponds.