Arquitectura Astro con Componentes Compartidos
Un sistema de componentes para 12 sitios
Diseño e implementación de una arquitectura Astro que permite compartir componentes, estilos y lógica entre 12 sitios web, con pipelines de deployment optimizados y gestión centralizada de assets.
El problema
12 sitios web con componentes duplicados, estilos inconsistentes, y procesos de deployment manuales. Cada cambio de marca o feature requería actualizar cada sitio individualmente, multiplicando el esfuerzo y los errores.
La solución
Implementamos un monorepo con pnpm workspaces y Turborepo. Componentes compartidos en un paquete central con versionado semántico. Pipeline de CI/CD que detecta qué sitios fueron afectados por un cambio y solo despliega esos. Optimización de assets con procesamiento centralizado de imágenes.
Los resultados
Tiempo de implementación de features reducido drásticamente, consistencia visual garantizada, builds incrementales que solo despliegan lo necesario, y un solo lugar para mantener componentes core.
Resultados medibles
Tiempo de nueva feature
12x (por sitio)
1x (compartido)
92% mejora
Tiempo de build
25 min (todos)
3 min (afectados)
88% mejora
Tamaño de assets
Duplicados
Centralizado R2
60% mejora
Sitios gestionados
12
¿Quieres resultados como estos?
Agendemos una llamada de diagnóstico — 30 min, sin compromiso.
Agendar diagnósticoFases del proyecto
Análisis de componentes
1 weekAuditoría de los 12 sitios para identificar componentes duplicados, variaciones, y candidatos a compartir.
Diseño del monorepo
1 weekEstructura de workspaces, convenciones de paquetes, y estrategia de versionado.
Extracción de componentes
2 weeksMigración de componentes a paquetes compartidos con APIs tipadas y props configurables por sitio.
Pipeline de CI/CD
1 weekGitHub Actions con Turborepo para builds incrementales y deployment selectivo a Cloudflare Workers con SSR mínimo.
Optimización de assets
1 weekProcesamiento centralizado de imágenes, CDN con R2, y lazy loading optimizado.
Stack técnico
Tecnologías
Servicios cloud (CLOUDFLARE)
Herramientas
Detalles de implementación
El problema del copy-paste
Cuando tienes 12 sitios que comparten header, footer, formularios de contacto y componentes de UI, el copy-paste se convierte en deuda técnica exponencial. Un cambio en el footer significa 12 PRs, 12 reviews, y 12 oportunidades de error.
La solución: monorepo con componentes tipados
packages/
├── ui/ # Componentes base (Button, Card, Badge)
├── layout/ # Header, Footer, Navigation
├── forms/ # Contact, Newsletter, Lead capture
└── analytics/ # PostHog, GTM, tracking utilities
sites/
├── site-1/
├── site-2/
├── site-3/
└── ... (9 más)Cada componente acepta props de configuración que permiten variaciones por marca sin duplicar código.
¿Tienes un reto técnico similar?
Hablemos de tu infraestructura, arquitectura o pipeline. Sin compromiso.
Agendar diagnóstico técnico