Le générateur de sites statiques
Conçu pour créer des sites avec l'IA
É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-siteCopiez la commande · il vous faut Node.js 22.12 ou plus récent
Licence MIT · v0.16.2 · Open source sur GitHub · Rapport Lighthouse
CommencerL'utiliser avec Claude CodeDemandez à votre assistant IA de créer votre site
- 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
- $ npm create vagejs@latest my-site
- Created ~/projects/my-site
- Install and start the site now? (Y/n) y
- added 80 packages in 9s
- Build your site with: 1. Claude Code 2. Codex 3. The browser editor 4. Just open the site
- Choose a number (Enter for 1): 1
- vagejs dev server running at http://localhost:5173/
- same server: http://[::1]:5173/
- editor: http://[::1]:5174/ (edit pages in your browser; only on this computer)
- Starting Claude Code in my-site.
Votre assistant IA
- Claude Code
- Cursor
- GitHub Copilot
- OpenAI Codex
- Gemini CLI
Votre hébergeur
- Cloudflare
- Netlify
- GitHub Pages
- Vercel
- N'importe quel hébergeur statique
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.
Ou confiez-le à une agence
Ces agences créent et entretiennent des sites vagejs pour leurs clients.
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.
- Votre demandeAjoute une page de tarifs
- Assistant IASuit AGENTS.md
- Fichiers de pagesrc/pages/pricing.md
- vage checkLiens, titres, accessibilité
- Vous validezLe plan d'abord
- Site en ligneFini seulement quand il répond
-
Vous demandez
Décrivez la page que vous voulez, avec vos propres mots.
-
Il écrit la page
La page est un simple fichier texte que vous pouvez lire et modifier vous-même.
-
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.
-
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.
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.
De vrais sites, construits avec vagejs.
Des exemples de sites statiques, avec le code source à copier.
Voir les exemples
-
Portfolio
Le portfolio d'une designer, avec des études de cas et une rubrique d'articles.
-
Site de documentation
La documentation d'un outil en ligne de commande, avec une barre latérale construite à partir des pages elles-mêmes.
-
Commerce local
Une boulangerie avec son menu, ses horaires d'ouverture et ses actualités, prête pour la recherche locale.
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
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
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 devReact, Vue et 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 : <Counter client:load />Des images plus légères
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
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 buildAperçus dans la recherche et sur les réseaux sociaux
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
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
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
Repère les liens cassés, les informations manquantes et les erreurs d'accessibilité, et indique le fichier concerné.
Comment l'utiliser : npx vage checkAudits de vitesse et d'accessibilité
Des limites de taille pour chaque page, des règles d'accessibilité, et Lighthouse quand vous le souhaitez.
Comment l'utiliser : npx vage auditProtégé contre l'injection de spam
Les scripts cachés et les liens vers des sites non approuvés n'arrivent jamais sur vos pages.
Comment l'utiliser : npx vage linksAucune fuite de secrets
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
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 deployFormulaires de contact
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
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
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
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.
100Score Lighthouse
En performance, accessibilité, bonnes pratiques et SEO, sur un tout nouveau site.
0.8 sContenu principal visible
Sur une connexion mobile lente simulée (Largest Contentful Paint).
0 KBJavaScript 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 sPour construire le site
Pour le site de départ de quatre pages, prêt à publier.
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é.
Commencez avec une seule commande.
Votre site tournera en une minute.
npm create vagejs@latest my-siteAvec le soutien de
- et un sponsor individuel