¡Vuelven los sitios estáticos!

Seguro que al leer el título de este artículo más de uno se ha quedado perplejo y se pregunta ¿hemos vuelto a los años noventa?, ¿por qué vuelven los sitios estáticos?, ¿no se supone que son muy limitados y difíciles de mantener? Los sitios estáticos que estamos viendo hoy en día van un paso más allá de lo que tradicionalmente conocemos bajo este concepto y de muchos de sus inconvenientes, como explicamos a continuación. Así, que en ese sentido, no nos extraña que los sitios estáticos sean una de las 6 tendencias que marcarán el Desarrollo Web en 2019.

Los sitios estáticos tradicionales, construidos solamente con HTML y CSS, sin usar bases de datos o ninguna tecnología del lado del servidor, están bastante limitados y presentan muchas dificultades a la hora de administrar su contenido o cambiar su composición, ya que cualquier alteración nos obliga a editar el código directamente, e incluso a modificar cada una de las páginas por separado.

¿En qué consisten los sitios estáticos modernos?

Como cualquier sitio estático, consisten en un conjunto de archivos HTML, CSS, así como imágenes y otros recursos multimedia. La diferencia con los sitios estáticos de años o décadas atrás se basa en que, actualmente, todo el código producido para construir un sitio estático es generado mediante software.

Es decir, los sitios estáticos modernos se construyen con un lenguaje de programación de propósito general, como Ruby o NodeJS, desde el que se puede acceder a recursos como bases de datos, el sistema de archivos o servicios web, para generar cada una de sus páginas con un contenido específico. Por supuesto, estos sitios además pueden alimentarse de una plantilla, template o layout, de modo que todas las páginas tengan un aspecto consistente. Por tanto, los sitios estáticos modernos realmente son proyectos con altas dosis de programación, donde el proceso de producción (o build) es el encargado realmente de generar cada una de las páginas con el contenido que le corresponde.

Una vez realizado el proceso de producción, quedan generados los archivos HTML con el contenido estático, que será subido finalmente al servidor. Por tanto, en el servidor tendremos únicamente páginas sencillas, sin nada de programación del lado del servidor.

¿Qué ventaja tiene tener un sitio estático?

El resurgimiento de estos modernos sitios estáticos se debe a que comparten las mismas ventajas de los sitios estáticos tradicionales:

  1. Mayor velocidad. Al no tener que ejecutarse ningún código de programación, acceso a bases de datos o consulta de servicios web, el sitio estático consigue mayor rapidez.
  2. Compatibilidad con cualquier tipo de servidor. Al no necesitar la ejecución de código del lado del servidor, el hosting necesario para alojar un sitio estático prácticamente no tiene ningún requisito.
  3. Tampoco tiene dependencias de otras tecnologías como una base de datos en particular, librerías del lado del servidor, etc.
  4. El sitio estático es más seguro, ya que no se ejecuta ningún código en el servidor, de modo que las posibilidades de vulnerabilidades se reducen notablemente.

Como se puede ver, todas las ventajas mencionadas son muy relevantes en el momento actual, ya que son factores que influencian positivamente en la Experiencia de Usuario y, al final, también en el Posicionamiento SEO de los proyectos web.

Su única desventaja es que, cada vez que se modifica cualquier detalle del contenido en la base de datos, el layout de las páginas, o cualuqier otro elemento importente, se requiere una nueva producción de las páginas HTML de todo el proyecto y la actualización de los archivos generados en el servidor.

¿Cómo realizar un sitio estático en 2019?

Realmente, cualquier desarrollador podría montarse por su cuenta un sistema para generar el código de cada página en estático, pero existen varias librerías que realizan directamente este trabajo, en las que nos podemos apoyar para producir las páginas del sitio. Muchas de ellas son tan complejas y potentes como muchos de los frameworks más extendidos.

  • Jekyll. Es un generador de sitios estáticos pensado para desarrollar blogs de una manera muy cómoda. Usa el sistema de archivos del servidor, en lugar de bases de datos, para almacenar el contenido y en el proceso de producción es capaz de adaptar esos contenidos dentro de un layout, producir páginas de categorías, URL amistosas, etc.

  • Hugo. Es uno de los más potentes y flexibles sistemas de creación de sitios estáticos. Dispone de diversos generadores vía consola, sistema de templates, un completo API de funciones para realizar innumerables tareas y diversas funcionalidades de automatización.

  • Gatsby. Propone un sistema de trabajo similar al de los anteriores, pero con la novedad de incorporar ReactJS en el flujo de trabajo y la creación de interfaces, así como otras herramientas del ecosistema React, como puede ser GraphQL.