Hace 10 años cuando descubrí Wordpress, fué una revolución, de repente podía crear un Blog con la famosa instalación de 5 minutos sin apenas conocimientos de PHP, con un panel de administración amigable para ofrecer a los clientes, un directorio de plugins en continuo crecimiento y unos requisitos de servidor bastante básicos, en este escenario hacer páginas web estáticas no tenía mucho sentido.

Actualmente Wordpress todavía es una herramienta fantástica, pero ahora tenemos otras opciones con sus ventajas e inconvenientes que vale la pena analizar.

Ahora podemos aprovechar plataformas de terceros para incluir servicios en cualquier sitio web.

Tenemos generadores de sitios web estáticos con sistemas de plantillas que nos facilitan el diseño de los layouts.

Los generadores de sitios web estáticos son para programadores o aficionados a la tecnología, que se sientan cómodos utilizando la terminal y escribiendo código, estás son algunas de las tecnologías que te encontrarás según el generador que elijas:

  • npm Manejador de paquetes node
  • Bower Manejador de paquetes
  • Gulp Automatizador de tareas
  • Git / GitHub Control de versiones
  • Sass Preprocesador de css
  • Liquid Sistema de plantillas
  • Handlebars Sistema de plantillas
  • Jade Sistema de plantillas
  • Yaml Formato de serialización de datos
  • JSON Formato de texto ligero para el intercambio de datos

Para esta web utilizo Jekyll + Foundation 6.

Para proyectos sencillos utilizo la plantilla de ZURB oficial, no es un generador de sitios web estáticos como Jekyll, pero se le parece mucho, utiliza Panini, su propio sistema de plantillas y te genera una web estática, comprimida, optimizada y lista para producción.

Otros generadores que me parecen interesantes son Hugo y Midlemann.

Cómo funcionan los generadores de sitios web estáticos?

  1. Te instalas el generador y las dependencias necesarias en local.
  2. Trabajas en tu proyecto.
  3. Subes tu página web estática generada a tu servidor vía ftp, rsync, Git o la técnica que prefieras.

Hay generadores de sitios web estáticos de todos los sabores, puedes encontrarlos escritos en .Net, Ruby, Phyton, PHP, Go o JavaScript. Pero finalmente con todos obtienes archivos en los lenguajes que conoce el navegador que son HTML, CSS y JavaScript.

Los generadores de sitios estáticos funcionan vía línea de comandos, soportan uno o más sistemas de plantillas, te montan un servidor local para testear y un sitio web estático final para producción.

En StaticGen puedes elegir el que más te guste.

Lo que me gusta de Jekyll

  • Jekyll utiliza Yaml Front Matter y Liquid, lo que permite darle algo de lógica a las plantillas, estructuras de control (if, case, for), definir variables etc…
  • Puedes añadir el framework front-end que quieras, Foundation, Bootstrap, Materialize o ninguno.
  • Puedes alojar tu web grátis en GitHub.
  • Al no tener base de datos son más ligeros y más rápidos.
  • Al no tener base de datos son más difícil de hackear.
  • Puedes escribir tus posts en Markdown.
  • Tienes control de versiones con Git.
  • Mejoras el posicionamiento.
  • Utilizas menos recursos del servidor.
  • Aprendes a utilizar tecnologías web modernas

Si quieres añadir funcionalidades avanzadas como zonas autoeditables o un blog fácil de administrar por el cliente puedes hacerlo con aplicaciones de terceros como Cloudcannon o Siteleaf.

Lo que no me gusta tanto de Jekyll

Alojar Jekyll en GitHub Pages o en un hosting especialmente preparado es sencillo pero si quieres hacerlo en otro servidor es otro tema.

En teoría, como dice en la documentación oficial de Jekyll, la página web generada en la carpeta _site debería de funcionar tal cual, en cualquier servidor o simplemente abriendo el index.html, pero eso es BULLSHIT, no funciona. Las url de las imágenes, css y js están rotas.

Opciones desesperadas:

  • Abrir tu web con el servidor que te monta jekyll en localhost:4000 y recurrir a los poderes ocultos de Linux para guardarte una versión estática con wget.
  • Utilizar SiteSucker, si tienes un Mac, o algo similar para Windows.

    Con estás dos opciones obtienes lo mismo, una web estática con el problema de las url solucionado, lo que yo esperaba encontrar de serie en la carpeta _site de Jekyll.

Opciones sencillas:

  • Netlify, es la opción que estoy utilizando actualmente, continuo despliege de git-hub, CDN global, SSL y dominio propio.
  • Bitbaloon, es un servicio de Netlify hecho especialmente para alojar páginas web estáticas. Grátis en subdominio y 5$ al mes con dominio propio. Bitbaloon me sorprendió por su facilidad y lo bien que funciona con Jekyll. Puedes subir la carpeta _site generada o el proyecto entero, simplemente funciona.
  • Surge, no lo he probado.
  • GitHub Pages, grátis, con dominio propio, es la opción que he estado utilizando hasta conocer Netlify y funciona genial.

Opciones avanzadas:

  • Configurar un VPS en DigitalOcean.
  • Alojar Jekyll en Amazon S3.

Los generadores de sitios web estáticos no son para todo el mundo, ni para todos los proyectos.

No es buena idea si:

Quieres hacer una web para un cliente que quiere actualizar los contenidos a menudo y no quieres utilizar servicios de terceros.

Puede ser interesante si:

Quieres hacer una web que principalmente muestre contenidos y no necesite actualizarse mucho.

Definitivamente lo recomiendo si:

Eres desarrollador y quieres tener tu propio blog y portfolio, Jekyll es divertido, aprendes cosas nuevas y tienes muchas opciones gratuitas.