Primeros pasos
Un sitio funcionando en un minuto.
Para instalar vagejs necesitas Node.js 22.12 o una versión más reciente. Después, npm create vagejs@latest my-site crea un sitio nuevo, lo instala y lo abre en tu navegador. Esta página también explica cómo añadir vagejs a un proyecto existente y cómo actualizarlo.
Requisitos
- Node.js 22.12 o una versión más reciente (compruébalo con
node --version) - npm, que viene con Node.js
- Opcional: Chrome, si quieres auditorías de Lighthouse en local
vagejs funciona en macOS, Windows y Linux. Los sitios que genera son archivos normales, así que los visitantes no necesitan nada especial.
Crea un sitio nuevo
npm create vagejs@latest my-siteEsto crea una carpeta my-site con páginas de ejemplo, una plantilla, la configuración, AGENTS.md para los asistentes de IA y flujos de trabajo de GitHub. La carpeta no debe existir todavía, o debe estar vacía.
Luego pregunta Install and start the site now? (¿instalar e iniciar el sitio ahora?). Pulsa Enter e instalará todo con el gestor de paquetes con el que lo ejecutaste (npm, pnpm, yarn o bun). Después te pregunta con qué quieres crear el sitio:
Build your site with:
1. Claude Code
2. Codex
3. The browser editor (no coding tool needed)
4. Just open the siteSolo muestra los asistentes que encuentra en tu ordenador: Claude Code, Codex, Gemini CLI, VS Code (chat de Copilot) y Cursor. Tu sitio se abre en el navegador en cualquier caso.
- Claude Code, Codex o Gemini CLI se inician ahí mismo, en la terminal, con un primer prompt que le pide a tu asistente que lea el
AGENTS.mddel sitio, te pregunte por tu negocio y siga contigo los siguientes pasos. El sitio sigue funcionando mientras el asistente está abierto, y Ctrl+C interrumpe al asistente, no al sitio. Si te pregunta si confías en la carpeta, elige que sí: es el sitio que acabas de crear. - VS Code abre su chat con ese primer prompt. Cursor abre la carpeta, y el prompt se muestra en pantalla para que lo pegues en su chat.
- El editor del navegador se abre junto al sitio, con una lista de siguientes pasos para tu sitio nuevo.
O simplemente edita src/pages/index.md, guarda, y la página se recarga.
Cuando el comando lo ejecuta un asistente de IA, un script o un sistema de CI, no pregunta ni inicia nada. En su lugar muestra los siguientes pasos (cd my-site, npm install, npm start) y les dice a los asistentes que lean AGENTS.md y repasen npx vage next-steps contigo, pidiéndote los datos reales. El comando siempre termina. Añade -- --yes para instalar e iniciar sin preguntar, o -- --no-install para solo crear los archivos.
Para volver a iniciar el sitio más tarde, abre una terminal en la carpeta y ejecuta npm start:
cd my-site
npm start¿Prefieres abrirlo tú? npm run dev inicia el mismo servidor sin abrir el navegador y muestra su dirección. Si el navegador muestra HTTP 431, consulta solución de problemas.
Qué obtienes
¿Quieres ver a dónde lleva esto? La sección de ejemplos (en inglés) tiene tres sitios terminados creados a partir de esta misma plantilla, con su código fuente.
my-site/
├── src/pages/ every .md or .mdx file is a page (a blog index is included)
├── src/layouts/ the HTML around each page
├── public/ files copied as-is (favicons, images)
├── vage.config.ts site settings
├── links.lock.json the websites your pages may link to
├── AGENTS.md instructions for AI coding assistants
└── .github/ CI checks, dependency updates and an optional live-site checkPor defecto, las páginas son Markdown normal (.md). Las páginas .mdx y las plantillas de React o Vue necesitan algunos paquetes más: consulta React, Vue y MDX. Para páginas en más de un idioma, consulta sitios multilingües.
Comandos de cada día
| Comando | Qué hace |
|---|---|
npm start |
Servidor de desarrollo con recarga en directo, abierto en tu navegador |
npm run dev |
El mismo servidor sin abrir el navegador (el que usan los asistentes de IA) |
npm run check |
Encuentra enlaces rotos y problemas de SEO, accesibilidad y spam; no escribe nada |
npm run build |
Escribe el sitio terminado en dist/ |
npm run audit |
Límites de peso de página y revisiones automáticas de accesibilidad |
npm run preview |
Sirve dist/ como lo haría un hosting estático |
Todos los comandos y opciones están en la referencia de la CLI.
Añade vagejs a un proyecto existente
npm install --save-dev vagejsDespués crea src/pages/index.md (con un title en su frontmatter) y un vage.config.ts:
import { defineConfig } from "vagejs";
export default defineConfig({
site: "https://example.com",
title: "My Website",
lang: "en",
});Añade scripts a package.json para que todo el mundo ejecute los mismos comandos:
{
"scripts": { "dev": "vage dev", "build": "vage build", "check": "vage check", "audit": "vage audit", "preview": "vage preview" }
}Actualiza vagejs
npm outdated vagejs # see what's available
npm install vagejs@latest # newest version
npm run check # make sure the site still passesMientras vagejs esté en 0.x, una nueva versión menor (de 0.10 a 0.11, por ejemplo) puede cambiar su comportamiento. Lee primero el registro de cambios. Fija el paquete de reglas con guidelines: { rulePack: "<version>" } si quieres que los datos de proveedores, como los nombres de los rastreadores, cambien solo cuando tú lo decidas.
Antes de publicar
- Pon en
site, dentro devage.config.ts, tu dominio real.vage checkte avisa mientras siga siendohttps://example.com. - Ejecuta
npm run checky corrige todos los errores. Revisiones y auditorías explica cada resultado. - Elige un hosting en Publicación.
Siguiente: escribe tus primeras páginas. Para recorridos más largos, como añadir un segundo idioma o un componente interactivo, consulta las guías.