¡Hola a todos! En este post quiero compartir con vosotros mi nueva web, que he desarrollado usando Astro.js, TailwindCSS y Contentful como CMS Headless.
Con esta combinación, he podido crear una web ultra-rápida, moderna y con un rendimiento optimizado. Aquí os dejo un desglose de cómo lo hice, los desafíos que encontré y las librerías que utilicé.
🚀Astro como framework frontend
Astro me permitió crear una web estática enfocada al contenido estático de forma eficiente. La principal ventaja de Astro es que lleva una filosofía ZeroJs, es decir, no usar más Javascript que el necesario. Por lo que la performance de la web se potencia al máximo.
🎨TailwindCSS para la maquetación
Utilicé TailwindCSS para el diseño y la maquetación. La flexibilidad que me ha ofrecido ha sido increíble de cara a la personalización del estilo. Su configuración me permitió optimizar el tiempo de desarrollo y crear una web visualmente atractiva sin complicarme demasiado con clases personalizadas.
💻Contentful como Headless CMS
Contentful fue el CMS que elegí para gestionar el contenido de la web. Como es un CMS Headless (sin cabeza), me permitió separar completamente el backend del frontend, lo que mejora la escalabilidad y flexibilidad del proyecto. Con Contentful, puedo manejar datos como textos, imágenes y metadatos de manera eficiente y dinámica.
Además, una ventaja enorme que tiene es su potente API de imágenes, que permite solicitar diferentes tamaños y formatos de una misma imagen sobre la marcha. Esto facilita enormemente optimizar recursos, especialmente para mejorar los tiempos de carga y ajustar dinámicamente las imágenes para distintos casos, como por ejemplo en las etiquetas Open Graph (OG), asegurando siempre una visualización óptima al compartir enlaces en redes sociales.
🌐 Netlify y Netlify Forms
Utilicé Netlify para alojar la web, aprovechando su excelente integración continua, que facilita el despliegue automático cada vez que hago cambios en el código. Además, implementé Netlify Forms para gestionar formularios de contacto directamente desde el frontend, lo que simplifica mucho el manejo y la recepción de datos sin necesidad de configurar un backend adicional.
📦Librerías y Herramientas Utilizadas
Lenis
Implementé Lenis para suavizar el scroll en toda la web. Esta librería mejora la experiencia del usuario al hacer que el desplazamiento sea mucho más fluido y agradable visualmente.
Swiper/Tiny Slider
Para los deslizadores de contenido, utilicé Swiper y Tiny Slider, que son herramientas ligeras y eficientes para crear slides interactivos. Estas librerías son muy fáciles de implementar y personalizar, y me permitieron mantener la web ágil y reactiva.
Cheerio
Cheerio fue muy útil para manejar contenido enriquecido, especialmente para las noticias en el blog.
Gracias a Cheerio, pude modificar y manipular fácilmente el HTML de las publicaciones, lo que me permitió personalizar y optimizar el contenido antes de presentarlo en la web, mostrando audios, imágenes con lightboxes y vídeos.
🔍Características de la Web
Diseño Minimalista y Funcional
El diseño es moderno, con una paleta de colores que usa tonos fluorescentes para resaltar las áreas clave, como los botones y enlaces. Este esquema de colores hace que la web se vea vibrante pero profesional al mismo tiempo.
Optimización de Rendimiento
La combinación de Astro.js con TailwindCSS me permitió optimizar la web al máximo. El uso de una arquitectura de carga de componentes bajo demanda (Lazy Loading) asegura que los usuarios solo carguen los recursos que realmente necesitan, lo que mejora la velocidad de carga y reduce el uso de recursos.
Mobile First
La web está totalmente optimizada para dispositivos móviles. Usé las clases responsive de Tailwind para asegurarme de que el diseño se adapta bien a cualquier tamaño de pantalla. Las animaciones y transiciones también fueron pensadas para ofrecer una experiencia de usuario fluida tanto en escritorio como en móvil.
Blog y Gestión de Contenidos
El blog de la web se alimenta directamente desde Contentful, lo que me permite gestionar las publicaciones de manera sencilla. Utilicé una API para obtener los datos de las publicaciones y luego los mostré dinámicamente en el frontend, lo que garantiza que siempre esté actualizado con los nuevos contenidos.
Resumen
Crear esta web fue una experiencia increíble, sobre todo por la flexibilidad y el rendimiento que ofrece Astro.js. La integración con Contentful y el uso de TailwindCSS permitió que el desarrollo fuera rápido y la web sea escalable y fácil de gestionar.
Si estás buscando hacer un proyecto similar, te recomiendo que explores estas tecnologías.
¡El resultado vale la pena!