Soy desarrollador web y experto en seo, eso significa que he tenido la oportunidad de trabajar en decenas de sitios web, algunos pequeños y otros muy grandes que recibían miles de visitantes diariamente.
En muchas ocasiones he sugerido convertir esos sitios en sitios estáticos utilizando un generador de sitios estáticos para simplificar su administración.
¿Que es un sitio estático?
Un sitio estático es un conjunto de páginas web listas para su despliegue, no requieren un servidor web tradicional que procese un script (PHP, Javascript, entre otros) para generar código HTML.
En realidad este tipo de sitios estáticos si necesitan un servidor web que responda a las peticiones de un navegador, como podría ser Apache o Nginx, pero dado que solo contienen código HTML es muy simple distribuirlas
¿Por qué debería utilizar un generador de sitios estáticos?
El beneficio más grande de convertir un sitio dinámico a uno estático es la facilidad de administrarlo y desplegarlo.
Además de ser sitios muy fáciles de mantener tienen otros beneficios.
Facilidad para poner el sitio en internet
Existen plataformas diseñadas específicamente para servir sitios estáticos, como Netlify, Github Pages o Cloudflare Pages. Todas estas plataformas ofrecen la opción de generar el sitio estático desde una rama de git al hacer un push.
Este proceso simplifica enormemente la manera común de crear sitios web, además que mantiene todo ordenado gracias al uso obligatorio de git.
Los sitios estáticos son seguros
En un sitio estatico nunca ejecutas codigo de lado del servidor y esa es una gran ventaja para el tema de la seguridad.
En el caso de sitios hechos en WordPress el mayor número de vulnerabilidades proviene de los plugins, por que una instalación común puede hacer uso de hasta 10 plugins.
Y aunque los plugins de WordPress son indispensables para crear sitios web más avanzados, los sitios estáticos pueden funcionar a la perfección sin necesitar de un preprocesado.
Un sitio estático puede atender miles de visitantes
El rendimiento de un sitio generado de manera estática es inigualable y es difícil que sufra caídas cuando muchas personas intentan acceder a él.
Además pueden resistir ataques de DDoS que fácilmente volverían inaccesibles otra clase de sitios que dependen de un servidor más complejo.
Desventajas de los sitios estáticos
Los sitios estáticos no están llenos de ventajas, uno de sus principales problemas es que al no disponer de un servidor es difícil procesar los formularios o hacer acciones más avanzadas, como llamar a una API.
Otra desventaja es la dificultad para editar el contenido del sitio por que a diferencia de un WordPress no tienes un panel de administración en el que puedas hacer ajustes y visualizarlos rápidamente.
Aun así estas desventajas no deberían afectar a los sitios más pequeños que tienen solo el objetivo de compartir información en internet y que raramente se actualizan.
Ejemplos de sitios estáticos
Algunos sitios muy importantes de internet se han pasado al modelo de sitios estáticos para aprovechar las ventajas que proporcionan.
Esta lista de sitios utilizan un generador de sitios estaticos:
Si te preguntabas si los sitios estaticos son utiles esta lista te lo puede confirmar, ya que incluso enormes empresas como Google están utilizando Eleventy para generar sitios con un rendimiento excelente.
Sitio estatico y dinamico
Las plataformas diseñadas para alojar sitios estáticos incluyen la capacidad de crear funciones personalizadas que se pueden ejecutar haciendo una petición, como si se tratara de una API.
Es fácil añadir dinamismo a los sitios hechos con un SSG (static site generator) y es indispensable para resolver los problemas más complicados, como el envío de formularios.
En el caso de Netlify disponemos de las Functions para poder acceder a funciones más tradicionales dentro de un sitio estático, como el almacenamiento de contenido en una base de datos, envió de formularios o la creación de archivos.
Headless WordPress
En mi servicio de Consultoría WordPress me gusta hacer énfasis en la flexibilidad de WordPress y cómo puede convertirse en un panel para administrar el contenido de un sitio estático.
Además de ser el gestor de contenido para un sitio estático también se puede generar una versión estática de un sitio diseñado con WordPress y con maquetadores, como podría ser Elementor.
Con Simply Static puedes crear un sitio estático desde WordPress, despues puedes subir tus archivos a una plataforma de alojamiento.
Comparativa de generadores estáticos
Existe una enorme cantidad de generadores de sitios estáticos y es imposible hacer una evaluación de todos pero el sitio https://jamstack.org/generators/ contiene una descripción sobre cada generador y filtros para encontrar un SSG adecuado.
Jekyll vs Hugo
Jekyll es uno de los generadores de sitios estáticos más antiguos y uno de los más simples de usar, las plantillas se crean utilizando Liquid.
Hugo es un generador especializado en el manejo y optimización de recursos (Imágenes, Vídeos, Fuentes) y utiliza el lenguaje de programación Go para la creación de templates.
Mi recomendación es comenzar a trabajar con Hugo. Es un SSG más moderno, con excelentes funciones para el manejo de assets y puede generar sitios enormes en cuestión de segundos.
Eleventy vs Jekyll
Eleventy a diferencia de Jekyll es un generador más moderno, está disponible en NPM y utiliza Javascript como lenguaje de configuración.
Cuando usas Eleventy tienes acceso a muchas opciones, te permite trabajar con un gran número de motores de plantillas como Liquid, Javascript, Pug y otros.
Te recomiendo utilizar Eleventy en vez de Jekyll, la cantidad de dependencias que necesita en muy reducida y además dispone de plugins muy útiles como Eleventy-Img para crear fácilmente imágenes optimizadas para todos los dispositivos con el uso de srcset.
Eleventy vs Hugo
Es una comparación más difícil y no hay un claro ganador: Trabajar con Eleventy es muy facil y rapido, a diferencia de Hugo que es más difícil de configurar.
Eleventy requiere Node mientras que Hugo tiene un ejecutable por lo que no es necesario instalar nada para empezar a trabajar.
Eleventy utiliza Javascript para la mayoría de ajustes mientras que Hugo hace uso de Golang.
Yo utilizaría Eleventy si prefieres Javascript y Hugo si tienes requisitos importantes de velocidad, si se trata de un sitio muy grande o si te gusta trabajar con Golang.
GatsbyJS vs Next.js
Estos dos generadores de sitios estáticos se salen un poco de la norma por que utilizan React para generar paginas muy dinámicas pero que tienen los beneficios del HTML estático.
En particular Next.js es mucho más avanzado que los otros SSG y gracias a los React Server Components puede funcionar como un servidor tradicional, tal como PHP o Node.
En mi opinión existen muy pocas razones para trabajar con Gatsby ya que Next.js se ha convertido en el framework «React» más utilizado en el mundo y tienes la posibilidad de convertir una página estático en un sitio tradicional.
Hugo vs Gatsby
GatsbyJS es el primer generador de sitios web estáticos que use y aunque fue una experiencia increíble hoy día no le recomendaría a nadie trabajar con el.
Para sitios más pequeños es conveniente trabajar con generadores fáciles de usar, como Eleventy o Pelican, mientras que los sitios más grandes se benefician de utilizar Hugo o Next.js
¿Tu tienes un SSG favorito? Dejame un comentario y platícame sobre cómo utilizas un generador de sitios para diseñar páginas web optimizadas para los usuarios.