Generadores de sitios estáticos

Cómo Hugo, Jekyll, Eleventy, Hexo, Gatsby y Astro precompilan cada página en HTML estático, evitando la cola de renderizado de JS de Google para que el contenido sea indexable en la primera petición.

Publicado por primera vez: 26 jun 2026 · Última actualización: 14 ago 2026 · Avanzado
Idiomas
1 señal de evidencia en esta página

Un generador de sitios estáticos (SSG) compila cada página en HTML terminado en tiempo de compilación, así que el contenido ya está en el HTML sin procesar antes de que un rastreador lo pida siquiera: sin cola de renderizado de JavaScript, sin el retraso de la «segunda oleada» (Wave 2), indexable de inmediato. Esa es la ventaja principal de SEO frente a los frameworks del lado del cliente. Hugo, Jekyll, Eleventy, Hexo, Gatsby y Astro la comparten; se diferencian en el lenguaje, en cuánto JS envían al navegador y en las herramientas integradas de imágenes y sitemaps. La única pega real es la frescura de la compilación: un sitio estático solo está tan actualizado como su última compilación, así que los cambios de contenido necesitan una recompilación y un nuevo despliegue para llegar a los motores de búsqueda. Construí este sitio (y patrickstox.com) con Astro exactamente por estas razones.

TL;DR — Un SSG prerrenderiza cada ruta a HTML estático en tiempo de compilación, de modo que el contenido existe en la respuesta antes de la primera petición de un rastreador: sin Web Rendering Service, sin cola de renderizado, sin el retraso de la «segunda oleada» (Wave 2). Es la mayor ventaja de indexabilidad que se le puede dar a un sitio. Los SSG se diferencian de los frameworks de CSR (que construyen la página en el navegador) y de los metaframeworks (que pueden hacer SSR por petición). Los seis de este clúster —Hugo, Jekyll, Eleventy, Hexo, Gatsby, Astro— entregan HTML estático; varían en lenguaje, carga de JS y herramientas integradas de sitemap e imágenes. El verdadero modo de fallo no es el renderizado, sino la frescura de la compilación: un sitio estático solo está tan actualizado como su última compilación, así que el contenido modificado que no dispara una recompilación sirve en silencio HTML obsoleto a los motores de búsqueda. Este sitio lo tengo montado sobre Astro exactamente por este conjunto de compensaciones.

Qué significa realmente «estático»

Un generador de sitios estáticos pasa el contenido y las plantillas por un paso de compilación y emite una carpeta de HTML, CSS y recursos terminados. La parte crucial para el SEO es cuándo se produce el HTML: en tiempo de compilación, una vez, para todo el mundo, no por petición ni en el navegador. La guía de JavaScript de Google describe el rastreo, el renderizado y la indexación como etapas de procesamiento distintas. Un SSG saca el renderizado del lado del cliente de la ruta crítica para el contenido que genera, porque el HTML ya está completo. Evidence for this claim Google processes JavaScript through crawling, rendering, and indexing, while pre-rendered HTML is present before client execution. Scope: Google Search JavaScript processing; indexing is not guaranteed. Confidence: high · Verified: Google: JavaScript SEO basics

Por eso los sitios estáticos son la arquitectura más segura posible para conseguir la indexación. El contenido está en el primer byte de la respuesta. No hay brecha de paridad entre el HTML sin procesar y el renderizado, ni dependencia de que el renderizador funcione, ni peculiaridades del Chrome sin estado que haya que tener en cuenta al diseñar.

SSG frente a renderizado del lado del cliente frente a metaframeworks

Tres arquitecturas, tres momentos distintos en los que el HTML pasa a existir:

  • Generación de sitios estáticos (SSG). El HTML se compila una vez, en tiempo de compilación, antes de cualquier petición. Se sirve como archivos planos (a menudo desde una CDN). El contenido está en el HTML sin procesar. Es el caso de Hugo, Jekyll, Eleventy y Hexo, y también de Gatsby y Astro en su modo estático por defecto.
  • Renderizado del lado del cliente (CSR). El servidor envía un armazón mínimo; JavaScript construye la página en el navegador en tiempo de petición o ejecución. El contenido depende de que el renderizado funcione. Es el caso de una SPA de React o Vue con CSR por defecto, la configuración más arriesgada para el SEO (véase SEO en JavaScript).
  • Metaframeworks (SSR / híbrido). Frameworks como Next.js, Nuxt y SvelteKit pueden renderizar HTML por petición en el servidor (SSR), prerrenderizar algunas rutas (SSG) o mezclar ambas cosas. El contenido está en el HTML, pero se produce en tiempo de petición, lo que añade un costo de servidor y una latencia que no se tienen con un SSG puro.

La línea se difumina en los extremos: a veces se llama metaframeworks a Gatsby y Astro porque están basados en componentes y pueden hacer más que emitir archivos planos. Pero en su modo habitual son generadores estáticos, y así es como conviene tratarlos para el SEO. El modelo mental que importa: cuanto antes exista el HTML, menos cosas pueden salir mal antes de que un rastreador lo vea. El SSG es el más temprano.

Los seis generadores, comparados

Los seis producen HTML estático indexable. Así se diferencian en los ejes que de verdad afectan a una decisión de SEO:

GeneradorLenguaje / baseJS enviado al navegadorSitemapOptimización de imágenesIdeal para
HugoGoNinguno por defectoIntegrado (sitemap.xml autogenerado)Procesamiento de imágenes integrado (redimensionado, WebP)Sitios de contenido grandes que necesitan compilaciones rápidas
JekyllRubyNinguno por defectoPlugin (jekyll-sitemap)Plugins (jekyll-picture-tag, etc.)Blogs en GitHub Pages; el SSG original
Eleventy (11ty)JavaScript (Node)Ninguno por defectoPlantilla/plugin (se genera manualmente)Plugin (@11ty/eleventy-img)Personas desarrolladoras de JS que quieren salida sin JS y flexibilidad
HexoJavaScript (Node)Ninguno por defecto (depende del tema)Plugin (hexo-generator-sitemap)PluginsBlogs, sobre todo en el ecosistema Node/asiático
GatsbyJavaScript / ReactBundle de React (se hidrata)Plugin (gatsby-plugin-sitemap)Integrado (gatsby-plugin-image, potente)Equipos de React que quieren un sitio estático basado en datos
AstroJS/TS, cualquier framework de UINinguno por defecto (solo islas)Oficial (@astrojs/sitemap)Integrado (astro:assets)Sitios de contenido que quieren componentes sin el peaje de JS

Algunas cosas que conviene destacar de esa tabla:

  • La carga de JS es el diferenciador relacionado con el SEO. Hugo, Jekyll, Eleventy y Hexo prácticamente no envían JavaScript salvo que se añada. Gatsby rehidrata un bundle completo de React en el cliente: sigue siendo indexable (el HTML es estático), pero tiene un costo en Core Web Vitals que los demás no tienen. Astro se queda a medio camino con la arquitectura de islas: HTML estático por defecto y JavaScript solo para los componentes interactivos concretos (las «islas») que lo necesitan.
  • La velocidad de compilación escala de forma distinta. Hugo (Go) es famoso por su rapidez y maneja decenas de miles de páginas sin problema. Los generadores basados en Node son más lentos a gran escala, y los tiempos de compilación de Gatsby han sido históricamente su mayor queja.
  • Los sitemaps y la optimización de imágenes están resueltos casi en todas partes, pero Hugo y Astro son los que más ofrecen de serie, mientras que Jekyll, Eleventy y Hexo se apoyan en plugins (bien mantenidos).
  • La cadencia de versiones de Gatsby se ha ralentizado de forma apreciable. El proyecto no está archivado y sigue publicando parches, pero, a fecha de julio de 2026, su repositorio de GitHub muestra solo un puñado de commits en los últimos 90 días y una versión menor desde febrero. Eso conviene sopesarlo frente a una opción con desarrollo más activo si hoy se está eligiendo un generador, además del costo de hidratación y CWV mencionado arriba.

Por qué construí esto sobre Astro

Construí este sitio —y patrickstox.com— con Astro, y el razonamiento sale directamente de esta página. Quería escribir en Markdown/MDX con componentes de verdad, pero no quería pagar el peaje de JavaScript en cada página solo por tenerlos. El comportamiento por defecto de Astro es cero JS del lado del cliente: las páginas que está leyendo se entregan como HTML estático, y el único JavaScript que se carga es el de las pocas piezas interactivas (como las pestañas de lentes y el cuestionario). Eso me da la indexabilidad de un SSG clásico y buenas Core Web Vitals, sin renunciar a una experiencia de autoría basada en componentes. Si necesitara una velocidad de compilación fulminante en un conjunto de contenido enorme y sin interactividad, Hugo sería la elección obvia; para una capa de datos en React, Gatsby. Para esto —un sitio con mucho contenido y unos pocos toques interactivos— Astro es la compensación correcta.

La única pega real: la frescura de la compilación

Todo lo anterior es la parte buena. Aquí está la pega que pilla a la gente.

Un sitio estático solo está tan actualizado como su última compilación. El HTML es una instantánea congelada en tiempo de compilación. Los cambios de precio, las correcciones, las publicaciones y las actualizaciones de títulos no llegan a los motores de búsqueda hasta que se recompila y se vuelve a desplegar. No hay un servidor en vivo que ensamble la página desde una base de datos en cada petición, así que no hay nada que recoja el cambio automáticamente. Evidence for this claim Static build output remains a snapshot until the project is rebuilt and redeployed. Scope: Astro static build workflow as a representative example. Confidence: high · Verified: Astro: Build and deploy

En la práctica, esto significa:

  • Las ediciones de contenido deben disparar una compilación. Cuando el contenido se gestiona en un CMS headless o en Git, un webhook debe iniciar el despliegue al publicar. Un proceso de compilación exclusivamente manual es la forma en que se cuelan en el índice precios obsoletos y errores «fantasma» de página no encontrada.
  • Los datos que cambian con frecuencia son incómodos. Inventario, precios, contadores en vivo: si cambian más rápido de lo que se recompila, la copia estática se queda atrás. Ahí es donde las compilaciones incrementales, las recompilaciones programadas o un enfoque híbrido (un metaframework con SSR/ISR para las rutas volátiles) se ganan su sitio.
  • Las páginas sensibles al tiempo necesitan una cadencia. Si «las ofertas de hoy» se hornea en tiempo de compilación, la compilación tiene que ejecutarse al menos a diario, o la página miente.

Nada de esto es un impedimento insalvable: es una disciplina. La razón misma por la que los SSG son excelentes para el SEO (el HTML decidido de antemano) es la misma razón por la que hay que ser deliberado a la hora de volver a decidirlo cuando cambia el contenido.

Adónde ir después: el clúster de generadores de sitios estáticos

Este hub es el mapa. Cada generador de abajo tiene su propio análisis en profundidad: lenguaje, carga de JS, herramientas de sitemap e imágenes, las pegas de SEO específicas de cada framework y cómo mantener frescas las compilaciones:

  • SEO para Hugo — impulsado por Go, sin JS, compilaciones vertiginosas; el sitemap autogenerado, el procesamiento de imágenes integrado y la gestión de conjuntos de contenido enormes.
  • SEO para Jekyll — el SSG original y la opción por defecto de GitHub Pages; jekyll-seo-tag, jekyll-sitemap y la limitación de los plugins en GitHub Pages.
  • SEO para Eleventy (11ty) — basado en JavaScript, salida sin JS; generación de sitemaps desde plantillas y eleventy-img para imágenes responsive.
  • SEO para Hexo — el generador de blogs de Node; plugins de sitemap y feeds, JS del tema e higiene de permalinks y canónicas.
  • SEO para Gatsby — generación estática basada en React; la compensación entre hidratación y CWV, gatsby-plugin-image, gatsby-plugin-sitemap y el abastecimiento de datos en tiempo de compilación.
  • SEO para Astro — cero JS por defecto, arquitectura de islas, @astrojs/sitemap, astro:assets, View Transitions y el comportamiento de reserva de las Server Islands.

Todos los temas anteriores están anidados bajo este hub y también aparecen en la barra lateral.

Para el contexto más amplio —cómo renderiza Google el JavaScript, los modos de fallo de paridad e interacción y qué modo de renderizado elegir cuando se necesita JS— puede consultarse el hub principal de SEO en JavaScript.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.