Puis-je créer un site web avec l’IA sans savoir coder ?

Oui, pour un site vitrine ou un portfolio simple. Un agent de code écrit les fichiers et exécute les commandes ; votre rôle est de décrire clairement ce que vous voulez, de vérifier le résultat dans un navigateur et de faire quelques contrôles de base avant la mise en ligne.

Quelle stack utiliser pour créer un site web avec l’IA ?

Pour un site de contenu (pages vitrines, blog, portfolio), Astro est un bon choix par défaut. Si vous avez besoin de connexions, d’un tableau de bord ou d’une base de données, Next.js convient mieux ; pour une seule page, du HTML et du CSS purs suffisent.

Faut-il utiliser un créateur de sites IA ou un agent de code ?

Les créateurs de sites IA donnent une page en ligne en quelques minutes mais vous lient à leur plateforme. Un agent de code demande plus d’étapes ; en échange, le code vous appartient, vous l’hébergez où vous voulez et vous pouvez tout modifier.

Un site web créé avec l’IA sera-t-il bien classé sur Google ?

Techniquement oui : avec de bons titres, des meta descriptions, un sitemap et des pages rapides, Google l’explore comme n’importe quel autre site. Son classement dépend de la qualité et de l’utilité du contenu, pas de savoir si l’IA a écrit le code.

Où héberger un site web créé avec l’IA ?

Vercel, Netlify et Cloudflare Pages sont des choix courants pour les sites statiques ; tous trois peuvent se connecter à un dépôt GitHub et redéployer à chaque push. Vous ajoutez votre propre domaine dans leur tableau de bord et mettez à jour l’enregistrement DNS chez votre registrar.

Créer un site web avec l’IA : guide pas à pas

Pour créer un site web avec l’IA, vous décrivez le site à un agent de code (Claude Code, Codex, Gemini CLI et consorts) dans un brief court et concret ; l’agent met en place le projet et écrit les pages, vous relisez le résultat dans le navigateur et demandez des corrections, puis vous déployez sur Vercel, Netlify ou Cloudflare Pages. Pour un site vitrine ou un portfolio, un après-midi peut suffire. Ce qui change vraiment la donne, c’est la bonne stack, un bon premier prompt et une checklist avant le lancement.

Ce guide suit tout le chemin, du dossier vide au site en ligne : quelle stack choisir et pourquoi, que mettre dans le premier prompt, comment affiner le design avec des captures d’écran, les contrôles mobile et accessibilité, les bases du SEO, un formulaire de contact, un domaine et le déploiement. À la fin, vous trouverez la liste des erreurs que l’IA a tendance à faire et quelques règles de sécurité.

Première décision : créateur de sites IA ou agent de code ?

Il y a deux voies, et toutes deux comptent comme « créer un site web avec l’IA ».

Les créateurs de sites IA (les fonctions d’IA de plateformes comme Wix, Framer ou Webflow, ou les générateurs d’applications dans le navigateur) transforment une phrase en page en ligne en quelques minutes. Ils sont rapides et l’hébergement est inclus. Le revers : le code reste pour l’essentiel sur la plateforme, vous payez chaque mois, vous ne pouvez pas faire ce que la plateforme n’autorise pas, et partir est difficile.

Les agents de code tournent sur votre machine, dans votre dossier. Ils écrivent des fichiers, exécutent npm install, lisent les erreurs et les corrigent. Cela demande plus d’étapes ; en échange, vous obtenez un dépôt de code ordinaire. Vous pouvez l’héberger sur des offres gratuites, le confier à n’importe quel développeur et ajouter la bibliothèque de votre choix.

	Créateur de sites	Agent de code
Délai avant le premier résultat	Quelques minutes	Une à deux heures
Qui possède le code	Surtout la plateforme	Vous
Hébergement	Le leur, sur une offre payante	N’importe où, souvent une offre gratuite
Besoins spécifiques	Dans les limites de la plateforme	Aussi loin que le code peut aller
Courbe d’apprentissage	Très faible	Une certaine aisance avec le terminal et git

Ce guide couvre la seconde voie : faire un site en vibe coding, où l’agent écrit le code et vous pilotez le résultat. Si vous n’avez pas encore choisi d’agent, lisez les meilleurs outils CLI de code IA.

1. Installer les bases

Il vous faut trois choses :

Node.js (la version LTS). Astro et Next.js tournent dessus.
Git et un compte GitHub. C’est votre bouton d’annulation et le moyen le plus simple de se connecter à l’hébergeur.
Un agent de code, par exemple :

npm install -g @anthropic-ai/claude-code   # Claude Code
npm install -g @openai/codex               # Codex

Créez ensuite un dossier vide, initialisez git et lancez l’agent dedans :

mkdir cafe-site && cd cafe-site
git init
claude

Démarrer git d’abord est important : quand l’agent casse quelque chose, git diff montre ce qui a changé et git checkout . l’annule.

2. Choisir une stack : Astro, Next.js ou HTML pur

L’agent peut tout écrire, mais sans direction il risque de prendre l’option la plus lourde qui lui vient à l’esprit. En gros :

HTML + CSS purs : une invitation d’une page, un teaser de produit, une page « bientôt disponible ». Pas d’étape de build, pas de dépendances, fonctionne partout.
Astro : sites vitrines, sites d’entreprise, blogs, portfolios. Les pages sont rendues en HTML pur par défaut, donc rapides et favorables au SEO, et les articles de blog vivent sous forme de fichiers Markdown. C’est mon choix par défaut pour les sites de contenu.
Next.js : le travail orienté application, comme les comptes utilisateurs, les tableaux de bord, une base de données ou des paiements. Excessif pour un simple site vitrine.

Dans le doute, commencez par Astro. Il pourra encore gérer un formulaire de contact ou une petite API plus tard.

3. Le premier prompt, avec une direction artistique

L’erreur la plus fréquente est de taper « fais-moi un site de café ». Vous obtenez le modèle que tout le monde a déjà vu : dégradé violet, titre centré, trois cartes. Mettez le contenu, la structure et la direction artistique dans le premier message :

Build a marketing site with Astro for a neighbourhood cafe called "Piggy Bank Coffee".

Pages: Home, Menu, About, Contact.
Home: a large photo area (placeholder for now), a one-line tagline,
a "See the menu" button, opening hours, address and a map link.
Menu: a list grouped by category (coffee, pastries, breakfast), prices in USD.

Design direction: warm and simple. Cream background (#f6f0e6), dark brown text (#2b1d14),
terracotta accent (#c2603a). Serif for headings, a readable sans-serif for body text
(Google Fonts). Generous whitespace, small corner radius, no shadows, no gradients.
Mobile first.

Rules:
- No Tailwind; use plain CSS and CSS custom properties.
- html lang="en".
- Every page gets a unique <title> and meta description.
- When done, start `npm run dev` and list the files you created.

Pourquoi ça marche : vous avez donné des couleurs et des polices concrètes, une liste de « interdits » (dégradés, ombres), ainsi que la structure et le contenu des pages. Moins l’agent a à deviner, plus le résultat ressemble à ce que vous aviez en tête. Vous pouvez aussi joindre la capture d’un site que vous aimez : « Reprends l’espacement et l’esprit typographique de ce site ; ne copie ni ses couleurs ni son contenu. »

4. Itérer sur le design avec des captures d’écran

Une fois que l’agent a lancé npm run dev, le site s’ouvre généralement sur http://localhost:4321 (Astro) ou http://localhost:3000 (Next.js). À partir de là, c’est une boucle :

Ouvrez la page, faites une capture de ce qui ne vous plaît pas.
Donnez l’image à l’agent (la plupart des CLI acceptent les images par glisser-déposer ou collage) et demandez-lui de corriger une seule chose.
Vérifiez le résultat ; s’il est bon, commitez.

The attached image is the home page on mobile. Three problems:
1. The tagline doesn't fit; the line breaks look bad.
2. The "See the menu" button touches the screen edge.
3. The opening-hours table overflows horizontally.
Fix only these. Don't change anything else.

« Ne change rien d’autre » est un détail qui compte : les agents aiment « améliorer » les composants voisins en corrigeant un point. Après chaque bonne étape, lancez git add -A && git commit -m "...", pour pouvoir revenir au dernier bon état si la demande suivante casse tout.

Si vous voulez que l’agent pilote lui-même un navigateur, ajoutez un serveur MCP Playwright ; il peut ouvrir la page, faire ses propres captures et corriger ce qu’il voit.

5. Contrôles mobile et accessibilité

Les sites créés par IA ont souvent bonne mine sur ordinateur et s’effondrent sur téléphone. Avant le lancement :

Activez le mode appareil dans les outils de développement de votre navigateur et vérifiez au moins 375 px (téléphone), 768 px (tablette) et 1440 px (ordinateur). Une barre de défilement horizontale signale un débordement.
Lancez Lighthouse depuis Chrome DevTools. Il note Performance, Accessibilité, Bonnes pratiques et SEO et liste des avertissements concrets.
Parcourez la page uniquement au clavier (Tab, Entrée). Pouvez-vous atteindre chaque lien et bouton, et voyez-vous où se trouve le focus ?

Donnez les avertissements tels quels à l’agent :

The Lighthouse accessibility report says: [paste the warnings].
Fix them. Also check that every image has meaningful alt text, every form field
has a label, text/background contrast meets WCAG AA and keyboard focus is visible.

6. Les bases du SEO

L’agent connaît tout cela mais le laisse souvent à moitié fait si vous ne le demandez pas. Checklist :

Un <title> unique par page (environ 60 caractères) et une meta description (environ 150 à 160 caractères).
Un seul <h1> par page, avec un ordre <h2>/<h3> cohérent en dessous.
sitemap.xml et robots.txt. Dans Astro, l’intégration @astrojs/sitemap génère le sitemap ; il faut que l’URL site soit définie dans astro.config.
Balises Open Graph (og:title, og:description, og:image) ; les aperçus de liens dans les messageries et les réseaux sociaux en viennent.
Une URL canonique et le bon attribut lang.
Pour un commerce local, écrivez l’adresse, le téléphone et les horaires en texte (pas incrustés dans une image) et ajoutez éventuellement des données structurées LocalBusiness.

Run an SEO audit: list every page's title and meta description and fix
any that are missing or too long. Add @astrojs/sitemap, create robots.txt,
put Open Graph tags in the shared layout. Summarise the changes.

7. Un formulaire de contact

Un site statique n’a pas de serveur propre, les envois de formulaire doivent donc aller quelque part. Trois options raisonnables :

Un service de formulaires : par exemple Formspree, ou Netlify Forms si vous hébergez sur Netlify. Le formulaire poste vers le service et vous recevez un e-mail. La voie la plus simple.
Une fonction serverless : une petite route d’API dans Astro ou Next.js reçoit le formulaire et l’envoie via une API d’e-mail. La clé d’API reste uniquement côté serveur, dans une variable d’environnement.
Simplement un lien mailto: : pas de formulaire, pas de problème. Souvent suffisant pour une petite entreprise.

Quelle que soit l’option, faites ajouter par l’agent une validation côté serveur des champs obligatoires, une protection anti-spam de base (un champ honeypot caché ou le captcha du service) et un état clair « message reçu ». Comme vous collectez des données personnelles, ajoutez aussi une courte mention de confidentialité.

8. Domaine et déploiement

Poussez d’abord le site sur GitHub :

git remote add origin git@github.com:you/cafe-site.git
git push -u origin main

Connectez ensuite l’un des trois hébergeurs courants. Tous reconstruisent et déploient à chaque push une fois le dépôt connecté, et peuvent fournir des URL de prévisualisation pour les branches ou les pull requests :

Vercel : créé par l’équipe de Next.js, il gère très bien Astro aussi. CLI : npx vercel pour une prévisualisation, npx vercel --prod pour la production.
Netlify : très établi pour les sites statiques, avec des formulaires intégrés. CLI : npx netlify deploy --prod.
Cloudflare Pages : héberge sur le réseau de Cloudflare ; pratique si votre domaine est déjà chez Cloudflare. CLI : npx wrangler pages deploy dist.

Les paramètres de build sont généralement détectés automatiquement : pour Astro, la commande de build est npm run build et le dossier de sortie est dist. Ajoutez votre domaine dans le tableau de bord de l’hébergeur, puis saisissez l’enregistrement DNS qu’il vous donne (généralement un enregistrement A ou CNAME) chez votre registrar. Les certificats HTTPS sont émis automatiquement.

Après le lancement, ajoutez le site à Google Search Console et soumettez l’URL de votre sitemap pour que Google le trouve plus vite.

Ce que l’IA se trompe à faire

Look de modèle. Sans direction artistique, tout reçoit le même dégradé et la même grille de cartes. Donnez des couleurs, des polices et une liste de « interdits ».
Contenu inventé. Les agents écrivent volontiers de faux témoignages, des chiffres inventés (« plus de 10 000 clients satisfaits ») et des récompenses qui n’existent pas. Lisez chaque ligne et supprimez ce qui n’est pas vrai.
Images à risque de licence. Il peut faire du hotlinking d’images au hasard sur le web. Utilisez vos propres photos ou des photos sous licence en règle.
Dépendances inutiles. Une grosse bibliothèque d’animation ou d’interface pour un simple menu. Ajoutez la règle « demander avant d’ajouter un nouveau paquet ».
Liens cassés et href vides. Cherchez les boutons laissés en href="#" et cliquez sur chaque lien avant le lancement.
Tests sur ordinateur uniquement. L’agent ne vérifie généralement que la taille de fenêtre par défaut ; demandez explicitement le mobile.
Crier victoire trop tôt. Un agent peut dire que c’est terminé alors que le build échoue. Lancez vous-même npm run build avant de déployer ; il doit se terminer sans erreur.

Sécurité

Même un site vitrine a quelques règles :

Gardez les secrets dans un fichier .env et vérifiez que .env est dans .gitignore. Chez votre hébergeur, saisissez les mêmes valeurs comme variables d’environnement dans le tableau de bord.
Ne collez jamais de clés d’API dans le chat. Dites à l’agent « la clé est dans .env sous RESEND_API_KEY », pas la valeur elle-même. L’historique du chat est lui aussi stocké quelque part.
Aucun secret dans le code client. Toute clé livrée dans le JavaScript du navigateur est une clé que tout le monde peut lire. Les clés d’e-mail et de paiement doivent rester côté serveur.
Lisez ce que l’agent exécute. N’approuvez pas automatiquement des commandes comme rm -rf, curl ... | sh, les installations globales ou git push --force.
Regardez le diff avant de commiter. git diff est le moyen le plus simple d’attraper à la fois les bugs et un secret qui s’est glissé.

Le faire avec AgentVera

Tout ce qui précède fonctionne avec un terminal et un navigateur. Quelques éléments rendent le travail plus fluide dans mon propre flux, et je les utilise dans AgentVera :

Des agents en parallèle dans des worktrees séparés. Par exemple, un agent Claude Code travaille sur le contenu et le SEO pendant qu’un agent Codex travaille sur l’interface ; chacun a son propre git worktree, donc aucun n’écrase l’autre. Tous apparaissent dans une même grille du workspace.
Environnements de prévisualisation. Le serveur de développement de chaque worktree reçoit sa propre adresse ; les environnements de prévisualisation peuvent capturer les pages en tailles mobile, tablette et ordinateur et les comparer pixel par pixel à une référence antérieure.
Navigateur de l’agent. Les agents utilisent un Chrome à profil séparé via Playwright, et vous regardez en direct ce qu’ils font dans le navigateur de l’agent.
Revue et suivi des tokens. À la fin d’un tour, la revue de code fait relire par un second modèle ce que l’agent a écrit, et la consommation de tokens de chaque agent est visible. Vous relisez toujours le diff avant de fusionner.
Vercel. Si le projet est lié à Vercel, l’onglet Vercel affiche les déploiements et les logs de build, et vous pouvez confier un build en échec à un agent.

Rien de cela n’est obligatoire ; cela aide simplement à garder le fil dès que vous travaillez avec plus d’un agent. Pour la méthode elle-même, voir les agents de code en parallèle.

Checklist rapide

Stack choisie (Astro pour un site de contenu)
Le premier prompt couvre pages, contenu, couleurs, polices et liste de « interdits »
Un commit après chaque bonne étape
Vérifié à 375, 768 et 1440 px ; avertissements Lighthouse corrigés
Chaque page a un titre, une meta description et un h1 ; sitemap et robots.txt existent
Plus aucun témoignage, chiffre ou image inventé
Le formulaire fonctionne, avec une protection anti-spam et une mention de confidentialité
.env n’est pas dans git ; secrets uniquement côté serveur
npm run build passe ; le site est en ligne avec votre domaine et HTTPS

Pour conclure

Créer un site web avec l’IA, c’est désormais moins écrire du code que bien décrire et vérifier avec soin. Choisissez la bonne stack, mettez une direction artistique dans le premier prompt, avancez par petites étapes en commitant chacune, et faites les contrôles mobile, accessibilité et SEO avant le lancement. L’agent écrit vite ; c’est toujours vous qui décidez de ce qui est juste.