Llegamos a ustedes gracias a:



Reportajes y análisis

¿Qué es un generador de sitios estáticos?

Herramientas para páginas web estáticas

[22/03/2019] Las páginas web pueden servir contenido de dos formas básicas: estática y dinámicamente. El contenido estático se genera antes de tiempo, se almacena y se recupera tal como está. Piense en imágenes, hojas de estilo y páginas HTML que rara vez cambian. El contenido dinámico se genera en el momento en aras de una respuesta personalizada. Los ejemplos aquí incluyen consultas de búsqueda, paneles de control y recomendaciones de productos adaptadas para el usuario individual.

Con cualquier página web, existe una combinación de presentación estática y dinámica, pero últimamente ha habido un aumento en el interés por los conjuntos de herramientas mínimos que generan sitios conformados casi completamente por contenido estático.

Nada de esto es completamente nuevo. La generación de sitios estáticos y sus herramientas, como los sistemas de gestión de contenido, han existido durante décadas. Pero la última generación de estas herramientas reduce la generación de contenido estático a lo esencial, lo que hace posible construir y mantener páginas web estáticas sin tener que depender de un sistema de administración de contenido voluminoso. Al ofrecer arquitecturas de complementos y otras extensibilidades, también aprovechan las modernas técnicas de construcción de software.

Diseño web estático

La mayoría de las páginas web son una mezcla de contenido estático y dinámico. Una solicitud de búsqueda generada dinámicamente, por ejemplo, puede aparecer lado a lado con barras laterales, encabezados y pies de página estáticos. Sin embargo, por el bien de esta discusión, nos centraremos en las páginas web que son "primero estáticas; es decir, páginas web donde no se genera contenido a demanda, según las solicitudes de los clientes. Dichas páginas web estáticas tienden a construirse siguiendo estos lineamientos:

  1. El contenido es servido como HTML estático, CSS y archivos de imagen.
  2. El contenido estático es almacenado como está en el disco, por lo general con algún nivel de almacenamiento en caché dentro de la memoria, o se coloca en una CDN (red de entrega de contenido) y geocaché.
  3. Las páginas se reconstruyen desde el backend cada vez que se cambian, y se pueden generar en diferentes infraestructuras desde donde son alojadas. El principio más crucial es que el contenido casi nunca se genera a pedido por la actividad del visitante.

No todas las páginas web son propicias para la generación de contenido estático, pero para aquellas que lo son, los beneficios pueden ser excelentes. Debido a que el contenido estático puede servirse en una infraestructura diferente a la cual en la que se generó, es fácil abordar las necesidades de escala, seguridad y separación de inquietudes. El contenido estático es fácil de servirse a escala masiva, puesto que se puede aumentar en escala fácilmente mediante el almacenamiento en caché o CDNs.

Cómo funciona un generador de sitio estático

Un generador de sitio estático hace tres cosas básicas para crear una página web:

  1. Lee contenido, a menudo en un formato de marcado simplificado, desde archivos. Esos archivos se pueden colocar en una estructura de directorio que coincida con el output, o esa estructura se puede crear a partir de un archivo de descripción.
  2. Reproduce ese contenido a HTML, de acuerdo con las plantillas.
  3. Guarda los resultados en un nuevo directorio, ya sea para que coincida con el diseño de los archivos de origen o según un patrón predefinido.

Los generadores de sitios estáticos más básicos siguen este patrón. Los generadores más avanzados pueden agregar otras funciones:

  • Si el contenido está alojado en una infraestructura diferente de aquella en la que se reprodujo, inserte automáticamente el HTML resultante en una página web o CDN.
  • Observe los archivos de origen en busca de cambios, y vuelva a reproducir los archivos cuando sean alterados.
  • Reconstruya todo el árbol de archivos fuente de manera inteligente, de modo que solo los archivos que se deben reconstruir se reconstruyan como una medida de ahorro de trabajo.

Generador de sitio estático vs. CMS

Incluso los generadores de sitios estáticos más avanzados han restringido deliberadamente los conjuntos de características. Esto forma parte de la filosofía del caso de uso: Están destinados a servir como alternativas más simples a los sistemas de administración de contenido en toda regla.

La mayoría de los sistemas de administración de contenido usan un front end web, requieren una base de datos para almacenar contenido y administrar los permisos de los usuarios, y necesitan una buena cantidad de configuración y mantenimiento para que sean útiles. Los generadores de sitios estáticos adoptan la postura opuesta en casi todos los aspectos. Se ejecutan como aplicaciones de línea de comandos, dependen del sistema operativo para la administración de los archivos y los permisos de los usuarios, funcionan sin una base de datos (que requieren solo un archivo de configuración como máximo) y no necesitan mucho trabajo administrativo para ponerse en marcha.

Los generadores de sitios estáticos se esfuerzan por hacer que la creación y administración de contenido web sea lo más libre de gastos posible. Por ejemplo, con un CMS, el contenido a menudo se edita y administra a través de la propia interfaz web del sistema. Con las herramientas del sitio estático, el contenido se edita directamente en el disco utilizando el editor de texto que prefiera el usuario.

En resumen, la mayor diferencia entre un CMS completo y un generador de sitio estático es la filosofía de la herramienta. Un sistema de administración de contenido es típicamente rico en características por diseño. Un generador de sitio estático se enfoca en la representación del contenido como HTML y, por lo general, omite todo lo demás.

Los principales generadores de sitio estático

Si desea comenzar con la generación de páginas web estáticas, encontrará muchas buenas herramientas para elegir. A continuación, enumeramos ocho de las herramientas más conocidas. Algunos generadores de sitios estáticos son herramientas independientes (como Hugo aquí), pero la mayoría requiere un tiempo de ejecución de lenguaje. Es probable que desee comenzar a experimentar con una herramienta escrita en un lenguaje con el que ya esté familiarizado o con el que tenga un buen apoyo institucional.

Gatsby

Gatsby utiliza el marco de trabajo React JavaScript para crear sitios estáticos. Puede construir a partir de más que solo archivos estáticos existentes, también puede conectarse a bases de datos, incluidos los sistemas de administración de contenido existentes como WordPress. Esto hace que Gatsby sea una opción útil si está migrando de un motor de blog existente. Gatsby también se implementa directamente en plataformas de alojamiento que incluyen CDN.

Hugo

Hugo, escrito en Go, ejecuta multiplataforma como un binario nativo y, por lo tanto, es una buena opción para los desarrolladores de páginas web que no desean trabajar con la configuración del tiempo de ejecución de un lenguaje. Hugo proporciona muchas funciones útiles de organización listas para usar, como la generación de tablas de contenido o menús del sitio, redirecciones y URL de enlace permanente limpias, y soporte integrado para herramientas comunes de páginas web de terceros, como comentarios de Disqus y Google Analytics.

Jekyll

Jekyll, escrito en Ruby, proporciona un flujo de trabajo básico de generación de sitios estáticos. En palabras de sus creadores, "no estorba y le permite concentrarse en lo que realmente importa: su contenido. Jekyll proporciona muchas características útiles dentro de ese alcance mínimo, como la capacidad de generar enlaces automáticamente a las páginas siguientes y previas en un blog. Véase también Octopress, un marco para la generación de sitios Jekyll previamente configurados.

Lektor

Lektor, escrito en Python, está basado en archivos como muchos otros generadores estáticos, pero también proporciona una interfaz de administración amigable, junto con algunas herramientas que otros generadores estáticos generalmente no incluyen (por ejemplo, gestión de imágenes).

Nikola

Nikola, también escrito en Python, ofrece funciones avanzadas como la reconstrucción inteligente de cambios, importadores de muchos motores de blogs comunes y una arquitectura de complementos para ampliar la funcionalidad tan extensamente como sea necesario.

Pelican

Pelican, escrito en Python, es uno de los sistemas de páginas web estáticas más conocidos y más utilizados en ese lenguaje. Pelican permite diferentes tipos de páginas (por ejemplo, publicaciones de blog frente a páginas de páginas web independientes), proporciona soporte multilingüe y almacena en caché elementos de página comunes para reconstrucciones rápidas.

React Static

Como Gatsby arriba, React Static usa React para reproducir páginas estáticas. A diferencia de Gatsby, React Static mantiene las consultas de datos y las plantillas por separado para una separación más clara de los concerns, y no depende de GraphQL como un formato interno de consulta de datos.

VuePress

VuePress utiliza el marco de Vue de JavaScript. VuePress hace hincapié en la funcionalidad mínima, ampliable a través de un sistema de complementos, y viene con una plantilla predeterminada que está diseñada para documentos técnicos. Si usa JavaScript como su lenguaje principal y está más familiarizado con Vue que con React, VuePress sería un buen lugar para comenzar.