Una web en un día: cómo lanzamos un sitio nuevo a partir de unas pocas respuestas

El reto

Un pequeño negocio necesita una web que cargue rápido, que funcione en los idiomas de sus clientes, que tenga las páginas legales que exige la normativa española y que aparezca bien en los buscadores. Nada de eso es exclusivo de un cliente, y aun así cada proyecto empezaba igual: copiar la última web, cambiarle el nombre por todas partes, quitar lo que sobraba, configurar los idiomas, escribir el despliegue a mano y confiar en que no quedara nada del proyecto anterior.

Queríamos que el primer día de un proyecto se dedicara al contenido y al diseño del cliente, no a la preparación. Por eso construimos tres cosas: un generador que crea un proyecto listo a partir de unas pocas respuestas, una librería de componentes con la que se montan todas las webs y una forma de que las empresas de nuestro CRM tengan una web que se construye sola a partir de su perfil.

Un proyecto nuevo con diez preguntas

El generador es una pequeña herramienta de línea de comandos. Pregunta el nombre del proyecto, el nombre visible, la dirección de producción, los idiomas (por ejemplo, “es, en, ru”) y cuál es el principal, si la web necesita blog y cómo preparar el repositorio.

Con esas respuestas genera un proyecto que funciona:

• El nombre de la web, la dirección y el identificador del proyecto se escriben ya en la configuración, los títulos de página, las páginas legales, el archivo de despliegue y el propio paquete, así que no queda nada que renombrar a mano.
• El proyecto incluye solo los idiomas elegidos. Una web en un idioma tiene direcciones sencillas sin prefijo; una multilingüe tiene una versión por idioma. El contenido de ejemplo escrito en idiomas que la web no tiene se elimina, para que la primera compilación no falle por un idioma que falta.
• Lo mismo pasa con las funciones, que se quedan solo las necesarias: sin blog, las páginas, utilidades y carpeta de contenido del blog se borran, no se ocultan.
• El repositorio queda listo. La herramienta inicializa git, instala las dependencias antes del primer commit para que el lockfile coincida y puede crear un repositorio privado en nuestro GitLab y subir el primer commit.

El vídeo al principio de esta página es una ejecución real: diez respuestas y, después, la web nueva compila 42 páginas en español, inglés y ruso en unos segundos.

Con qué empieza cada web nueva

La plantilla que hay detrás del generador es un sitio Astro completo, no una carpeta vacía:

• Tres idiomas desde el primer día, con selector de idioma, enlaces hreflang y sitemap.
• Páginas legales para España: aviso legal, política de privacidad y política de cookies, rellenadas con el nombre y la dirección de la web.
• Un banner de cookies compatible con Google Consent Mode, con registro opcional del consentimiento en nuestra plataforma.
• Un blog en dos modos: artículos como archivos dentro del proyecto o entradas publicadas desde la plataforma Yatoday.
• Analítica preparada para Google Tag Manager o Google Analytics: se activa añadiendo un ID a la configuración.
• Tema claro y oscuro, con el selector visible u oculto según la web.

Despliegue sin trabajo extra

Cada proyecto generado trae su pipeline de GitLab CI. Un push a la rama principal instala las dependencias, compila la web y la publica en Cloudflare Pages; si el proyecto de Pages aún no existe, el pipeline lo crea. Un hook de git sube el número de versión antes de cada push a la rama principal y la compilación lo muestra en la web, así que siempre se sabe qué versión está publicada.

Una librería de componentes para todas las webs

Cabeceras, secciones principales, rejillas de ventajas, tarjetas, galerías, carruseles, testimonios, preguntas frecuentes, pasos, pies de página, el banner de cookies y un mapa salen de nuestra propia librería, @yatoday/astro-ui: unos 60 componentes para Astro con Tailwind CSS. Las secciones a ancho completo se colocan tal cual en la página; los bloques más pequeños van dentro de un contenedor que fija el ancho.

Como todas las webs usan los mismos componentes, una corrección o una mejora de accesibilidad hecha una vez llega a todas con una actualización de versión. La librería es de código abierto con licencia MIT, se publica en npm y tiene su propia web de documentación, donde cada componente se ve en vivo junto al código que lo genera. Cada versión se compila y se publica en npm desde GitHub de forma automática, y la documentación se vuelve a desplegar desde la rama principal.

Webs que se construyen solas desde un CRM

La web más rápida es la que nadie tiene que montar a mano. Las empresas de ventanas y puertas que trabajan en Estimia, nuestro SaaS y CRM para el sector, mantienen allí un perfil de directorio: descripción, servicios, marcas que instalan, zonas en las que trabajan, fotos de trabajos terminados, reseñas, preguntas frecuentes y datos de contacto.

Para estas empresas el generador tiene un segundo modo que no pregunta nada. Con el identificador de la empresa, comprueba que está dada de alta para una web alojada, toma su nombre y su dominio del CRM y crea un proyecto a partir de la plantilla para instaladores en español, inglés y ruso. Configura las variables de compilación en GitLab y crea un disparador de reconstrucción.

La web en sí no tiene contenido propio. Al compilarse lee el perfil de la empresa en el CRM y lo convierte en páginas: una portada con la foto y la valoración de la empresa, servicios, marcas y zonas, una galería de trabajos, reseñas, preguntas frecuentes y un bloque de contacto con mapa. El logotipo y el color de marca de la empresa se aplican al diseño. El pipeline publica la web en Cloudflare Pages y le asigna el dominio propio de la empresa, incluido el registro DNS.

A partir de ahí, la web se mantiene al día sola. Cuando la empresa edita su perfil en el CRM, el CRM borra su copia en caché de ese perfil y llama al disparador; el pipeline vuelve a ejecutarse y la web se publica de nuevo con los datos nuevos. Las páginas siguen siendo HTML estático: mientras alguien navega por la web no se consulta nada al CRM. En la administración del CRM, el equipo ve el estado del proyecto de Cloudflare y del dominio de cada empresa.

Stack tecnológico

- Generador: CLI en Node.js + TypeScript (prompts, simple-git, API de GitLab)
- Webs: Astro (compilación estática), Tailwind CSS 4, Svelte 5
- Componentes: @yatoday/astro-ui (código abierto, MIT, publicado en npm)
- Webs desde el CRM: API pública de miniwebs de Estimia, tarea en cola de Laravel para reconstruir
- CI/CD: GitLab CI → Cloudflare Pages (wrangler), dominios propios mediante la API de Cloudflare

Resultado

Preparar una web nueva es ahora una lista de respuestas, no un día de copiar y renombrar. Cada proyecto empieza con tres idiomas, páginas legales, banner de cookies, blog, sitemap y un despliegue que funciona, montado con los mismos componentes probados que el resto de nuestras webs. Para las empresas de ventanas del CRM, la web es un subproducto del perfil que ya mantienen, y se actualiza sola cuando lo cambian.

Estado: el generador, la plantilla y la librería de componentes son las herramientas con las que hacemos nuestras webs; las miniwebs alimentadas por el CRM están construidas y funcionan con una empresa de demostración, y el despliegue a empresas de ventanas está empezando.