Static site generators: creación de proyectos web minimalistas

La oferta de la World Wide Web no solo destaca por su diversidad temática, sino cada vez más por su diversidad funcional. Los elementos dinámicos, que posibilitan la directa interacción entre las páginas y sus visitantes o personalizan su aspecto (toda la página o solo algunos contenidos), refuerzan el valor añadido a menudo de forma patente y desempeñan un papel cada vez más importante.

Pero el uso de componentes interactivos que pueden desarrollarse con ayuda de bases de datos y lenguajes de script del lado del servidor o del cliente como PHP y JavaScript no resulta conveniente para todos los tipos de páginas web: las de menor envergadura, como blogs, páginas corporativas o páginas privadas, también pueden convencer con contenidos estáticos sin que para ello los visitantes tengan que renunciar a funciones fundamentales. Para crear estas páginas web estáticas los desarrolladores recurren cada vez con más frecuencia a los llamados static site generators o static website generators, que simplifican considerablemente el proceso de programación gracias a diseños y componentes predeterminados.

¿Qué es un static site generator?

Los static website generators (en ocasiones también web page generators) son estructuras predefinidas de código sobre las que se pueden crear páginas web estáticas. A diferencia de los sistemas de gestión de contenidos, que suelen guardar los contenidos en bases de datos y procesan el código HTML del lado del servidor con ayuda de lenguajes de script como PHP, los generadores de páginas estáticas generan el código HTML a nivel local en el ordenador del desarrollador o alternativamente en la nube. Con este objetivo, todos los componentes necesarios se almacenan en un directorio bien estructurado que se caracteriza por la estricta separación entre layout y contenido. Esto permite que los usuarios puedan modificar el diseño de los proyectos web en cualquier momento sin influir en los contenidos publicados. Para ello, la mayoría de generadores cuentan con un template engine o generador de plantillas que ayuda a crear las correspondientes plantillas de diseño.

La instalación y el manejo de los static site generators se llevan a cabo por medio de líneas de comandos y los contenidos web se escriben en lenguajes de marcado como Markdown, donde los editores correspondientes están integrados en el software o, en caso necesario, se tienen que descargar manualmente. Para publicar la página solo es necesario transmitir el código web automáticamente generado al espacio web. El generador, partiendo de los metadatos que aparecen en el inicio de los archivos, lo que se conoce normalmente como “front matter”, se encarga de que la página web se muestre en el navegador de los visitantes. En lugar de subir el directorio al propio espacio web, este puede depositarse en una red de entrega de contenidos.

Ventajas de las páginas web estáticas

Las páginas web estáticas recuerdan a los inicios de la World Wide Web, donde las ventanas emergentes de publicidad presentaban el máximo nivel de interactividad posible. Hoy, las páginas web son mucho más que meras plataformas de información, por lo que los elementos dinámicos son un factor muy importante que no debe subestimarse para el éxito de las aplicaciones web. Sin embargo, en determinados casos como en los blogs o las páginas corporativas, el foco de atención sigue estando en la transmisión de la información. Los sistemas de gestión de contenidos y los page builders se pueden utilizar en este tipo de proyectos, no obstante, los static site generators presentan ventajas decisivas frente a las soluciones clásicas:

  • Velocidad: los proyectos creados con un generador de páginas estáticas destacan por su excelente rendimiento. Al estar escritos con código HTML u opcionalmente con código CSS y JavaScript, los clientes (navegadores) lo tienen muy fácil para interpretarlos, ya que se suprimen las consultas a las bases de datos, tan costosas en cuanto a recursos del sistema, de modo que se puede responder a cualquier solicitud del servidor de forma inmediata. Además, los contenidos también pueden almacenarse temporalmente, lo que ahorra tiempo al volver a visitar la página.

  • Control de versiones para los contenidos: mientras que los contenidos de los proyectos web dinámicos se almacenan en bases de datos separadas del código base, el contenido de las páginas web estáticas se presenta normalmente en archivos de texto simples. Estructuralmente, los elementos de contenido no se diferencian de otros componentes del código base, lo que simplifica la administración de las versiones. Así, no solo se puede gestionar la estructura de código de un blog en un repositorio de GitHub, sino también cada una de las entradas del blog. Especialmente cuando varias personas se encargan de gestionar los contenidos, de esta manera se mantiene fácilmente la perspectiva sobre los cambios realizados. Con GitHub Pages, la plataforma de desarrollo ofrece incluso un paquete propio que incluye la gestión de las versiones y un generador de páginas estáticas (en este caso: Jekyll).

  • Seguridad: otra ventaja de las páginas web creadas con static website generators es que su interfaz es menos susceptible a ataques, a diferencia, por ejemplo, de sistemas de gestión de contenidos como WordPress, que ya vienen de fábrica con el riesgo de las brechas de seguridad y deben actualizarse regularmente. Las páginas web estáticas se benefician, sobre todo, del hecho de poder cumplir con su cometido sin acceder a bases de datos ni tener que contar con la interacción o autenticación de los usuarios. Todo el riesgo potencial se reduce al acceso a través del cliente al visitar la página. Dado que, en general, no suelen entregarse más que páginas HTML estructuradas, disminuye la probabilidad de que ocurran accesos no deseados.

  • Fácil mantenimiento del servidor: como paquete de software, los static site generators tienen ciertas dependencias que deben satisfacer. La cantidad de componentes necesarios es en comparación muy baja, aunque estos solo son relevantes durante el proceso de desarrollo. Mientras que otras soluciones requieren diversos módulos, bases de datos, bibliotecas, frameworks y paquetes incluso para poder funcionar, de ahí que sea habitual realizar actualizaciones, las páginas estáticas generadas están vinculadas a un servidor web funcional cuando se publican.

  • Buena gestión del tráfico: las páginas con elementos dinámicos suelen tener problemas con picos de tráfico inesperados y, si bien se puede interceptar un número elevado de visitas mediante mecanismos de caché, el servidor se encuentra rápidamente con algunas limitaciones si hay muchas peticiones vinculadas a consultas a la base de datos. Las páginas web programadas con un web page generator tienen menos problemas cuando se tiene un elevado número de visitas puntual, pues la entrega de páginas HTML estáticas solo consume un mínimo de recursos del servidor.

Debilidades de los web page generators

Mientras que las ventajas de las páginas estáticas ya mencionadas, como la velocidad de entrega o el elevado factor de seguridad, no son nada desdeñables, hay razones importantes que explican por qué un static site generator no es apropiado para proyectos de gran envergadura. Ante todo hay que mencionar los enormes esfuerzos de mantenimiento: trabajar con un generador no solo requiere amplios conocimientos sobre Markdown, HTML, etc., sino que carece de numerosos automatismos que se dan por supuestos en los sistemas de gestión de contenidos y en los sistemas de creación modular de páginas web. Algunas de las desventajas derivadas de la utilización de static website generators son:

  • Ausencia de contenidos en tiempo real: los static site generators no ofrecen posibilidades para generar contenidos dinámicos (sugerencias, actualización de precios, búsqueda de texto completo, etc.). Los elementos que se adaptan automáticamente a los usuarios correspondientes evaluando los datos en tiempo real solo se llevan a cabo por otras vías, p. ej., con ayuda de scripts del lado del cliente (sobre todo JavaScript). Estos plantean, sin embargo, posibles brechas de seguridad que implican riesgos tanto para las páginas web como para sus visitantes. Además, muchos usuarios bloquean JavaScript y otros lenguajes de script en sus navegadores, por lo que los contenidos correspondientes permanecen ocultos.
  • Uso laborioso de datos de entrada de usuario (user input): otro problema de la falta de scripts del lado del servidor y de bases de datos se hace patente cuando, en algunas situaciones, los proyectos web deben facilitar entradas de usuario como, por ejemplo, en un formulario de contacto. Si quieres integrar este tipo de elementos a una página estática, tendrás que recurrir inevitablemente a JavaScript o a servicios de proveedores externos. La plataforma DISQUS puede utilizarse, por ejemplo, para agregar comentarios a proyectos elaborados con generadores de páginas web (incluida la moderación y la gestión de spam), pero este servicio también recurre a JavaScript. El ya mencionado repositorio GitHub Pages ofrece, además, una función de comentarios que está estrechamente relacionada con el control de las versiones y cuyo análisis se realiza del lado del servidor. En cualquier caso, la inversión de trabajo y tiempo necesaria para desarrollar tales componentes de usuario son, en comparación, muy elevados.
  • Ausencia de una interfaz de usuario estándar: los static website generators no vienen de fábrica con una interfaz en la que puedan añadirse nuevos contenidos o en la que los ya existentes puedan adaptarse o eliminarse. Los editores WYSIWYG ayudan a escribir el código Markdown necesario y a visualizar a priori el resultado mediante la función de vista previa, pero no evitan que los archivos creados tengan que cargarse manualmente en el servidor. Este proceso es especialmente difícil de entender para los redactores con conocimientos básicos sobre código y estructura de la página web, por lo que su uso conllevará más tiempo que, por ejemplo, en el caso de un CMS como WordPress.

En resumen, se puede decir que los proyectos basados en páginas estáticas presentan desventajas sobre todo en cuanto a la actualidad, las modificaciones y la interacción del usuario. Si:

  • se revisan los contenidos regularmente,
  • se añaden funcionalidades a posteriori,
  • se procesan los datos de los usuarios o
  • se realizan modificaciones ópticas en cualquier momento e incluso con conocimientos mínimos,

las soluciones como los page builders o los sistemas de gestión de contenidos se anteponen a los web page generators.

Consejo

Si, debido a los puntos débiles de los static site generators, prefieres optar por una alternativa más intuitiva, la herramienta modular de 1&1 MiWeb es una solución inicial adecuada y de alto rendimiento. La utilización de las diferentes plantillas de diseño y funciones está vinculada, como ya se ha mencionado, a las consultas al servidor y a la base de datos adicionales, por lo que en este caso las páginas creadas no pueden equipararse con el rendimiento y los estándares de seguridad de los proyectos elaborados con un generador.

Comparativa de static site generators: los generadores más conocidos

El número de static website generators ha aumentado enormemente en los últimos años. GitHub contiene los directorios de los proyectos de incontables soluciones de código abierto que se utilizan de forma gratuita para crear páginas web propias y pueden adaptarse en función de las necesidades. staticgen.com ofrece un listado general de los generadores más populares. Dicha página recoge las diferentes posibilidades alfabéticamente o las clasifica en estrellas, forks (bifurcaciones) o issues (propuestas de optimización/tareas) de GitHub. Adicionalmente, la estructura de las páginas web puede filtrarse por el lenguaje de programación subyacente (Ruby, Python, C, C++, etc.). En la siguiente tabla te mostramos algunos de los generadores más importantes (sin incluir JavaScript) en base a la información de StaticGen:

 

Licencia

Idioma

Generador de plantillas

Página web/Página de proyecto

Jekyll

MIT

Ruby

Liquid

jekyllrb.com

Hugo

APL 2.0

Go

Go Templates

gohugo.io

Pelican

AGPL

Python

Jinja2

blog.getpelican.com

Middleman

MIT

Ruby

ERB/Tilt

middlemanapp.com

Expose

MIT

Bash

custom

github.com/Jack000/Expose

Cactus

BSD

Python

Django

github.com/eudicots/Cactus

Lektor

BSD

Python

Jinja2

getlektor.com

Octopress

MIT

Ruby

Liquid

octopress.org

Hyde

MIT

Python

Jinja2

hyde.github.io

Con más de 31.000 estrellas y 7.000 bifurcaciones, Jekyll es indiscutiblemente el número 1 entre los generadores de páginas web en GitHub. Esto puede ser debido a que su estructura constituye la base para el servicio de hosting oficial de la plataforma de desarrollo, conocido como “GitHub Pages”. También hay que tener en cuenta el generador publicado en 2008 por Tom Preston-Werner, fundador de GitHub, que está escrito en Ruby y es el más antiguo de su gremio. El motor de renderizado Liquid se encarga de generar el código HTML. Visita nuestra guía para obtener información detallada y un tutorial sobre la creación de proyectos vía GitHub Pages.

Desde 2013 también se ha hecho notar el generador Hugo creado por Steve Francia (más de 20.000 estrellas de GitHub y 2.700 forks). A diferencia de Jekyll, Hugo está escrito en el lenguaje de programación Go desarrollado por trabajadores de Google. En su página oficial, el equipo de Hugo ofrece más de 100 temas predeterminados, que pueden servir como plantillas de diseño para que crees tu propia página web. Este generador de páginas estáticas incluye, además, un servidor web propio para entregar páginas en HTML.

Aunque los otros generadores de la tabla, como Octopress, Middleman o Cactus, no cuentan con el mismo grado de penetración que Hugo o Jekyll, puede merecer la pena hacer una comprobación más precisa, ya sea debido a otros lenguajes de programación o porque se utiliza otro generador de plantillas. A causa de sus reducidas dimensiones, los diferentes generadores se ponen en marcha en un tiempo muy corto, de modo que se puede buscar cómodamente el generador de páginas que mejor se adapte a las propias habilidades y necesidades.