Landing Cloudflare

Créer une LP avec Claude Code et Cloudflare Pages

Guide pour passer de « j'ai besoin d'une page » à la LP en ligne qui reçoit des leads. L'hébergement est Cloudflare Pages : gratuit, rapide, avec HTTPS automatique et fonctions serveur (Pages Functions) pour traiter le formulaire sans serveur dédié.

Cette skill est conçue pour les non-développeurs. Vous (Claude) faites le travail dans le terminal et expliquez chaque étape en termes simples. Lorsqu'une étape nécessite l'intervention humaine (connexion, tableau de bord, DNS), fournissez une commande à la fois, prête à être collée.

Le suivi des annonces (pixel, Conversions API, GA4, tags Google Ads) ne fait pas partie de cette skill. Si demandé, mettez-le en place séparément une fois la LP en ligne.

Comment travailler avec la personne

• Plan avant d'écrire. Montrez les sections de la LP avec le texte de chacune et la source du texte. Ne montez qu'après un « d'accord ».
• Texte uniquement sourcé. Prix, date, durée, nom du formateur, garantie, bonus : tout provient du matériel fourni par la personne (briefing, site, PDF, conversation). N'inventez jamais de nombre ni de promesse. Donnée manquante, demandez.
• Recommandez, ne listez pas. Lorsqu'il y a un choix (chemin, mise en page, domaine), dites lequel vous feriez et pourquoi.
• Rien en production sans autorisation. L'aperçu est possible. Publier à l'adresse officielle ou modifier le DNS, seulement après un « vous pouvez publier » de la personne.
• Windows : dans PowerShell, utilisez npx.cmd au lieu de npx et commencez chaque commande par cd vers le chemin absolu du dossier du projet.

0. Déterminer le chemin

Demandez (ou déduisez de la demande) ce dont la LP a besoin. Chaque chemin s'ajoute au précédent :

Chemin	Ce qu'il fournit	Lire
1. LP simple	Page en ligne sur <projet>.pages.dev, bouton menant vers checkout, WhatsApp ou autre site	ce fichier
2. Domaine personnalisé	lp.votremarque.com/<slug>/	references/dominio.md
3. Formulaire avec lead	Formulaire qui enregistre le lead (D1) et le transmet au CRM via webhook, plus page de remerciement	references/formulario.md

Collectez également :

• Source du texte : briefing, site, PDF, programme, ancienne LP.
• Identité : couleurs, police, logo (fichier), photos (fichiers, avec droit d'utilisation).
• Destination du bouton : checkout, WhatsApp (https://wa.me/55DDDNUMERO?text=...) ou formulaire.
• Slug : court, en minuscules, avec des tirets (cours-x, masterclass-y). Devient le chemin de l'URL.

1. Préparer la machine (une fois pour toutes)

Suivez references/cloudflare-setup.md : Node installé, compte Cloudflare, wrangler login (la personne le fait dans le navigateur) et création du projet Pages. Vérifiez avec npx wrangler whoami avant de continuer.

2. Monter le projet

Un dossier de projet contient toutes les LP de la marque, une sous-dossier par LP. Un déploiement publie tout en une fois.

mes-lps/
  _redirects        (blocages et LP mises hors service)
  _headers          (en-têtes de sécurité)
  wrangler.toml     (nom du projet et base de données)
  schema.sql        (table des leads, chemin 3)
  CLAUDE.md         (mémoire du projet : décisions, ce qui est en ligne)
  functions/
    lead.js         (reçoit le formulaire, chemin 3)
  merci/
    index.html      (page post-formulaire, chemin 3)
  <slug>/
    index.html      (la LP)
    img/            (photos et logos optimisés)

Commencez par copier le dossier modele/projet/ de cette skill à l'endroit où la personne souhaite le projet et renommez ma-lp/ en le slug. Le modèle vient déjà avec formulaire, verrou d'aperçu et blocages. Si le projet existe déjà, créez simplement la nouvelle sous-dossier en copiant modele/projet/ma-lp/. LP sans formulaire (chemin 1) : remplacez le bloc du formulaire par des boutons avec le lien de destination et supprimez functions/, merci/ et schema.sql.

Règle d'or : le déploiement publie tout le dossier. Tout fichier qui s'y trouve devient accessible sur internet (.claude/, CLAUDE.md, feuilles de calcul, notes). Pour cette raison :

• ne placez jamais de mot de passe, token ou URL de webhook dans un fichier du dossier (le secret va dans wrangler pages secret put, voir references/formulario.md) ;
• le _redirects du modèle bloque déjà CLAUDE.md, .claude/*, wrangler.toml, schema.sql et package*.json. Nouveau fichier à la racine : soit il peut être public, soit il reçoit une ligne de blocage avant le déploiement.

3. Écrire la LP

1. Plan des sections avec le texte de chacune. Ordre qui convertit généralement :
   1. Haut : promesse claire, à qui s'adresse-t-elle, date et format, bouton.
   2. Preuve : qui enseigne ou qui a déjà utilisé (photo réelle, crédential, chiffre vérifiable).
   3. Ce que la personne obtient : 3 à 6 avantages concrets.
   4. À qui s'adresse (et à qui ne s'adresse pas).
   5. Contenu ou programme : résumé visible, détail dans <details> qui s'ouvre au clic.
   6. Offre : prix, condition, ce qui est inclus, garantie (seulement si elle existe).
   7. Questions fréquentes (dans <details>).
   8. Bouton final et pied de page (marque, contact, politique de confidentialité si collecte de données).
2. Mobile d'abord. La majeure partie du trafic vient du mobile. Écrivez le CSS en pensant à 375 px et élargissez pour les écrans plus grands. Texte scannable : phrases courtes, titre par bloc, pas de mur de texte.
3. Bouton toujours visible en haut et répété après chaque bloc de décision.
4. Images légères : JPG ou WebP, jusqu'à ~200 Ko chacune, width et height dans <img>, loading="lazy" pour tout ce qui n'est pas le haut. Photo du haut avec fetchpriority="high".
5. Métadonnées : <title>, description, og:image (1200×630) et favicon. C'est ce qui apparaît lorsque quelqu'un partage le lien sur WhatsApp.
6. Pas de dépendance lourde. HTML, CSS et JS purs suffisent pour une LP. Police Google avec display=swap au maximum.

Les couleurs et polices du modèle sont dans des variables en haut du <style> (:root). Remplacez-les pour appliquer l'identité de la marque en une fois.

4. Aperçu local

npx wrangler pages dev .

S'ouvre sur http://localhost:8788/<slug>/ avec les Functions actives. Vérifiez dans le navigateur à 375 px et 1280 px : textes, images, boutons, formulaire et console sans erreur. Si l'application a un navigateur intégré, utilisez-le et envoyez une capture d'écran à la personne.

5. Aperçu en ligne (pour approbation)

npx wrangler pages deploy . --project-name=<projet> --branch=previa --commit-dirty=true

Donne une adresse previa.<projet>.pages.dev, séparée de la production. Envoyez le lien à la personne pour approbation depuis son mobile. Le modèle verrouille le formulaire sur cette adresse (ne génère pas de faux lead dans le CRM).

6. Publier

Seulement après un « vous pouvez publier » :

npx wrangler pages deploy . --project-name=<projet> --branch=main --commit-dirty=true

Ensuite vérifiez :

• la LP répond 200 à l'adresse officielle (curl -sI https://<adresse>/<slug>/) ;
• les fichiers bloqués répondent 301 (/CLAUDE.md, /wrangler.toml) ;
• s'il y a un formulaire, un lead de test arrive à destination (chemin 3).

La liste de vérification complète se trouve dans references/checklist.md.

7. Enregistrer

Mettez à jour le CLAUDE.md du projet avec : nouvelle LP (slug, produit, date), destination du bouton, secrets enregistrés (uniquement le NOM, jamais la valeur) et l'ID du déploiement. C'est ce que la prochaine conversation lira pour ne rien casser. Si le projet utilise git, faites le commit uniquement avec les fichiers de la LP.

Modifications ultérieures

• Texte ou prix : modifiez, prévisualisez, publiez. Remplacez la même information partout (haut, offre, FAQ, merci, métadonnées).
• Deux LP pour le même produit (ex : une par source de trafic) : gardez le contenu identique et modifiez les deux dans le même déploiement. Notez dans CLAUDE.md ce qui peut différer entre elles.
• Mettre hors service une LP : ne supprimez pas le dossier précipitamment. Ajoutez dans _redirects une ligne 301 vers le remplacement (/slug-ancien /slug-nouveau/ 301 et /slug-ancien/* /slug-nouveau/ 301). Les anciennes annonces, liens en bio et e-mails continuent de fonctionner.
• Nouveau secret ou secret modifié : ne prend effet qu'après un nouveau déploiement.

Pièges connus

• Fichier oublié dans le dossier devient public. Il est déjà arrivé qu'un fichier de configuration avec une clé d'accès reste ouvert sur internet. Le .assetsignore n'est pas respecté par wrangler pages deploy : utilisez le blocage dans _redirects.
• Secret enregistré et rien n'a changé : il manque le déploiement après secret put.
• Secret avec seulement une partie de la valeur : webhook enregistré sans https:// ou seulement avec la clé donne Invalid URL. Enregistrez l'URL complète.
• Nom avec accent arrivant comme %C3%A9 : décodez les paramètres sur la page de remerciement (decodeURIComponent). Le modèle le fait déjà.
• Formulaire qui « ne fait rien » dans l'aperçu en ligne : c'est le verrou d'aperçu qui agit. Testez en localhost ou en production.