Estreno nueva página web estática gracias a Astro, WordPress y Netlify

Tras un largo tiempo de inactividad por fin he estrenado nueva página web. Creo que hay pocas cosas más complicadas o ingratas, que hacer tu página web. Lo sé, porque me consta que no sólo me pasa a mí. Siendo sincero debo admitir que mi última página web, por diferentes motivos, no logró cumplir mis expectativas. Y por si fuera poco, coincidió con un paréntesis profesional y tampoco sentía la motivación para seguir creando contenido. Pero todo tiene su momento y he querido crear esta nueva página web para experimentar con nuevas tecnologías.

¿Por qué he escogido Astro para crear mi página web?

Siempre he tenido mi página web con WordPress y siendo sincero, no hay muchos motivos razonables para cambiar. Las últimas versiones de mi página web estaban construidas con temas personalizados basados en Sage Roots, un entorno moderno de desarrollo web para WordPress. No obstante, en los últimos años hemos asistido a una auténtica revolución en el mundo de los frameworks de JavaScript. Era justo intentar probar otras alternativas, quizás como excusa para aprender en proyectos reales. Aunque soy un fan declarado de Eleventy, un genial generador estático de sitios web, al final opté por Astro, un popular framework para construir sitios web orientados al contenido y muy enfocado a la optimización. Además, por supuesto, está el factor novedad y Astro es indudable que está de moda por motivos más que justificados:

  • En Astro todo está enfocado hacia la velocidad de carga y la optimización de recursos.
  • Es un framework de frontend agnóstico que te ofrece la libertad de trabajar con la tecnología que prefieras.
  • Tiene integración directa con muchas herramientas de desarrollo web que uso habitualmente (AlpineJS por ejemplo).
  • Un ecosistema eferverscente de desarrollo con mejoras continuas.

Aunque sean motivos muy sólidos, debo reconocer que para un sitio web como el mío, muchas herramientas de desarrollo cumplirían con mis necesidades (empezando como decía por WordPress o Eleventy) pero el atractivo de Astro es innegable y era un buen momento para probarlo con un proyecto propio. Al final es una decisión que considero acertada y que me ha permitido aprender muchos detalles interesantes. Aquí es donde explico el papel de WordPress.

WordPress como gestor de contenidos en modo headless

Una de las cosas a las que más me costaba renunciar era a mis entradas de blog. Aunque muchas estuvieran muy desactualizadas, creo que todavía pueden ser útiles. En un primer momento valoré exportar el contenido para dejarlo a modo de histórico, pero más tarde pensé que WordPress es un estupendo CMS y que Astro puede integrarse perfectamente para actualizar el apartado del blog. De esta forma, decidí mantener en un subdominio la anterior instalación de WordPress, con un acceso restringido y generar el contenido desde Astro gracias a la API de WordPress. Este proceso ha sido muy interesante porque me permitió probar un potente plugin llamado WPGraphQL y que ofrece la posibilidad de desacoplar con detalle todo tu contenido de WordPress.

Sin entrar en los detalles aquí sobre la implementación, comentaré que aunque las opciones son numerosas, la integración se hace algo tediosa hasta que comprendes bien la sintaxis y realizas diferentes pruebas. Al final me he centrado exclusivamente en obtener las entradas del blog y mostrarlas en una página de índice y luego las entradas propias blog, eso sí, respetando la misma dirección para evitar demasiados enlaces rotos.

Probando otras soluciones de CMS, al final WordPress tiene muchas ventajas como gestor de contenidos, posee una interfaz conocida, costes mínimos y gracias a la API puedes recuperar prácticamente todo el contenido que tienes alojado. Por otra parte obtienes una capa de seguridad importante, al desacoplar la parte pública del acceso al panel de control.

Netlify para alojar el sitio web con despliegues automáticos

El último punto a considerar es el alojamiento de los propios archivos. En este caso al tratarse de Astro son muchas las opciones disponibles. Como ya tengo algún proyecto en Netlify y dado que mis necesidades son simples, el despliegue del sitio web se hace sobre Netlify a partir de un repositorio de GitHub. La verdad es que un proceso sencillo, gracias a su CDN te garantiza máxima disponibilidad, dispones de un certificado https incluido y una capa gratuita bastante generosa en tiempo de construcción del sitio web y de ancho de banda.

Lo último a solucionar es como actualizar la generación estática del sitio web cada vez que hay una actualización de contenido.En el caso de Netlify es cuestion de activar un webhook que reciba la notificación de que existe un cambio desde WordPress. En mi caso he usado un útil plugin llamado Deploy With NetlifyPress que simplifica mucho la tarea de sincronizar el contenido (creación, actualización o borrado) con tu hook de despliegue en Netlify. También es posible usar otro plugin como WP Webhooks que permite configurar diferentes “disparadores” que hacen la solicitud a Netlify, aunque tienes que crear una url para cada versión del tipo de disparador que quieres escuchar desde tu sitio web. Todo esto es un proceso sencillo pero que seguramente merece otro post.

Conclusión

Como contaba antes es posible que mi WordPress anterior aguantara perfectamente mis requerimientos. Podría haber cambiado el tema o simplemente modificado estilos para renovar el sitio web. En cambio creo que el cambio a un nuevo sitio web ha supuesto un aprendizaje muy positivo y además me ha permitido definir mejor mi propuesta como profesional. Seguiremos en esta sección contando cosas sobre Astro y otras tecnologías modernas de desarrollo web.

Más artículos