Akveo.com: de Webflow a un sitio web impulsado por IA

Nos pasamos a Webflow para sacar al desarrollador de la cadena: marketing → diseño → desarrollador → sitio web. Funcionó durante un tiempo, hasta que el sitio lo superó.

• Cada cambio seguía necesitando a un diseñador que conociera Webflow.
• La plataforma llegó a sus límites y el sitio se llenó de soluciones provisionales.
• Cada cambio llevaba mucho tiempo.
• Las páginas se volvieron pesadas: la página de inicio cargaba 30 archivos JavaScript, 340 KB, incluidas dos versiones distintas de jQuery.
• El mismo contenido estaba guardado muchas veces: un testimonio de cliente estaba en 99 archivos y el formulario de contacto en 258.
• Los archivos duplicados ocupaban espacio y ralentizaban cada edición.
• El contenido estaba mezclado con el código, así que un idioma nuevo significaba copiar todo el sitio.

1. Capturar el sitio en producción

Lo exportamos todo: el HTML de las más de 460 páginas, todas las colecciones del CMS con cada campo, los scripts personalizados, los estilos, las fuentes y las imágenes. El diseño de nuestro diseñador de Webflow quedó exactamente igual: sin rediseño con plantillas.

2. Mapear contenido y plantillas

Asignamos cada colección y cada página a un tipo de contenido y a una plantilla de página, con reglas estrictas para cada campo. Las URL siguieron siendo las mismas.

3. Separar el contenido del diseño

Todos los textos están en archivos Markdown y YAML, separados del diseño. Cada contenido se guarda una sola vez y se reutiliza en todas partes. Un idioma nuevo es solo texto traducido junto al original: el sitio ya funciona en inglés, alemán, francés, español y neerlandés.

4. Reconstruir con Astro

Astro genera cada página por adelantado y envía a los visitantes solo el código que esa página necesita. Sin React y sin ningún framework en el navegador. Las puntuaciones de Google PageSpeed subieron en todas las categorías.

5. Comprobaciones automáticas en cada cambio

Antes del lanzamiento, comparamos cada página con el sitio en producción: textos, enlaces, imágenes, etiquetas SEO y capturas de pantalla coincidían. Desde entonces, cada cambio pasa por una pull request. GitHub Actions comprueba el formato, el código, las reglas de contenido, los enlaces y las imágenes, genera cada página y luego abre el sitio en un navegador real para probar páginas, formularios, accesibilidad y el presupuesto de rendimiento. Si alguna comprobación falla, el cambio no puede publicarse. Railway despliega el sitio cuando pasan las comprobaciones, y una auditoría semanal detecta enlaces externos rotos.