Mi cambio de stack: De Contentful y React a Strapi (Self-Hosted) y Astro

La idea detrás de este artículo es mostrarte cómo implementé un nuevo stack tecnológico para eliminar las suscripciones SaaS como Contentful. Me puse a pensar: '¿Por qué estoy pagando esta suscripción si ya tengo un VPS propio en Hetzner administrado con Coolify?'

En esta sección, desglosaré los pasos que seguí para completar esta migración. Primero, creé un nuevo diseño utilizando la IA de Google Stitch, ya que no cuento con habilidades profesionales de diseño. Tras iterar con varios prompts, logré un excelente resultado; luego, utilicé Claude para afinar el prototipo y exportar el código HTML, CSS y JavaScript. A partir de ahí, me apoyé nuevamente en Claude para separar el código en componentes independientes de Astro utilizando Tailwind CSS v4.

Para hacerlo dinámico, implementé una metodología basada en plantillas JSON para renderizar los componentes a través de propiedades (props) de JSON, de forma muy similar a cómo operan los temas de las tiendas en Shopify 2.0.

{
  "sections": {
    "component_1": {
      "type": "hero",
      "settings": {
        "title": "t:hero.heading.title",
        "logo": "/assets/logos/big.webp"
      }
    }
  },
  "order": ["component_1"]
}

Dentro del archivo de Astro, obtengo los datos del JSON y los proceso a través de un bucle que renderiza dinámicamente cada componente según su propiedad type, mapeándolo directamente con su archivo correspondiente dentro de src/components.

Justo ahora, estoy desarrollando un constructor (builder) para leer estos archivos JSON y simular la funcionalidad del personalizador de temas de Shopify, pero adaptado para gestionar plantillas en arquitecturas headless.

En mi próximo artículo, compartiré más novedades sobre el progreso de este constructor, incluyendo una demostración en video. ¡Espero que hayas disfrutado de este post y me encantaría leer tus opiniones en la sección de comentarios!