Una guía para los generadores de sitios estáticos usando Hexo y WordPress

Los generadores de sitios estáticos son sistemas que compilan plantillas en páginas HTML estáticas. Si eso suena eficiente, sí, lo es. No hay procesamiento o representación de servidor, por lo que los sitios web estáticos tienden a ser muy rápidos y livianos, lo que le ahorra a usted y a sus usuarios un tiempo y un ancho de banda valiosos. Esta mayor eficiencia se refleja en menores costos y, potencialmente, mayores ingresos.

De la optimización de WordPress a la estática

Hablando de generadores de ingresos eficientes, me viene a la mente WordPress. Impulsa el 28 por ciento de Internet y es una plataforma potente con muchas características excelentes, que incluyen una gestión extensa de usuarios y contenido respaldada por una variedad de complementos, temas, API, etc.

Incluso los grandes jugadores de nuestra industria usan WordPress. Sitios web como Smashing Magazine y CSS-Tricks usan WordPress, aunque en ambos casos son instancias significativamente personalizadas. Sin embargo, trabajar con WordPress puede ser una tarea tediosa, especialmente cuando se personaliza y optimiza el rendimiento.

Comencé un pequeño blog en 2015. Mi primer instinto fue usar WordPress. Me dio un empujón, ya que ya estaba trabajando con WordPress. Creé un nuevo droplet en DigitalOcean como servidor, establecí Vesta como panel de control de alojamiento e instalé WordPress como plataforma de blog. Finalmente, diseñé y desarrollé un nuevo tema de WordPress. Lo único que faltaba era el contenido.

Sabía que quería compartir algunos consejos sobre Atom, ya que estaba usando este gran editor en ese momento. Publiqué algunos artículos al respecto y los compartí con la comunidad.

Al principio, no estaba prestando mucha atención al rendimiento porque estaba demasiado concentrado en el contenido. Después de un tiempo, noté algunos problemas de rendimiento. La puntuación en Google PageSpeed ​​Insights fue pésima, así que trabajé duro para arreglar y optimizar mi sitio web, alcanzando una puntuación casi perfecta de 99/100:

• Cambié de Nginx+Apache a Nginx+PHP-FPM.

• Usé CloudFlare para velocidad y protección.

• Usé Cloudinary para alojar imágenes.

• Modifiqué mi tema y usé Critical CSS.

La única advertencia fue por un problema de almacenamiento en caché de Google Analytics que no sabía cómo solucionar en ese momento.

Pero, ¿qué sucede si 99/100 o 100/100 aún no logra el rendimiento deseado? Ahí es donde los generadores de páginas estáticas entran en escena.

Introduzca Generadores de páginas estáticas y Hexo

Entonces, ¿qué es un generador de sitios estáticos?

Como su nombre lo indica, un generador de sitios web estáticos es un sistema que genera archivos HTML estáticos. Servir archivos HTML estáticos es mucho más rápido que crear páginas sobre la marcha. No hay procesamiento ni compilación del servidor, lo que a menudo provoca un retraso en la carga de la página.

Cuando se habla de rendimiento, hay que pensar en el almacenamiento en caché. Aunque existen múltiples técnicas para almacenar en caché WordPress, esta no suele ser una tarea sencilla, a diferencia del almacenamiento en caché de archivos estáticos. Servir archivos almacenados en caché es más eficaz que servir archivos reales desde el servidor y puede ahorrar tiempo al cargar sitios web.

En junio de este año, Vitaly Friedman de Smashing Magazine presentó JAMstack en un taller en mi ciudad. Nunca había oído hablar de él, y estaba muy intrigado. Después de que terminó el seminario, estudié un poco este nuevo concepto y me di cuenta de lo increíble que es. Me di cuenta de que mi sitio web no necesita un WordPress.

El primer paso fue decidir qué generador de páginas estáticas usar. No sabía cuántos hay. Decidí probar el marco del blog Hexo. Se puede implementar en Netlify, tiene un complemento para migrar desde WordPress y usa Node.js, con el que estoy familiarizado, a diferencia de Jekyll y Hugo, que se basan en Ruby y Go, respectivamente. Y, como descubrí más tarde, es increíblemente rápido.

Migración de WordPress a Hexo

La instalación de Hexo es tan simple como podría ser. Instale hexo-cli globalmente usando npm, ejecute el comando hexo init , instale las dependencias de npm y listo:

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

Para realizar la migración, instale el complemento hexo-migrator-wordpress. Este complemento espera archivos XML como fuente. Los archivos XML se pueden exportar a través de la herramienta de exportación de WordPress, que se puede encontrar en el panel de administración en Herramientas -> Exportar -> Wordpress . Finalmente, escriba el comando de migración hexo para finalizar la importación.

 hexo migrate wordpress <source>

Lo único que queda por hacer es comprobar el resultado. Ejecute el comando del servidor hexo para iniciar el servidor y abrir el navegador en la dirección dada.

 hexo server

Markdown y sus limitaciones

Hexo es compatible con Markdown desde el primer momento. Markdown es un lenguaje de marcado que muchos usan para formatear archivos README, comentarios y publicaciones. Pero también podría usarse para escribir su artículo. Su sintaxis es intuitiva y fácil de aprender.

Otra ventaja de Markdown es que genera HTML limpio y válido. Eso permite a los desarrolladores crear reglas CSS limpias y mantenibles para diseñar artículos y páginas de blogs.

La vida de un desarrollador nunca es fácil. A menudo nos encontramos con problemas que podrían hacer que dediquemos tiempo a cosas inesperadas. Si aprendemos algo en el camino, entonces no perdimos el tiempo, y eso es algo bueno. Me ha pasado lo mismo. Pensé que todo salió bien porque no hubo ningún error de compilación, pero luego noté que algunas cosas no funcionaban como esperaba.

Por ejemplo, las demostraciones de Codepen no se cargaron. Busqué un complemento Hexo y encontré uno. Desafortunadamente, este complemento no era oficial y generaba errores de HTML que eran inaceptables. Quería contribuir y solucionar los problemas, pero la última solicitud de extracción no se resolvió durante más de un año y medio. Decidí que sería más fácil bifurcar el repositorio, solucionar los problemas y publicar el complemento en la página de Hexo para que cualquiera pudiera usarlo. Se aceptó el complemento, actualicé el contenido y las demostraciones de Codepen funcionaron a la perfección.

Ocurrieron problemas similares con las incrustaciones de CanIUse. Ahora que sabía cómo crear un complemento Hexo, no había excusa para no hacerlo. También se publicó mi complemento hexo-caniuse, al igual que mi complemento hexo-cloudinary para imágenes receptivas cargadas desde Cloudinary CDN.

Rediseño y Optimización

El diseño del sitio web es bastante fundamental. Hexo ofrece un puñado de temas gratis en el sitio web oficial, pero quería un tema único para mi sitio Hexo. Después de leer la documentación y aprender a personalizar Hexo, comencé a desarrollar un tema original desde cero.

Para crear nuevas plantillas, decidí usar EJS para crear plantillas. Como nunca había trabajado con EJS, lo vi como una oportunidad para aprender la nueva sintaxis de la plantilla. Si no le gusta EJS, Hexo le brinda soporte Swig, Haml o pug a través de complementos.

Durante el proceso de rediseño, presté mucha atención al rendimiento. Siguiendo las mejores prácticas, podemos acelerar aún más nuestro sitio web estático. Colocar archivos JavaScript en la parte inferior del documento y usar la técnica Critical CSS crea la mejor experiencia para su audiencia.

La optimización SEO es crucial para la visibilidad del blog en motores de búsqueda como Google. Hexo tiene un asistente incorporado para insertar datos de Open Graph. Hexo usa archivos YAML para almacenar la configuración del sitio y el tema. Usé el archivo de configuración del tema para configurar el nombre del sitio, la descripción y varias identificaciones sociales.

Siempre es útil y recomendable agregar Gulp o Webpack a su proceso de compilación. Usé Gulp para minimizar y comprimir archivos CSS y JavaScript, y todo estuvo listo. Podría desplegarlo.

netlizar

Netlify es una plataforma que proporciona alojamiento para sitios web y aplicaciones con un rendimiento increíblemente rápido. Se comercializa como una plataforma unificada que automatiza el código para crear sitios web de alto rendimiento y fáciles de mantener.

Simplemente ingrese su código y déjenos encargarnos del resto.

Como era de esperar, configurar el sitio web es sencillo:

1. Configura el dominio.

2. Cambia los registros DNS.

3. Configure la compilación y la implementación.

4. Activa SSL.

Cuando todo estuvo configurado, realicé un puñado de pruebas básicas para ver los puntajes, incluida la prueba de velocidad del sitio web de Pingdom, la prueba de página web y Testmysite.io. Los resultados fueron excelentes, ya que el sitio obtuvo las puntuaciones más altas en todas las herramientas.

Llamarada de la nube

A pesar de los excelentes puntajes, quería probar CloudFlare, solo para ver cuánto aceleraría el sitio web adicionalmente. CloudFlare puede ser abrumador al principio, pero aprender a usarlo es fundamental. Después de configurar CloudFlare, volví a realizar las pruebas y los resultados fueron aún mejores.

La prueba final fue Google PageSpeed ​​Insights. La puntuación fue casi del 100% tanto para la versión móvil como para la de escritorio. El problema era el almacenamiento en caché del navegador de Google Analytics. Logré solucionar el problema usando la aplicación CloudFlare para Google Analytics.

¿Cuanto cuesta?

Usar Hexo en Netlify con CloudFlare no cuesta nada.

Hexo es una plataforma de código abierto, por lo que es gratis sin importar cómo decidas usarla. Tiene una gran comunidad y es el tercer generador de páginas estáticas de código abierto más popular según StaticGen.

Netlify tiene un plan abierto que nos brinda excelentes opciones para nuestro alojamiento. Las imágenes también se alojan en el plan abierto de Cloudinary. El plan gratuito de CloudFlare nos permite configurar una gran cantidad de reglas que pueden acelerar su sitio web, que ya es rápido. También nos permite solucionar el problema de almacenamiento en caché del navegador de Google Analytics. Tampoco pagué por el dominio, ya que usé un dominio personal gratuito proporcionado por el gobierno.

La configuración de este proyecto redujo mi presupuesto al mínimo. Si necesita funciones más avanzadas para su proyecto, un generador de páginas estáticas aún puede ahorrarle unos cuantos dólares.

Servir archivos en caché significa que se reduce el uso de CPU y ancho de banda, lo que a su vez significa que puede usar planes de alojamiento más baratos con hardware menos potente. No solo eso, su sitio web será mucho más rápido, lo que significa que sus usuarios disfrutarán navegando tanto en dispositivos móviles como de escritorio. Y, debido a que la velocidad de carga de la página puede afectar las clasificaciones de la Búsqueda de Google, su sitio web se clasificará más alto, ganando aún más visitantes.

Todo esto significa que podría gastar parte de su presupuesto en otra parte, por ejemplo, en la promoción de su sitio web o en la creación de contenido adicional, lo que le ayudará a obtener un poco más de ingresos.

El caso de los generadores de sitios estáticos

Migrar de WordPress a un generador de páginas estáticas no es una tarea sencilla, y definitivamente no es algo que todos los usuarios de WordPress deban hacer. Sin embargo, Hexo hizo esta transición relativamente fácil, gracias a sus complementos, excelente documentación y una API simple.

Antes de decidir si desea o no migrar su producto a una solución estática, debe conocer las limitaciones que vienen con los generadores de páginas estáticas, como las restricciones de contenido, la curva de aprendizaje de Markdown y el control de versiones.

También debe tener en cuenta que Hexo es un marco de blog. Es perfecto para desarrolladores y técnicos que saben cómo usar un editor de texto y una terminal. Si le gusta usar una interfaz web para administrar su contenido, hay un complemento que también proporciona esa funcionalidad. Se llama hexo-admin y es bastante popular.

Si ya está usando WordPress, debe detenerse y pensar qué características de WordPress está usando en este momento y cuáles son indispensables. ¿Tienes una estructura de contenido complicada? ¿Está utilizando la gestión de usuarios? ¿Está utilizando muchos complementos en su instancia de WordPress y son todos necesarios? ¿Está satisfecho con el rendimiento de su sitio?

Si la respuesta a la mayoría o todas estas preguntas es no, entonces está listo para potenciar su sitio web con un generador de páginas estáticas. Según el caso de uso y sus requisitos, las páginas estáticas podrían ayudar a maximizar la eficiencia y minimizar los costos. Si, por otro lado, exige flexibilidad de WordPress, probablemente ni siquiera esté considerando tal movimiento.