Static site generator: qué es, cómo funciona y qué ventajas tiene

Para crear una página web estática, los de­sa­rro­lla­do­res recurren cada vez más a ar­qui­te­c­tu­ras Jamstack con un generador de páginas estáticas (static site generator o static website generator). Estas he­rra­mie­n­tas si­m­pli­fi­can no­ta­ble­me­n­te el proceso de pro­gra­ma­ción y permiten una pu­bli­ca­ción rápida de las páginas. Las funciones dinámicas se delegan a una ar­qui­te­c­tu­ra di­s­tri­bui­da, mientras que el Ja­va­S­cri­pt del lado del cliente se comunica con las API de los mi­cro­se­r­vi­cios para aportar la in­ter­ac­ti­vi­dad necesaria.

¿Qué es un static site generator? (SSG)

Los static website ge­ne­ra­to­rs son es­tru­c­tu­ras pre­de­fi­ni­das de código sobre las que se pueden crear páginas web estáticas. A di­fe­re­n­cia de los sistemas de gestión de co­n­te­ni­dos, que recuperan el contenido de las bases de datos, los ge­ne­ra­do­res de páginas estáticas crean los archivos HTML de una página a partir de un script basado en datos de entrada, que están al­ma­ce­na­dos en un sistema de archivos. Este proceso ya se lleva a cabo durante su de­sa­rro­llo, mientras se realizan los cambios no solo en el código, sino también en el contenido. En otras palabras, este proceso no se efectúa cuando el usuario accede a la página web a través de su navegador.

¿Cómo funcionan los static site ge­ne­ra­to­rs?

La in­s­ta­la­ción y también el manejo de los ge­ne­ra­do­res de páginas estáticas se llevan a cabo por medio de la línea de comando. En cuanto al contenido de la página web, está escrito en lenguajes de marcado como, por ejemplo, Markdown. Los do­cu­me­n­tos Markdown se pueden adaptar sin mayor esfuerzo en la he­rra­mie­n­ta web del sistema de control de versiones GitHub. Como al­te­r­na­ti­va, existe la po­si­bi­li­dad de utilizar cualquier editor de texto o los editores Markdown. El generador, partiendo de los metadatos que aparecen en el inicio de los archivos, conocido ge­ne­ra­l­me­n­te como “front matter”, se encarga de que la página web se muestre en el navegador de los vi­si­ta­n­tes.

Close

¿Qué ventajas tiene crear una página web estática?

En de­te­r­mi­na­dos casos como en los blogs o las páginas co­r­po­ra­ti­vas, el foco de atención sigue estando en la tra­n­s­mi­sión de la in­fo­r­ma­ción. Los sistemas de gestión de co­n­te­ni­dos y los creadores de páginas web se pueden utilizar en este tipo de proyectos. Sin embargo, los ge­ne­ra­do­res de páginas estáticas presentan ventajas decisivas frente a las so­lu­cio­nes clásicas:

• Velocidad: los proyectos creados con un generador de páginas web estáticas destacan por su excelente rapidez en el lado del usuario, algo muy relevante también desde la pe­r­s­pe­c­ti­va SEO. La razón es que el pro­ce­sa­mie­n­to de los archivos se realiza ya en la fase de de­sa­rro­llo o de co­n­s­tru­c­ción de las páginas, y no en el momento de la consulta (consulta a la base de datos).
• Control de versiones para los co­n­te­ni­dos: mientras que los co­n­te­ni­dos 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 no­r­ma­l­me­n­te en archivos de texto simples. Es­tru­c­tu­ra­l­me­n­te, los elementos de contenido no se di­fe­re­n­cian de otros co­m­po­ne­n­tes del código base, lo que si­m­pli­fi­ca el proceso de in­tro­du­cir o es­ta­ble­cer un sistema de gestión de versiones. De esta manera, no solo se puede gestionar la es­tru­c­tu­ra de código de un blog en un re­po­si­to­rio de GitHub, sino también cada una de las entradas del blog.
• Seguridad: otra ventaja de las páginas web creadas con static website ge­ne­ra­to­rs es que son menos su­s­ce­p­ti­bles a ataques, a di­fe­re­n­cia de los sistemas de gestión de co­n­te­ni­dos como WordPress, que ya vienen con el riesgo de tener fallos de seguridad. Además, estos sistemas se deben ac­tua­li­zar co­n­s­ta­n­te­me­n­te. Todo el riesgo potencial se limita al acceso in­di­vi­dual por parte del cliente al visitar la página. Dado que no suelen en­tre­gar­se más que páginas HTML es­tru­c­tu­ra­das, la pro­ba­bi­li­dad de que ocurran accesos no deseados se reduce al mínimo.
• Fácil ma­n­te­ni­mie­n­to del servidor: como paquete de software, los ge­ne­ra­do­res de páginas estáticas también tienen de­pe­n­de­n­cias que se deben tener en cuenta. La cantidad de co­m­po­ne­n­tes es en co­m­pa­ra­ción muy baja, aunque estos solo son re­le­va­n­tes durante el proceso de de­sa­rro­llo. Otras so­lu­cio­nes requieren diversos módulos, bases de datos, bi­blio­te­cas, fra­me­wo­r­ks, así como paquetes ne­ce­sa­rios para su fu­n­cio­na­mie­n­to en pro­du­c­ción y, por tanto, también necesitan realizar ac­tua­li­za­cio­nes pe­rió­di­cas. Los static site ge­ne­ra­to­rs, en cambio, solo están co­ne­c­ta­dos a un servidor web en fu­n­cio­na­mie­n­to en el momento de su pu­bli­ca­ción.

¿Qué di­fe­re­n­cia a un static site generator de un CMS clásico?

Los sistemas de gestión de co­n­te­ni­dos (CMS) han re­vo­lu­cio­na­do la forma de construir páginas web. El gran esfuerzo manual que era necesario para programar las páginas web estáticas de estilo tra­di­cio­nal pasó a ser historia debido a los prácticos sistemas de hoy en día. La in­no­va­ción decisiva y el cambio del antiguo enfoque: la capacidad de compilar y presentar las páginas de forma adecuada solo tras la petición del usuario, dado que se utilizan bases de datos para almacenar el contenido.

Los ge­ne­ra­do­res de páginas estáticas co­n­s­tru­yen un puente entre las páginas web estáticas de estilo tra­di­cio­nal y los proyectos CMS. Al igual que el enfoque de pro­gra­ma­ción clásico, las páginas web y el contenido re­s­pe­c­ti­vo se generan antes de acceder a ellas. Además, los static website ge­ne­ra­to­rs, como los sistemas de gestión de co­n­te­ni­dos, permiten a los de­sa­rro­lla­do­res utilizar pla­n­ti­llas y crear páginas web de forma au­to­má­ti­ca.

La di­fe­re­n­cia principal entre el static site generator y el CMS radica en el momento en que se generan las páginas web: en el primero, durante el proceso de de­sa­rro­llo; en el segundo, en el momento en que el usuario accede. Además, el generador elimina la de­pe­n­de­n­cia que existe en relación con las bases de datos u otra fuente de datos externa, así como el pro­ce­sa­mie­n­to de datos del lado del servidor al acceder a la página web. Por supuesto, también existe la po­si­bi­li­dad de integrar fuentes de datos externas con una Ap­pli­ca­tion Pro­gra­m­mi­ng Interface (API).

¿Por qué utilizar un static site generator?

El uso de static website ge­ne­ra­to­rs es re­co­me­n­da­ble por varias razones, pero la más decisiva es el aumento del re­n­di­mie­n­to de una página web. Los ex­ce­le­n­tes tiempos de carga, como resultado del contenido ya generado, tienen un efecto positivo en la ex­pe­rie­n­cia del usuario. Además, dado que todos los archivos de la página web se almacenan en un punto central, los proyectos con base en un generador de páginas estáticas también ofrecen la máxima fle­xi­bi­li­dad y di­s­po­ni­bi­li­dad. En cuanto al esfuerzo ad­mi­ni­s­tra­ti­vo, este es mínimo.

No obstante, si:

• se revisan los co­n­te­ni­dos pe­rió­di­ca­me­n­te,
• se añaden funciones a po­s­te­rio­ri,
• se procesan los datos de los usuarios o
• se realizan ajustes ópticos en cualquier momento (incluso con co­no­ci­mie­n­tos mínimos),

las so­lu­cio­nes como, por ejemplo, los creadores de páginas web o los sistemas de gestión de co­n­te­ni­dos se anteponen a los ge­ne­ra­do­res.

Las de­bi­li­da­des de los static website ge­ne­ra­to­rs

Las ventajas me­n­cio­na­das an­te­rio­r­me­n­te, por ejemplo, la velocidad de entrega o el nivel de seguridad, no se pueden me­no­s­pre­ciar. Sin embargo, hay razones im­po­r­ta­n­tes que explican por qué un generador de páginas estáticas no es apropiado para proyectos de gran tamaño. El trabajo con un generador no solo requiere amplios co­no­ci­mie­n­tos de Markdown, HTML, entre otros, sino que carece de numerosos au­to­ma­ti­s­mos que ya están in­co­r­po­ra­dos en los sistemas de gestión de co­n­te­ni­dos y en los creadores de páginas web. Algunas de las de­s­ve­n­ta­jas que se derivan de la uti­li­za­ción de static website ge­ne­ra­to­rs son:

• Sin co­n­te­ni­dos en tiempo real: un generador de páginas estáticas, en su co­n­fi­gu­ra­ción estándar, no ofrece opciones para generar co­n­te­ni­dos dinámicos (como re­co­me­n­da­cio­nes, ac­tua­li­za­cio­nes de precios o búsquedas de texto completo). Los elementos que se adaptan au­to­má­ti­ca­me­n­te al usuario mediante el análisis de datos en tiempo real solo pueden im­ple­me­n­tar­se con ayuda de scripts del lado del cliente (pri­n­ci­pa­l­me­n­te Ja­va­S­cri­pt).
• Uso laborioso de datos de entrada de usuario (user input): el proyecto web también debe permitir la entrada del usuario en ciertas ocasiones como, por ejemplo, en un fo­r­mu­la­rio de contacto. Sin embargo, este ejemplo muestra otro problema que surge por la falta de scripts del lado del servidor y de bases de datos. Para ello, tendrás que recurrir a Ja­va­S­cri­pt o a servicios de pro­vee­do­res externos. La pla­ta­fo­r­ma DISQUS se puede utilizar, por ejemplo, para añadir co­me­n­ta­rios a los proyectos ela­bo­ra­dos con ge­ne­ra­do­res de páginas estáticas (incluida la mo­de­ra­ción y la gestión de spam).
• Sin interfaz de usuario estándar: muchos ge­ne­ra­do­res de páginas estáticas, al igual que los headless CMS, no cuentan con una interfaz propia para añadir, modificar o eliminar co­n­te­ni­dos, a menos que se les incorpore una extensión adecuada. En su lugar, se gestionan di­re­c­ta­me­n­te desde la terminal. Los editores WYSIWYG ayudan a escribir el código Markdown necesario y a vi­sua­li­zar a priori el resultado mediante la función de vista previa, pero no evitan que los archivos creados tengan que cargarse ma­nua­l­me­n­te en el servidor.

En resumen, se puede decir que los proyectos basados en páginas estáticas presentan de­s­ve­n­ta­jas, es­pe­cia­l­me­n­te teniendo en cuenta la ac­tua­li­za­ción, las mo­di­fi­ca­cio­nes y la in­ter­ac­ción del usuario.

¿Cuáles son los ge­ne­ra­do­res más conocidos?

El número de ge­ne­ra­do­res con los que puedes crear una página web estática ha aumentado co­n­si­de­ra­ble­me­n­te en los últimos años. La pla­ta­fo­r­ma GitHub contiene los di­re­c­to­rios de proyectos de varias so­lu­cio­nes de código abierto que se pueden utilizar de forma gratuita para crear páginas web propias y también para ada­p­tar­las en función de las ne­ce­si­da­des.

Jamstack.org ofrece un resumen de los ge­ne­ra­do­res más populares: dicha página muestra las di­fe­re­n­tes po­si­bi­li­da­des en orden al­fa­bé­ti­co o la clasifica mediante estrellas de GitHub, forks (bi­fu­r­ca­cio­nes) o issues (pro­pue­s­tas de op­ti­mi­za­ción/tareas). Adi­cio­na­l­me­n­te, la es­tru­c­tu­ra de las páginas web se puede filtrar por el lenguaje de pro­gra­ma­ción su­b­ya­ce­n­te (Ruby, Ja­va­S­cri­pt, entre otros).

En la siguiente tabla te mostramos algunos de los ge­ne­ra­do­res más im­po­r­ta­n­tes con base en la in­fo­r­ma­ción de StaticGen:

Cómo desplegar un static site generator con GitHub

En el re­po­si­to­rio de GitHub puedes no solo almacenar, sino también mantener fá­ci­l­me­n­te el código del generador de páginas estáticas. Esto también incluye el contenido, los activos y los scripts re­s­po­n­sa­bles de generar el resultado. Así tienes la opción de vincular tu proyecto al control de versiones y de si­m­pli­fi­car la co­la­bo­ra­ción en el código.

Por último, debes poner los archivos a di­s­po­si­ción de un servidor web y, después de cada ac­tua­li­za­ción del re­po­si­to­rio, repetir el proceso de co­n­s­tru­c­ción de los archivos HTML y CSS. Para ello, también se pueden utilizar servicios de alo­ja­mie­n­to de ge­ne­ra­do­res de páginas estáticas – por ejemplo, Deploy Now – para reducir la co­m­ple­ji­dad de esta tarea. La solución de IONOS actualiza au­to­má­ti­ca­me­n­te el contenido estático en el segundo plano de tu espacio web después de realizar cambios en el di­re­c­to­rio del static site generator. Además, Deploy Now integra un flujo de trabajo con base en GitHub Actions que permiten ver los registros de co­n­s­tru­c­ción di­re­c­ta­me­n­te en la interfaz de usuario de GitHub.

Deploy Now: una nueva forma de crear páginas web

Deploy Now es un servicio de alo­ja­mie­n­to práctico que respalda todos los ge­ne­ra­do­res de páginas estáticas. Además, es el más adecuado para alojar una página de Jamstack. En cuanto a Deploy Now, no solo cuenta con un staging sencillo, sino que también ofrece un ce­r­ti­fi­ca­do SSL/TLS y una pro­te­c­ción contra ataques DDoS.

¿Quieres utilizar tu propio dominio o registrar uno nuevo? La decisión está en tus manos, pero con IONOS puedes comprar y registrar tu dominio ideal. Si deseas obtener más in­fo­r­ma­ción sobre la co­n­fi­gu­ra­ción técnica, tu­to­ria­les y proyectos de inicio, accede a la do­cu­me­n­ta­ción oficial de Deploy Now.