Migración del Blog de WordPress a Hugo
Markdown + CSS + Hugo
Este blog ha sido de gran referencia para los candidatos que se preparan para la Certificación CFA. A lo largo de los años, he compartido mis experiencias y conocimientos sobre este tema, pero también he pasado por varias etapas en cuanto a la plataforma y las tecnologías utilizadas para mantener el blog. En este post, quiero compartir cómo migré mi blog desde WordPress a un sitio estático generado con Hugo, y los beneficios que esto ha traído.
Evolución
- Inicié este blog en 2007 cuando comencé mi preparación para el programa CFA.
- La primera plataforma que utilicé fue BlogSpot, que me ofrecía un espacio gratis para hostear mi blog, con una interfaz fácil de usar. Esto funcionó por algún tiempo.
- Sin embargo, en algún momento decidí tener mi propio dominio GustavoEspinosa.Com y quería tener más control sobre la organización del sitio y las funcionalidades.
- Wordpress resultó ser la herramienta más conveniente en ese momento y ya la había utilizado con mi primer empresa WebIndex (circa 2004) en proyectos editoriales y de E-Commerce.
- Algunas ventajas iniciales de Wordpress: muchos templates disponibles para cambiar el aspecto visual del sitio, cientos de plug-ins para agregar funcionalidad, y la opción de self-hosting en mi propio servidor.
- Utilicé una herramienta para exportar los posts de BlogSpot para poderlos importar en WordPress. También establecí una redirección al nuevo dominio.
- Durante varios años utilicé WordPress para publicar mi Blog. Sin embargo, el éxito de WordPress a la larga se convirtió en un lastre para mi sitio.
- Los templates son difíciles (o casi imposibles) de modificar manualmente.
- Muchos templates gratuitos tienen funcionalidades limitadas, y las versiones premium están saturadas de opciones y configuraciones.
- Los templates y plug-ins se desactualizan constantemente, lo que representa un riesgo de seguridad.
- WordPress requiere un servidor con base de datos, PHP y memoria suficiente para correr los plug-ins, lo que hace que el sitio pierda tiempo de respuesta, incluso con caches habilitados. Los templates muchas veces cargan CSS o JavaScript innecesarios, lo cuál hace más lenta la descarga del sitio.
Seguridad
La popularidad de Wordpress como plataforma de administración de contenidos también ha tenido un lado negativo: Ataques automáticos a gran escala que buscan explotar vulnerabilidades en instalaciones de WP que no se encuentran actualizadas con los últimos parches. Por ejemplo, mi sistema WP enviaba diariamente mensajes como el siguiente:
Aunque existe forma de automatizar un 80% de las actualizaciones de WP, al final hay plugins que requieren un tratamiento manual para tener el sistema seguro.
Back-to-Basics
- Programé mi primer sitio web en 1995 mientras era estudiante en el Tec de Monterrey.
- Aunque existían algunos editores HTML rudimentarios, utilicé un editor de texto simple en Unix vim para programar las etiquetas HTML. Generé algunas imágenes y las inserté directamente.
- Todos los archivos se subían a una carpeta en un servidor web Apache.
- Este esquema es el más eficiente y rápido para servir páginas estáticas que cambian poco o que no requieren procesamiento de scripts en servidor.
- La velocidad es un factor clave para el ranking en los motores de búsqueda, por lo que utilizar una plataforma como WordPress para mi blog se volvió innecesario.
Desempeño del sitio
Utilicé la herramienta Google Lighthouse para medir el desempeño del sitio antes de realizar el cambio. Uno de los objetivos del cambio es mejorar estas métricas.
Generador de sitios estáticos Hugo
Hugo es un generador de sitios estáticos que toma archivos Markdown, organizados en una estructura de directorios, y los combina con templates escritos en Go y estilos CSS para generar archivos HTML listos para ser publicados en cualquier servidor.
Las principales ventajas de utilizar Hugo son:
Velocidad y rendimiento:
Los sitios estáticos son inherentemente más rápidos que los dinámicos, ya que no requieren procesamiento en servidor ni consultas a bases de datos. Hugo es uno de los generadores más rápidos del mercado: genera más de 1,000 páginas en <1 segundo.
Hugo puede crear sitios hasta 10 veces más rápido que otros generadores de sitios estáticos como Jekyll o Gatsby, lo que se traduce en una carga de página ultrarrápida.
Facilidad de uso:
La instalación y configuración de Hugo es simple y accesible incluso para quienes no tienen experiencia profunda en desarrollo web. Hugo se puede instalar y poner en marcha en minutos, y no requiere un servidor complejo.
Seguridad:
Dado que Hugo no depende de bases de datos ni de un backend dinámico, los sitios generados son mucho más seguros que los basados en plataformas como WordPress. No hay base de datos ni scripts de servidor que puedan ser atacados. En el caso de WordPress, el 52% de los ataques web se dirigen a vulnerabilidades de la plataforma, mientras que Hugo, al ser estático, reduce este riesgo de manera casi total.
Escalabilidad:
De acuerdo con W3Techs Hugo se utiliza en sitios de alto tráfico.
Versatilidad
Hugo es altamente flexible y puede adaptarse a cualquier tipo de diseño o estructura de contenido. Los templates y la configuración escrita en Go permiten personalizaciones profundas que otros generadores de sitios estáticos no ofrecen.
Además, con Hugo puedo integrar fácilmente otras herramientas como Git para control de versiones, Pandoc para convertir otros formatos a Markdown, y Jupyter Notebooks para generar contenido directamente desde código Python, lo cual es una ventaja significativa para proyectos que requieren integrar análisis de datos y programación.
Proceso de migración de WordPress a Hugo
La migración de un sitio WordPress a Hugo puede sonar desafiante, pero con el enfoque correcto y algunas herramientas útiles, el proceso fue bastante directo. Aquí comparto los pasos principales que seguí para migrar mi blog:
Exportar el sitio de WordPress a Markdown
Lo primero que hice fue exportar todo el contenido de mi sitio WordPress. Utilicé el plug-in WordPress to Hugo Exporter para convertir el contenido de WordPress en archivos estáticos. Esta herramienta genera un archivo comprimido (zip) con todas las imágenes y archivos Markdown correspondientes a cada post.
La conversión de los artículos a Markdown fue clave, ya que me permitió continuar usando una estructura sencilla y legible.
Ajustar los archivos Markdown
Los archivos exportados contenían una estructura básica de front matter (encabezados de configuración), pero algunos detalles debían ser corregidos. Utilicé herramientas de búsqueda y reemplazo masivo para ajustar las configuraciones de los encabezados y asegurarme de que todo estuviera alineado con la estructura de Hugo.
Por ejemplo, modifiqué etiquetas de categorías y metadatos para garantizar la correcta organización dentro de Hugo.
Mantener las URLs intactas
Uno de los aspectos más importantes durante una migración es mantener las URLs de las páginas actuales sin cambios. Esto asegura que no se pierdan visitas ni el ranking SEO en los motores de búsqueda. Hugo utiliza la estructura de directorios para generar las URLs, por lo que fue fundamental organizar los archivos Markdown de acuerdo con la estructura de URLs que tenía en WordPress.
Utilicé una regla simple: mantener los nombres de archivo y la jerarquía de carpetas de la forma más similar posible.
Personalización del theme
Decidí crear un theme de Hugo que estuviera basado en Bootstrap, un framework muy popular para desarrollar sitios web responsivos y modernos. Aunque el theme funcionaba, la apariencia no era la que buscaba. Entonces, opté por utilizar el theme Mainroad, que se ajustaba bastante bien a lo que necesitaba.
Mainroad está basado en Go Templates, lo que me permitió personalizar la estructura fácilmente, aunque tuvo algunos inconvenientes: el theme ya no se actualizaba activamente. Sin embargo, encontré un fork actualizado que incluía algunos parches importantes para mejorar la funcionalidad.
Generación del sitio con Hugo
Una vez configurados los archivos y el theme, corrí Hugo para generar el sitio estático. Este proceso es extremadamente rápido: Hugo generó todas las páginas (+150) en menos de un segundo. Los archivos HTML fueron creados y listos para ser subidos al servidor.
Subir los archivos al servidor
Finalmente, subí los archivos generados mediante SFTP a mi servidor de hosting. Como el sitio es estático, no requiere ningún tipo de backend o base de datos, lo que facilita mucho la administración y mejora la seguridad.
Todo el proceso de publicación fue más simple y directo comparado con WordPress, y el tiempo de carga de las páginas mejoró drásticamente.
El flujo de trabajo a partir de ahora
A partir de ahora, el proceso de actualización y publicación del blog será mucho más sencillo. Cada vez que quiera crear un nuevo post:
- Escribiré el contenido en Markdown directamente o lo convertiré desde otro formato.
- Generaré nuevamente el sitio utilizando Hugo, lo cual tomará solo unos segundos.
- Subiré los archivos generados al servidor mediante SFTP.
Este flujo simplificado no solo mejora el rendimiento, sino que también me permite tener un control total sobre el contenido y la estructura del sitio, mientras que sigue siendo extremadamente eficiente.
Siguientes pasos
Subir mi sitio a GitHub, poder editar localmente los posts, sincronizar los cambios utilizando git y generar el sitio automáticamente.
Conclusión
La migración de WordPress a Hugo ha sido una experiencia profundamente reveladora y gratificante. Durante este proceso, me vi obligado a investigar diversas plataformas y tecnologías disponibles, evaluando cuál se ajustaba mejor a mis necesidades. La decisión de convertir mi blog en un sitio estático no fue inmediata; fue el resultado de un proceso de prueba y error en el que exploré diferentes opciones antes de encontrar la solución ideal.
A lo largo de este viaje, aprendí mucho sobre los beneficios y limitaciones de las distintas herramientas y enfoques. Aunque hubo obstáculos y momentos de incertidumbre, cada desafío me permitió adquirir nuevos conocimientos y habilidades, especialmente en áreas como la gestión de contenido en Markdown, la personalización de templates en Go, y la integración con herramientas como Git y pandoc.
Hoy, después de completar la migración, puedo decir con certeza que el esfuerzo valió la pena. Hugo no solo ha mejorado el rendimiento y la seguridad de mi sitio, sino que también ha simplificado enormemente el proceso de publicación y mantenimiento. La posibilidad de tener control total sobre el diseño y el contenido, junto con la rapidez de carga y la escalabilidad, ha transformado por completo la forma en que gestiono el blog.
Si estás considerando migrar tu propio blog o sitio web, o si simplemente buscas una alternativa más eficiente, te animo a que explores Hugo. Aunque el camino puede implicar algo de aprendizaje y prueba, los beneficios a largo plazo lo hacen una opción valiosa para quienes desean un sitio rápido, seguro y flexible.
Serie de Posts en LinkedIn
Publiqué una serie de posts relatando este proceso:
