Primeros Pasos - Docs - Artefact

Primeros Pasos

Esta guía explica cómo instalar el proyecto, ejecutarlo en local y conocer los comandos que usarás día a día. Para un recorrido por cómo encajan las piezas, consulta Arquitectura.

Requisitos previos

Bun —— el gestor de paquetes y runtime de JS/TS de este proyecto. Instálalo con:
```
curl -fsSL https://bun.sh/install | bash
```
Git, para clonar el repositorio y para los commits de contenido del CMS basado en Git.

Instalación

Clona el repositorio e instala las dependencias:

git clone <repository-url>
cd <repository-directory>
bun install

bun install también dispara el script prepare (panda codegen), que genera el sistema de diseño de PandaCSS en design-system/ —— los recipes, tokens y helpers de JSX que importan los componentes de la UI. Si alguna vez ves errores de tipos apuntando a un módulo design-system faltante, vuelve a ejecutarlo directamente:

bun panda codegen

Ejecutar el servidor de desarrollo

bun run dev

Esto inicia el servidor de desarrollo de Vite (http://localhost:5173 por defecto) con HMR. Ejecuta el servidor HonoX en vivo —— rutas, islands y estilos se reconstruyen al guardar.

Para editar contenido a través de la interfaz del CMS en lugar de editar a mano los archivos bajo content/, abre /admin/ mientras el servidor de desarrollo está corriendo.

Compilación y previsualización

bun run build

Esto ejecuta dos pasadas de Vite sobre la misma configuración —— una para el bundle de hidratación del cliente, otra para las páginas renderizadas en el servidor —— y luego @hono/vite-ssg recorre cada ruta y las pre-renderiza como HTML estático en dist/. Consulta Arquitectura para el detalle completo.

Para servir ese output estático en local a través del runtime local de Cloudflare (más cercano a producción que bun run dev):

bun run preview

Pruebas y Lint

Ejecuta las pruebas unitarias:

bun test unit

Lintea y corrige automáticamente con Biome:

bun run check

Despliegue

bun run deploy

Compila el sitio y despliega dist/ en Cloudflare Pages mediante wrangler. También hay un target de Vercel (vercel.json) configurado de fábrica si prefieres desplegar ahí —— en cualquier caso, el resultado es un sitio completamente estático que no requiere ningún proceso de servidor en tiempo de petición.

Próximos pasos

Arquitectura —— cómo encajan el enrutamiento, los estilos, el contenido y el pipeline de compilación.
Hidratación —— el modelo de tres niveles para decidir si un componente envía JS al cliente.
Constructor de Páginas CMS —— construcción visual de páginas a través de Sveltia CMS.