Skip to main content

npx cms-create-site my-site ¿Qué te gustaría construir hoy?

Descúbrelo

Qué es Vertex

Un sitio de contenido es un archivo de configuración. Todo lo demás es problema del framework.

Vertex CMS es un framework Vue 3 construido sobre vite-ssg. Tú escribes JSON describiendo qué contiene cada página; él te devuelve un sitio estático pre-renderizado con enrutamiento, metadatos, temas e imágenes ya resueltos. No hay código de aplicación que escribir ni servidor que mantener.

  • Las páginas son datos, no código

    Una página es una lista de componentes y el contenido que esos componentes necesitan. Añadir una sección es añadir una línea. Nadie tiene que abrir un archivo .vue para cambiar un titular, y editar contenido no puede romper la compilación.

  • El diseño es un manifiesto de tokens

    Un tema es un único objeto JavaScript de tokens de diseño — paleta, tipografía, superficies, anillos de foco, elevación. El framework lo compila a propiedades personalizadas CSS, así que rediseñar un sitio entero es un archivo, no una auditoría de hojas de estilo.

  • Salida estática, SEO de verdad

    Cada ruta se pre-renderiza a su propio HTML con URLs canónicas, alternativas hreflang, JSON-LD, etiquetas Open Graph, un sitemap y un robots.txt derivado de tu configuración de borradores. Despliega la carpeta en cualquier sitio que sirva archivos.

Inicio rápido

De cero a un sitio desplegable en cuatro comandos.

Vertex se distribuye como un único paquete npm más un plugin de Vite. El generador escribe un sitio funcional que puedes compilar de inmediato; a partir de ahí, editas JSON.

  1. Genera un sitio

    Crea el directorio del sitio, un tema inicial y una página de inicio que ya compila.

    terminal
    npx cms-create-site my-site
    cd my-site
    npm install
  2. Describe una página

    Claves planas en notación de puntos con índices de array. El framework las expande al objeto anidado que tus componentes leen al renderizar.

    site/content/en/pages/home.json
    {
      "components[0]": "Header",
      "components[1]": "Hero",
      "components[2]": "Footer",
    
      "content.hero.headline": "Welcome",
      "content.hero.subhead": "Built with Vertex CMS.",
      "content.hero.cta.text": "Get in touch",
      "content.hero.cta.href": "/contact",
    
      "path": "/"
    }
  3. Previsualízala

    Servidor de desarrollo Vite con recarga en caliente. Las ediciones de contenido se recargan al instante; también los cambios de imágenes y temas.

    terminal
    npm run dev
  4. Compila el sitio estático

    Pre-renderiza cada ruta a su propio archivo HTML en dist/, genera variantes de imagen responsivas y escribe sitemap.xml, robots.txt, manifest.json y una página 404.

    terminal
    npm run build:ssg

Ese es todo el ciclo. Para el modelo de contenido completo, los tokens de tematización y los destinos de despliegue, lee la documentación →

Qué incluye

Las piezas que todo sitio de contenido necesita, ya construidas.

No son plugins que haya que ir a buscar. Están en el framework, activos por defecto y configurados desde el mismo JSON que todo lo demás.

  • Enrutamiento pre-renderizado

    Las rutas se derivan de tus archivos de página. Cada una se renderiza a su propio HTML en tiempo de compilación — sin reescritura SPA, sin servir el armazón de la portada para URLs de contenido reales.

  • Contenido multiidioma

    Directorios por idioma que se reflejan entre sí. El idioma base carga primero y cada idioma sobrescribe solo las claves que define, así que una traducción parcial es una traducción válida.

  • Imágenes responsivas

    Deja un original en site/assets/img/. La compilación genera AVIF, WebP y JPEG en seis anchos, los cachea fuera de tu repositorio y los sirve mediante un srcset dentro de <picture>.

  • Metadatos SEO

    URLs canónicas, alternativas hreflang, tarjetas Open Graph y Twitter, JSON-LD, migas de pan derivadas automáticamente, sitemap.xml, robots.txt y un manifiesto de aplicación web — todo generado, nada mantenido a mano.

  • Control de borradores

    Protege una página, un prefijo de ruta o el sitio entero con contraseña. Las páginas protegidas se publican con noindex, quedan fuera del sitemap y no renderizan cuerpo hasta desbloquearse.

  • Temas y extensiones

    Los temas son manifiestos de tokens. Las extensiones son paquetes de componentes validados. Ambos pueden vivir dentro de tu repositorio o publicarse en npm y compartirse entre sitios.

  • Componentes en tres niveles

    Los componentes locales del sitio sobrescriben los de extensión, que sobrescriben el conjunto incluido. Gana el más específico, y los nombres cualificados por origen desambiguan cuando colisionan.

  • Un 404 de verdad

    El framework pre-renderiza /404.html con la identidad visual de tu propio sitio, así que las URLs sin coincidencia obtienen una página con marca que lleva noindex en lugar de un cuerpo de respuesta vacío.

Empieza aquí

Entonces — ¿qué te gustaría construir hoy?

Vertex CMS tiene licencia MIT y está publicado en npm. Genera un sitio, lee la documentación o lee el código fuente.

terminal
npx cms-create-site my-site