Ce que tu vas construire
Étape 1 — Concevoir ton site avec Claude
L'erreur la plus fréquente : demander « Crée-moi un site ». Trop vague. Claude a besoin de cinq choses pour bien démarrer.
- Le sujet : qu'est-ce que ce site présente ?
- Le public : qui va le lire ?
- Le ton : pro, chaleureux, technique, futuriste ?
- Les sections : home, à propos, blog, contact… ?
- L'esthétique : sobre, coloré, minimaliste, glassmorphism, néo-rétro… ?
Voici un prompt-exemple qui marche bien pour démarrer :
Demande à Claude un fichier en un seul morceau. Plus facile à héberger, à modifier, à comprendre. Si plus tard tu as besoin d'éclater en plusieurs pages, tu lui demanderas.
Étape 2 — Itérer (la vraie partie créative)
Le premier rendu n'est presque jamais le bon. C'est normal. C'est même là que ton rôle de directeur artistique commence.
Quelques retours qui font évoluer le site rapidement :
Étape 3 — Choisir un nom de domaine
Le nom de domaine, c'est ton adresse publique. Il faut payer un peu (de 1 € à 10 €/an selon l'extension). Quelques registrars fiables :
- Cloudflare Registrar — prix coûtant, idéal si tu utilises déjà Cloudflare derrière (recommandé pour ce tuto)
- OVH — français, fiable, panneau un peu daté
- Gandi, Namecheap, Porkbun — bonnes alternatives
Choix de l'extension :
- .com / .net / .fr — sérieux et reconnaissables, 7–12 €/an
- .xyz / .io / .me — plus créatifs, parfois en promo à 1–3 €/an la première année
- .eu.org — gratuit mais validation manuelle (plusieurs jours)
Étape 4 — Cloudflare Tunnel (la pièce magique)
Voici l'astuce : au lieu de t'abonner à un hébergeur cloud à 10 €/mois, tu héberges ton site chez toi, et tu utilises un tunnel Cloudflare pour le rendre public. Avantages :
✓ Pourquoi c'est top
- Aucun port à ouvrir sur ta box
- Ton IP perso reste cachée
- HTTPS automatique (Let's Encrypt géré)
- Protection DDoS gratuite
- Site potentiellement plus rapide qu'un VPS pas cher
⚠ Les limites
- Ton serveur doit être allumé 24/7
- Première config un peu technique
- Limites de bande passante (large pour usage perso)
- Cloudflare voit ton trafic (mais ne stocke pas le contenu)
La config en gros : tu crées un compte Cloudflare gratuit, tu actives Zero Trust, tu crées un tunnel nommé (par ex. mon-site-zima), et Cloudflare te donne une commande Docker à lancer sur ton serveur. Cette commande contient un token unique que tu gardes secret.
Une fois le tunnel actif, tu lui dis simplement : « quand quelqu'un demande mon-domaine.fr, envoie-le vers le service local sur le port 8080 ». C'est tout.
Étape 5 — Le serveur de base : Nginx
Ton site est juste des fichiers HTML. Pour les servir, tu as besoin d'un mini-serveur web. Le plus simple, le plus rapide, le plus utilisé : Nginx, dans un conteneur Docker.
Sur ton serveur (ZimaOS, Synology, Mac, Raspberry Pi…), un seul conteneur suffit :
En clair : ce conteneur écoute sur le port 8080 du serveur, et sert tous les fichiers HTML que tu mets dans le dossier que tu lui as indiqué.
Étape 6 — Le tunnel Cloudflared
L'autre conteneur, c'est cloudflared, le client du tunnel. Il se lance avec ton token (que Cloudflare t'a donné à l'étape 4) :
Le mode --network host est important : il permet à cloudflared de joindre ton Nginx via localhost:8080 sans complications réseau.
Étape 7 — Tester et ajuster
Une fois les deux conteneurs lancés, ouvre https://ton-domaine.fr dans un onglet privé. Tu devrais voir ton site, en HTTPS, depuis n'importe où dans le monde.
Si ça ne marche pas : 99 % du temps, le coupable c'est cloudflared. Pour voir ce qui se passe, le plus simple est d'installer Portainer sur ton serveur (interface web pour Docker) et de lire les logs du conteneur cloudflared. L'erreur s'y trouve presque toujours.
Étape 8 — Activer les protections
Une fois le site en ligne, va dans le dashboard Cloudflare et active gratuitement :
- Always use HTTPS — redirige tout vers HTTPS automatiquement
- Bot Fight Mode — bloque les bots malveillants
- WAF managed rules — pare-feu applicatif (niveau de base, gratuit)
- Geo-blocking si tu veux exclure certains pays
- Rate limiting — anti-spam basique
Ces options se configurent en deux clics chacune. Tu peux y revenir au fil du temps.
Mettre à jour ton site
Pour publier une nouvelle version : tu remplaces les fichiers HTML dans le dossier que ton conteneur Nginx sert. Pas de redéploiement, pas de build. Le changement est instantané.
Pour ajouter une nouvelle page (par exemple un article de blog), tu demandes à Claude de la générer en gardant le même style que ta page d'accueil — il sait reproduire ton design.
Les pièges à connaître
✓ Ce qui marche très bien
- Sites vitrines, portfolios, blogs statiques
- Prototypes, landing pages, mini-projets
- Documentation, wikis personnels
- Sites de tutos comme Synapse
⚠ Ce qui demande plus
- E-commerce avec paiement (autres outils plus adaptés)
- Site avec base de données utilisateurs
- Apps web complexes (React, auth…)
- Trafic massif (passer en CDN dédié)
Annexe — Alternatives sans serveur perso
Tu n'as pas (ou pas encore) de serveur 24/7 chez toi ? Pas de problème. Tu peux :
- Mettre tes fichiers sur Cloudflare Pages (gratuit, illimité pour sites statiques)
- Ou sur Netlify / Vercel (gratuits aussi pour usage perso)
- Ou louer un petit VPS (Hetzner, Scaleway) à 4 €/mois
Tu gardes la même approche : Claude code, tu héberges, ton domaine pointe dessus. La seule différence, c'est où tournent les fichiers.