# Le générateur de sites statiques Conçu pour créer des sites avec l'IA > vagejs, générateur de sites statiques gratuit pour créer des sites avec l'IA. Écrivez vos pages en texte : un site rapide, vérifié, que Google et l'IA trouvent. [Nouveau : lancez votre site avec votre assistant IA](https://vagejs.com/changelog/) Écrivez vos pages en simples fichiers texte, ou laissez votre assistant de code IA les écrire : Claude Code, Cursor, Codex, Copilot ou Gemini CLI. vagejs est un générateur de sites statiques gratuit et open source qui en fait un site rapide et sûr, que les moteurs de recherche et les assistants IA comprennent. `npm create vagejs@latest my-site` Copiez la commande · il vous faut Node.js 22.12 ou plus récent Licence MIT · v0.16.2 · [Open source sur GitHub](https://github.com/agevenkat/vagejs) · [Rapport Lighthouse](https://vagejs.com/reports/lighthouse-starter/) [Commencer](https://vagejs.com/fr/docs/getting-started/)[L'utiliser avec Claude Code](https://vagejs.com/agents/claude-code/)[Demandez à votre assistant IA de créer votre site](https://vagejs.com/prompts/builder/) - Un score de 100 sur Lighthouse dès le départ - Fichiers pour le SEO et la recherche IA intégrés - React, Vue et MDX, sans JavaScript par défaut - Des sites en plusieurs langues ~/projects 1. $ npm create vagejs@latest my-site 2. Created ~/projects/my-site 3. Install and start the site now? (Y/n) y 4. added 80 packages in 9s 5. Build your site with: 1. Claude Code 2. Codex 3. The browser editor 4. Just open the site 6. Choose a number (Enter for 1): 1 7. vagejs dev server running at http://localhost:5173/ 8. same server: http://\[::1\]:5173/ 9. editor: http://\[::1\]:5174/ (edit pages in your browser; only on this computer) 10. Starting Claude Code in my-site. Votre assistant IA - Claude Code - Cursor - GitHub Copilot - OpenAI Codex - Gemini CLI [Un guide pour chaque assistant](https://vagejs.com/fr/agents/) Votre hébergeur - Cloudflare - Netlify - GitHub Pages - Vercel - N'importe quel hébergeur statique [Toutes les options de déploiement](https://vagejs.com/docs/deployment/) ## Vous n'êtes pas développeur ? Créez votre site avec un assistant IA. ### Laissez votre assistant IA le configurer Collez l'un de nos prompts prêts à l'emploi dans Claude Code, Cursor ou un autre assistant de code IA. Il crée le site, ajoute vos pages et les vérifie, et vous approuvez chaque étape. [Créez votre prompt](https://vagejs.com/prompts/builder/) [Outils web gratuits](https://vagejs.com/tools/) ### Ou confiez-le à une agence Ces agences créent et entretiennent des sites vagejs pour leurs clients. - [![GetGTM](https://vagejs.com/partners/getgtm.svg)](https://getgtmos.com) - [Ajoutez votre agence](https://vagejs.com/partners/) [À propos du programme partenaires](https://vagejs.com/partners/) ## Vous demandez. Votre assistant IA construit. vagejs vérifie chaque page avant sa mise en ligne. Quand vous créez un site, choisissez votre assistant : il démarre avec un premier prompt qui configure le site avec vous. Chaque nouveau site inclut un fichier d'instructions, AGENTS.md, qui indique à votre assistant les commandes et les règles. Il construit donc les pages correctement, corrige ce que la vérification trouve et vous demande votre accord avant toute publication. 1. **Votre demande**Ajoute une page de tarifs 2. **Assistant IA**Suit AGENTS.md 3. **Fichiers de page**src/pages/pricing.md 4. **vage check**Liens, titres, accessibilité 5. **Vous validez**Le plan d'abord 6. **Site en ligne**Fini seulement quand il répond 1. ### Vous demandez Décrivez la page que vous voulez, avec vos propres mots. 2. ### Il écrit la page La page est un simple fichier texte que vous pouvez lire et modifier vous-même. 3. ### vagejs la vérifie La vérification indique le fichier et le problème exacts, et l'assistant corrige avant que vous ne le voyiez. 4. ### Vous approuvez le déploiement Vous voyez d'abord le plan. Le site n'est mis en ligne que si vous dites oui, et l'opération n'est annoncée comme terminée que lorsque votre site répond. [Configurez-le avec votre assistant IA](https://vagejs.com/fr/agents/) ## Modifiez dans votre navigateur. Voyez la page pendant que vous tapez. npm run dev lance aussi un éditeur local : les prochaines étapes pour un nouveau site, toutes les pages, un formulaire pour leurs informations, le texte avec un aperçu en direct dans le design de votre site, l'envoi d'images et les résultats de la vérification. Il modifie les mêmes fichiers que votre assistant IA, et il ne fait jamais partie de votre site en ligne. ![L'éditeur vagejs : le titre, la description, la date et l'auteur d'un article de blog dans un formulaire à gauche, et un aperçu en direct de la page dans le design du site à droite.](https://vagejs.com/images/editor-1440.webp) [Comment fonctionne l'éditeur](https://vagejs.com/docs/content-authoring/#edit-in-your-browser) ## De vrais sites, construits avec vagejs. Des exemples de sites statiques, avec le code source à copier. [Voir les exemples](https://vagejs.com/showcase/) - [![La page d'accueil de l'exemple de portfolio : un grand titre, « I design calm software for complicated services », au-dessus d'un dessin d'application mobile.](https://vagejs.com/images/showcase/portfolio.webp)](https://portfolio.vagejs.com/) ### [Portfolio](https://portfolio.vagejs.com/) Le portfolio d'une designer, avec des études de cas et une rubrique d'articles. [Voir le site](https://portfolio.vagejs.com/)[Code source](https://github.com/agevenkat/vagejs-examples/tree/main/portfolio) - [![Une page de l'exemple de documentation : une barre latérale sombre qui liste les pages de la documentation, à côté de la page Configuration.](https://vagejs.com/images/showcase/docs.webp)](https://docs-demo.vagejs.com/) ### [Site de documentation](https://docs-demo.vagejs.com/) La documentation d'un outil en ligne de commande, avec une barre latérale construite à partir des pages elles-mêmes. [Voir le site](https://docs-demo.vagejs.com/)[Code source](https://github.com/agevenkat/vagejs-examples/tree/main/docs-site) - [![La page d'accueil de l'exemple de boulangerie : le titre « Fresh bread on Example Street » à côté d'un tableau qui liste ce qui sort du four chaque jour.](https://vagejs.com/images/showcase/bakery.webp)](https://bakery.vagejs.com/) ### [Commerce local](https://bakery.vagejs.com/) Une boulangerie avec son menu, ses horaires d'ouverture et ses actualités, prête pour la recherche locale. [Voir le site](https://bakery.vagejs.com/)[Code source](https://github.com/agevenkat/vagejs-examples/tree/main/bakery) ## Tout ce dont un site de contenu a besoin. SEO, sitemaps et llms.txt, intégrés. - ### Écrire Les pages sont des fichiers texte ou MDX. Les layouts, en TypeScript, React ou Vue. - #### [Des pages à partir de fichiers](https://vagejs.com/docs/content-authoring/) Déposez un fichier texte dans un dossier, et c'est une page. Classez les pages par sujet, gardez les brouillons cachés ou datez un article pour le publier plus tard. `Comment l'utiliser : src/pages/pricing.md → /pricing/` - #### [Modifiez dans votre navigateur](https://vagejs.com/docs/content-authoring/#edit-in-your-browser) Un formulaire pour chaque page, un aperçu en direct dans votre design et les prochaines étapes pour un nouveau site, sur votre propre ordinateur. Ou modifiez directement les fichiers. `Comment l'utiliser : npm run dev` - #### [React, Vue et MDX](https://vagejs.com/fr/features/react-vue-mdx/) Écrivez les layouts sous forme de composants et les pages en MDX. Ils deviennent du HTML simple, et seuls les composants que vous marquez comme interactifs s'exécutent dans le navigateur. `Comment l'utiliser : ` - #### [Des images plus légères](https://vagejs.com/docs/content-authoring/) Les photos reçoivent des copies WebP et AVIF redimensionnées, et chaque navigateur choisit la taille dont il a besoin. `Comment l'utiliser : images: { optimize: true }` - ### Être trouvé Les moteurs de recherche et les assistants IA ont une image fidèle de chaque page. - #### [Sitemap, robots.txt et llms.txt](https://vagejs.com/docs/seo/) Générés à partir des pages qui existent vraiment, avec des flux RSS et des copies Markdown des pages pour les outils d'IA. `Comment l'utiliser : npm run build` - #### [Aperçus dans la recherche et sur les réseaux sociaux](https://vagejs.com/docs/seo/) Des résumés de page, une image de partage pour chaque page, un fil d'Ariane et des données structurées qui aident Google et les assistants IA à comprendre chaque page. `Comment l'utiliser : defaultImage: "/images/og.png"` - #### [Des sites en plusieurs langues](https://vagejs.com/fr/features/multi-language-sites/) Un dossier par langue, les bonnes balises de langue sur chaque page et une vérification des traductions manquantes. `Comment l'utiliser : i18n: { locales: ["fr"] }` - #### [Vous choisissez les robots d'IA](https://vagejs.com/docs/seo/) Autorisez ou bloquez séparément les robots d'entraînement d'IA et ceux de recherche IA. `Comment l'utiliser : robots: { aiTraining: "disallow" }` - ### Vérifier et protéger Les problèmes apparaissent sur votre machine, avant que les visiteurs ne les voient. - #### [Vérification du site intégrée](https://vagejs.com/docs/checks/) Repère les liens cassés, les informations manquantes et les erreurs d'accessibilité, et indique le fichier concerné. `Comment l'utiliser : npx vage check` - #### [Audits de vitesse et d'accessibilité](https://vagejs.com/docs/checks/) Des limites de taille pour chaque page, des règles d'accessibilité, et Lighthouse quand vous le souhaitez. `Comment l'utiliser : npx vage audit` - #### [Protégé contre l'injection de spam](https://vagejs.com/docs/security/) Les scripts cachés et les liens vers des sites non approuvés n'arrivent jamais sur vos pages. `Comment l'utiliser : npx vage links` - #### [Aucune fuite de secrets](https://vagejs.com/docs/security/) Les mots de passe, les clés d'API et les fichiers .env ne sont jamais publiés, et le travail de personne n'est écrasé. `Comment l'utiliser : npx vage deploy` - ### Publier et grandir Mettez en ligne en une commande, puis voyez comment les gens vous trouvent. - #### [Publication en une commande](https://vagejs.com/docs/deployment/) Cloudflare, Netlify ou GitHub Pages. Vous approuvez d'abord un plan, et votre site reste en ligne pendant le déploiement. `Comment l'utiliser : npx vage deploy` - #### [Formulaires de contact](https://vagejs.com/docs/deployment/#contact-form) Un formulaire qui vous envoie un e-mail, avec une protection antispam et sans JavaScript, sur Cloudflare. `Comment l'utiliser : contact: { to, from }` - #### [Des statistiques respectueuses de la vie privée](https://vagejs.com/docs/configuration/) Google Analytics, Tag Manager, Plausible ou Clarity. Désactivées jusqu'à ce que vous les activiez, et elles attendent le consentement. `Comment l'utiliser : ga4: { measurementId: "G-…" }` - #### [Rapports de recherche et IndexNow](https://vagejs.com/docs/deployment/) Les chiffres de la Search Console dans le terminal, et un signal aux moteurs de recherche quand des pages changent. `Comment l'utiliser : npx vage report search` [Voir toutes les fonctionnalités](https://vagejs.com/fr/features/) [Comparer vagejs](https://vagejs.com/compare/) ## Rapide dès le départ. 100 sur Lighthouse, 0 KB de JavaScript. Nous avons testé un tout nouveau site vagejs avec l'outil Lighthouse de Google. Il a obtenu un score parfait de 100 dans chaque catégorie, et la page s'est chargée en moins d'une seconde sur une connexion mobile simulée. - **100**Score Lighthouse En performance, accessibilité, bonnes pratiques et SEO, sur un tout nouveau site. - **0.8 s**Contenu principal visible Sur une connexion mobile lente simulée (Largest Contentful Paint). - **0 KB**JavaScript envoyé Les pages sont du HTML simple. Le JavaScript n'est ajouté que là où vous l'ajoutez, par exemple dans un composant interactif. - **0.5 s**Pour construire le site Pour le site de départ de quatre pages, prêt à publier. 100Performance 100Accessibilité 100Bonnes pratiques 100SEO 3/3Navigation agentique Voir tous les chiffres et notre méthode de mesure | Mesure | Modèle vagejs | Bon si | | --- | --- | --- | | Le contenu principal apparaît (LCP) | 0.8 s | moins de 2.5 s | | Décalages de mise en page (CLS) | 0 | moins de 0.1 | | Temps pendant lequel la page est figée (TBT) | 0 ms | le plus bas est le mieux | | Le premier texte apparaît (FCP) | 0.6 s | le plus bas est le mieux | | JavaScript envoyé aux visiteurs | 0 KB | moins, c'est plus rapide | | Données téléchargées | 1.7 KB en 2 requêtes | moins, c'est plus rapide | | Temps de construction du site | 0.5 s pour 4 pages | plus rapide, c'est mieux | Notre méthode : un nouveau site créé avec npm create vagejs@latest (vagejs 0.16.1), testé avec Lighthouse 13.5.0 en réglages mobiles avec un réseau lent simulé le 28 octobre 2026. Nous l'avons lancé deux fois et obtenu les mêmes chiffres les deux fois. Ce sont des résultats de laboratoire. Google tient aussi compte des données de vrais visiteurs, et vos propres chiffres dépendront de vos images, de votre contenu et de votre hébergement. ## Les questions qu'on nous pose. Des réponses directes. ### Quels types de sites puis-je créer avec vagejs ? Des sites de contenu, comme des sites d'entreprise, des blogs, de la documentation, des portfolios et des sites pour une boutique, un café ou une clinique. Nos exemples comptent un portfolio, un site de documentation et une boulangerie, en ligne, que vous pouvez copier. Pour des applications avec connexion et données en direct, un framework d'application convient mieux. ### Quelle est la vitesse d'un site vagejs ? Un tout nouveau site vagejs a obtenu 100 dans chaque catégorie Lighthouse, affiché son contenu principal en 0.8 s sur une connexion mobile lente simulée et envoyé 0 KB de JavaScript. Ce sont des résultats de laboratoire du 28 octobre 2026, et vos propres chiffres dépendront de vos images, de votre contenu et de votre hébergement. ### Comment créer un site avec Claude Code, Codex ou Cursor ? Lancez npm create vagejs@latest my-site et choisissez votre assistant quand on vous le demande. Il démarre avec un premier prompt qui configure le site avec vous. Ou demandez à votre assistant de créer un site avec vagejs : chaque nouveau site inclut un fichier AGENTS.md qui lui indique les commandes et les règles. ### Comment vagejs empêche-t-il les assistants IA de publier des erreurs ? vage check lit chaque page avant sa mise en ligne et nomme le fichier en cause pour chaque lien cassé, titre manquant ou donnée structurée invalide, pour que votre assistant le corrige d'abord. Les liens vers des sites que vous n'avez pas approuvés font échouer la vérification, et rien n'est publié tant que vous n'avez pas dit oui. ### Où se trouvent mes pages ? Dans de simples fichiers Markdown, dans le dossier src/pages de votre projet, et l'emplacement de chaque fichier décide de son adresse : src/pages/pricing.md devient /pricing/. Votre assistant IA et l'éditeur dans le navigateur modifient les mêmes fichiers : tout votre contenu reste donc dans des fichiers qui vous appartiennent. ### Comment publier mon site ? Lancez npx vage deploy. Il vérifie le site, vous montre un plan et publie sur GitHub Pages, Cloudflare ou Netlify seulement une fois que vous avez dit oui, et il ne confirme la mise en ligne que lorsque votre site répond. N'importe quel autre hébergeur statique, comme Vercel, peut servir le dossier dist généré. [Voir toutes les questions](https://vagejs.com/fr/faq/)[Guides pas à pas](https://vagejs.com/guides/)