El generador de sitios estáticos
Hecho para crear webs con IA
Escribe páginas como archivos de texto plano, o deja que las escriba tu asistente de programación con IA: Claude Code, Cursor, Codex, Copilot o Gemini CLI. vagejs es un generador de sitios estáticos gratuito y de código abierto que las convierte en un sitio web rápido y seguro que los buscadores y los asistentes de IA entienden.
npm create vagejs@latest my-siteCopia el comando · necesitas Node.js 22.12 o una versión más reciente
Licencia MIT · v0.16.2 · Código abierto en GitHub · Informe de Lighthouse
Primeros pasosÚsalo con Claude CodePide a tu asistente de IA que cree tu sitio
- Saca 100 en Lighthouse desde el primer momento
- Archivos de SEO y de búsqueda con IA incluidos
- React, Vue y MDX, sin JavaScript por defecto
- Sitios en varios idiomas
- $ 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.
Tu hosting
- Cloudflare
- Netlify
- GitHub Pages
- Vercel
- Cualquier hosting estático
¿No eres desarrollador?
Crea tu sitio web con un asistente de IA.
Deja que tu asistente de IA lo configure
Pega uno de nuestros prompts listos para usar en Claude Code, Cursor u otro asistente de programación con IA. Crea el sitio, añade tus páginas y las revisa, y tú apruebas cada paso.
O encárgaselo a una agencia
Estas agencias crean y mantienen sitios de vagejs para sus clientes.
Tú pides. Tu asistente de IA construye.
vagejs revisa cada página antes de publicarla.
Cuando creas un sitio, eliges tu asistente y este empieza con un primer prompt que configura el sitio contigo. Cada sitio nuevo incluye un archivo de instrucciones, AGENTS.md, que le dice a tu asistente los comandos y las reglas. Así crea las páginas como debe, corrige lo que encuentra la revisión y te pregunta antes de publicar nada.
- Tu peticiónAñade una página de precios
- Asistente de IASigue AGENTS.md
- Archivos de páginasrc/pages/pricing.md
- vage checkEnlaces, títulos, accesibilidad
- Tú apruebasPrimero ves el plan
- Sitio en líneaTermina solo cuando responde
-
Tú pides
Describe la página que quieres, con tus propias palabras.
-
Escribe la página
La página es un archivo de texto plano que puedes leer y editar tú mismo.
-
vagejs la revisa
La revisión indica el archivo y el problema exactos, y el asistente lo corrige antes de que lo veas.
-
Tú apruebas la publicación
Primero ves el plan. Se publica solo cuando dices que sí, y solo dice que ha terminado cuando tu sitio responde.
Edita en tu navegador.
Ve la página mientras escribes.
npm run dev también abre un editor local: los siguientes pasos para un sitio nuevo, todas las páginas, un formulario para sus datos, el texto con una vista previa en directo con el diseño de tu sitio, subida de imágenes y los resultados de la revisión. Edita los mismos archivos que tu asistente de IA, y nunca forma parte de tu sitio publicado.
Sitios reales, hechos con vagejs.
Ejemplos de sitios estáticos, con el código para copiar.
Ver los ejemplos
-
Portafolio
El portafolio de una diseñadora, con casos de estudio y una sección de artículos.
-
Sitio de documentación
Documentación de una herramienta de línea de comandos, con una barra lateral creada a partir de las propias páginas.
-
Negocio local
Una panadería con su carta, su horario y sus novedades, lista para las búsquedas locales.
Todo lo que necesita un sitio de contenido.
SEO, sitemaps y llms.txt, incluidos.
-
Escribir
Las páginas son archivos de texto o MDX. Las plantillas, en TypeScript, React o Vue.
Páginas a partir de archivos
Pon un archivo de texto en una carpeta y ya es una página. Etiqueta las páginas por tema, mantén ocultos los borradores o pon fecha a una entrada para publicarla más tarde.
Cómo se usa: src/pages/pricing.md → /pricing/Edita en tu navegador
Un formulario para cada página, una vista previa en directo con tu diseño y los siguientes pasos para un sitio nuevo, en tu propio ordenador. O edita los archivos directamente.
Cómo se usa: npm run devReact, Vue y MDX
Escribe las plantillas como componentes y las páginas como MDX. Se convierten en HTML plano, y solo los componentes que marques como interactivos se ejecutan en el navegador.
Cómo se usa: <Counter client:load />Imágenes más ligeras
Las fotos reciben copias redimensionadas en WebP y AVIF, y cada navegador elige el tamaño que necesita.
Cómo se usa: images: { optimize: true }
-
Que te encuentren
Los buscadores y los asistentes de IA reciben una imagen precisa de cada página.
Sitemap, robots.txt y llms.txt
Hechos a partir de las páginas que existen de verdad, además de feeds RSS y copias en Markdown de las páginas para herramientas de IA.
Cómo se usa: npm run buildVistas previas en buscadores y redes
Resúmenes de página, una imagen para compartir en cada página, migas de pan y datos estructurados que ayudan a Google y a los asistentes de IA a entender cada página.
Cómo se usa: defaultImage: "/images/og.png"Sitios en varios idiomas
Una carpeta para cada idioma, las etiquetas de idioma correctas en cada página y una revisión de las traducciones que faltan.
Cómo se usa: i18n: { locales: ["fr"] }Tú eliges los rastreadores de IA
Permite o bloquea por separado los rastreadores de entrenamiento de IA y los de búsqueda con IA.
Cómo se usa: robots: { aiTraining: "disallow" }
-
Revisar y proteger
Los problemas aparecen en tu ordenador, antes de que los vean tus visitantes.
Revisión del sitio incluida
Detecta enlaces rotos, datos que faltan y fallos de accesibilidad, y te señala el archivo.
Cómo se usa: npx vage checkAuditorías de velocidad y accesibilidad
Límites de tamaño para cada página, reglas de accesibilidad y Lighthouse cuando lo quieras.
Cómo se usa: npx vage auditProtegido contra la inyección de spam
Los scripts ocultos y los enlaces a sitios web no aprobados nunca llegan a tus páginas.
Cómo se usa: npx vage linksSin secretos filtrados
Las contraseñas, las claves de API y los archivos .env nunca se publican, y nunca se sobrescribe el trabajo de nadie.
Cómo se usa: npx vage deploy
-
Publicar y crecer
Publica con un solo comando y luego mira cómo te encuentra la gente.
Publicación con un solo comando
Cloudflare, Netlify o GitHub Pages. Primero apruebas un plan, y tu sitio sigue en línea mientras se publica.
Cómo se usa: npx vage deployFormularios de contacto
Un formulario que te envía un correo, con protección contra spam y sin JavaScript, en Cloudflare.
Cómo se usa: contact: { to, from }Analítica que respeta la privacidad
Google Analytics, Tag Manager, Plausible o Clarity. Desactivada hasta que la actives, y espera al consentimiento.
Cómo se usa: ga4: { measurementId: "G-…" }Informes de búsqueda e IndexNow
Las cifras de Search Console en la terminal, y un aviso a los buscadores cuando cambian las páginas.
Cómo se usa: npx vage report search
Rápido desde el primer momento.
100 en Lighthouse, 0 KB de JavaScript.
Probamos un sitio de vagejs recién creado con Lighthouse, la herramienta de Google. Sacó un 100 perfecto en todas las categorías, y la página cargó en menos de un segundo con una conexión de móvil simulada.
100Puntuación en Lighthouse
En rendimiento, accesibilidad, prácticas recomendadas y SEO, en un sitio recién creado.
0.8 sContenido principal visible
Con una conexión de móvil lenta simulada (Largest Contentful Paint).
0 KBJavaScript enviado
Las páginas son HTML plano. Solo se añade JavaScript donde tú lo añades, como en un componente interactivo.
0.5 sPara generar el sitio
Para el sitio inicial de cuatro páginas, listo para publicar.
Ver todas las cifras y cómo las medimos
| Métrica | Plantilla de vagejs | Bueno es |
|---|---|---|
| Aparece el contenido principal (LCP) | 0.8 s | menos de 2.5 s |
| Saltos del diseño (CLS) | 0 | menos de 0.1 |
| Tiempo que la página está bloqueada (TBT) | 0 ms | cuanto menos, mejor |
| Aparece el primer texto (FCP) | 0.6 s | cuanto menos, mejor |
| JavaScript enviado a los visitantes | 0 KB | cuanto menos, más rápido |
| Datos descargados | 1.7 KB en 2 solicitudes | cuanto menos, más rápido |
| Tiempo para generar el sitio | 0.5 s para 4 páginas | cuanto más rápido, mejor |
Cómo lo medimos: un sitio nuevo creado con npm create vagejs@latest (vagejs 0.16.1), probado con Lighthouse 13.5.0 con la configuración para móvil y una red lenta simulada el 28 de octubre de 2026. Lo ejecutamos dos veces y obtuvimos las mismas cifras las dos veces. Son resultados de laboratorio. Google también tiene en cuenta datos de visitantes reales, y tus propias cifras dependerán de tus imágenes, tu contenido y tu hosting.
Lo que la gente pregunta.
Respuestas claras.
¿Qué tipo de sitios web puedo crear con vagejs?
Sitios web de contenido, como sitios de empresa, blogs, documentación, portafolios y sitios para una tienda, una cafetería o una clínica. Nuestra sección de ejemplos tiene un portafolio, un sitio de documentación y una panadería en línea que puedes copiar. Para aplicaciones con inicio de sesión y datos en directo, encaja mejor un framework de aplicaciones.
¿Qué velocidad tiene un sitio de vagejs?
Un sitio de vagejs recién creado obtuvo 100 en todas las categorías de Lighthouse, mostró su contenido principal en 0.8 s con una conexión móvil lenta simulada y envió 0 KB de JavaScript. Son resultados de laboratorio del 28 de octubre de 2026, y tus propias cifras dependerán de tus imágenes, tu contenido y tu hosting.
¿Cómo creo un sitio web con Claude Code, Codex o Cursor?
Ejecuta npm create vagejs@latest my-site y elige tu asistente cuando te lo pregunte. Empieza con un primer prompt que configura el sitio contigo. O pide a tu asistente que cree un sitio con vagejs: cada sitio nuevo incluye un archivo AGENTS.md que le dice los comandos y las reglas.
¿Cómo evita vagejs que los asistentes de IA publiquen errores?
vage check lee cada página antes de publicarla y nombra el archivo responsable de cada enlace roto, título que falta o dato estructurado no válido, para que tu asistente lo corrija primero. Los enlaces a sitios web que no has aprobado hacen fallar la revisión, y no se publica nada hasta que dices que sí.
¿Dónde están mis páginas?
En archivos Markdown sencillos en la carpeta src/pages de tu proyecto, y el lugar de cada archivo decide su dirección: src/pages/pricing.md se convierte en /pricing/. Tu asistente de IA y el editor del navegador cambian los mismos archivos, así que todo tu contenido se queda en archivos que te pertenecen.
¿Cómo publico mi sitio?
Ejecuta npx vage deploy. Revisa el sitio, te muestra un plan y publica en GitHub Pages, Cloudflare o Netlify solo después de que digas que sí, y solo dice que ha terminado cuando tu sitio responde. Cualquier otro hosting estático, como Vercel, puede servir la carpeta dist generada.
Empieza con un solo comando.
Tendrás un sitio funcionando en un minuto.
npm create vagejs@latest my-siteCon el apoyo de
- y un patrocinador individual