Hosting para webs estáticas: Astro, Hugo, Eleventy

1. Astro — El mejor para sitios complejos

Astro destaca porque permite mezclar componentes React, Vue, Svelte en la misma página sin enviar JavaScript innecesario. Genera HTML puro por defecto y solo carga JS cuando lo necesitas. Ideal para sitios que mezclan contenido estático con interactividad selectiva.

• Lenguaje: HTML <+> JavaScript/TypeScript
• Curva de aprendizaje: Media (si conoces Node.js y componentes web)
• Mejor para: Sitios con contenido mixto, documentación técnica, landing pages interactivas
• Comunidad: Crecimiento explosivo, muy activa en GitHub

2. Hugo — El más rápido en compilación

Hugo está escrito en Go, lo que lo convierte en el SSG más rápido compilando. Genera 10,000 páginas en segundos. Usa templates de Go, Markdown y un lenguaje de templating simple. Perfecto para blogs masivos y contenido orientado a artículos.

• Lenguaje: Go templates <+> Markdown
• Curva de aprendizaje: Baja (muy accesible para principiantes)
• Mejor para: Blogs, documentación, sitios de contenido puro
• Velocidad: Compilación más rápida del mercado

3. Eleventy (11ty) — Más flexible

Eleventy es extremadamente flexible: puedes usar cualquier lenguaje de templating (Nunjucks, Liquid, Handlebars, EJS, etc.) sin estarlo forzado. Compila rápido y ofrece máximo control. Comunidad pequeña pero muy apasionada.

• Lenguaje: JavaScript <+> Múltiples templating engines
• Curva de aprendizaje: Media-Alta (requiere configuración manual)
• Mejor para: Desarrolladores que quieren máximo control, sitios personalizados
• Flexibilidad: La más alta entre los SSG

4. Next.js 15 — Para aplicaciones híbridas

Next.js no es "solo" un SSG, pero con Static Generation (SSG) e ISR (Incremental Static Regeneration) en versión 15, permite generar páginas estáticas con regeneración dinámica. Mejor para proyectos que necesitan tanto contenido estático como dinámico.

• Lenguaje: React <+> TypeScript
• Curva de aprendizaje: Alta (requiere React)
• Mejor para: Aplicaciones Next.js que quieren también servir estáticamente
• Overengineering: Muchas características que no necesitarás para un blog puro

5. Gatsby 5 — Para ecommerce estático

Gatsby es robusto para sitios que conectan a múltiples sources de datos (CMS, ecommerce APIs, bases de datos). Ofrece GraphQL integrado para queries complejas y plugin ecosystem enorme. Compilación más lenta que Hugo/Eleventy.

• Lenguaje: React <+> GraphQL
• Curva de aprendizaje: Alta (requiere React y GraphQL)
• Mejor para: Ecommerce estático, portales de datos, sitios multicanal
• Nota: Comunidad más pequeña que en años anteriores (competencia con Astro)

6. Jekyll — El clásico

Jekyll sigue siendo la opción por defecto en GitHub Pages. Escrito en Ruby, es muy simple para blogs básicos. Comunidad enorme, templates predefinidas, integración perfecta con Git. Menos moderno que Astro/Hugo, pero funciona.

• Lenguaje: Ruby <+> Liquid templates
• Curva de aprendizaje: Muy baja
• Mejor para: Blogs simples en GitHub Pages, portfolios académicos
• Rendimiento: Compilación lenta en sitios grandes

Cloudflare Pages — La opción ganadora

Cloudflare Pages destaca porque integra build, hosting, CDN, DNS y edge computing en una sola plataforma. Conecta directo a GitHub, compila automáticamente en cada push y despliega globalmente en segundos. Incluye SSL gratuito, subdominio gratuito, y precios muy competitivos para dominios custom.

• Precio: Gratis hasta 500 deploys/mes; $20/mes para más
• Mejor para: Astro, Next.js, Hugo, cualquier SSG
• Ventaja killer: Cloudflare Workers (funciones serverless gratuitas) + edge computing
• Inconvenientes: Menos documentación que Vercel, builds limitados en plan gratuito

Vercel — La opción Next.js nativa

Vercel es la empresa detrás de Next.js, así que ofrece integración perfecta. Deploy automático, edge functions incluidas, analytics integrado. Muy fácil para principiantes. El precio puede escalar rápido si necesitas muchas edge functions.

• Precio: Gratis (pero limitado); $20/mes para features enterprise
• Mejor para: Next.js, Svelte, nuxt (frameworks JavaScript)
• Ventaja: Experiencia más pulida, analytics real-time
• Inconvenientes: Pricing confuso, edge functions caras para tráfico alto

Netlify — La opción equilibrada

Netlify fue pionera en el hosting de SSG. Ofrece deploy automático, Netlify Forms, edge functions (Netlify Edge). Interfaz muy intuitiva, comunidad grande. Precios similares a Vercel, pero con mejor documentación.

• Precio: Gratis básico; $19/mes para más control
• Mejor para: Cualquier SSG (sin preferencia)
• Ventaja: Interfaz intuitiva, comunidad activa, Netlify Forms
• Inconvenientes: Menos features edge que Cloudflare

GitHub Pages — Gratis con limitaciones

GitHub Pages es totalmente gratis si el repositorio es público. Funciona bien con Jekyll integrado. No hay build automático avanzado, pero es suficiente para blogs simples.

• Precio: Gratis (siempre)
• Mejor para: Jekyll, portfolios académicos, documentación interna
• Ventaja: Integración perfecta con GitHub, sin costes
• Inconvenientes: Sin edge functions, sin analytics, repositorio debe ser público

Desplegar Astro en Cloudflare Pages

1. Crea repositorio GitHub: Push de tu proyecto Astro a GitHub
2. Conecta Cloudflare Pages: Ve a pages.cloudflare.com, selecciona "Connect Git Repository", autoriza GitHub
3. Configura build: Project name = tu dominio (ej: astro-blog), Framework = Astro, Build command = npm run build, Build output directory = dist
4. Env variables: Si necesitas secrets, agrégalos en la sección Environment
5. Deploy automático: Cada push a main dispara un build automático. El sitio vive en [proyecto].pages.dev
6. Dominio custom: En "Custom domains", apunta tu DNS a Cloudflare nameservers

💡 Tip: Usa Cloudflare Workers + Astro API routes para lógica serverless (sin extra cost)

Desplegar Hugo en Netlify

1. Crea repositorio GitHub: Push de tu sitio Hugo
2. Conecta Netlify: netlify.com → "New site from Git" → autoriza GitHub
3. Configura build: Build command = hugo, Publish directory = public
4. Netlify.toml (opcional): Crea un archivo netlify.toml en root para config avanzada:

   [build]
     command = "hugo"
     publish = "public"
   
   [build.environment]
     HUGO_VERSION = "0.125.0"

5. Deploy: Netlify auto-publica en [proyecto].netlify.app. Cada push dispara rebuild

Desplegar Eleventy en GitHub Pages

1. Configura .eleventy.js: Asegúrate que output dir = "_site"
2. Crea GitHub Actions workflow: En .github/workflows/build.yml:

   name: Build << Eleventy
   
   on:
     push:
       branches: [ main ]
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
         - uses: actions/setup-node@v3
           with:
             node-version: '20'
         - run: npm ci
         - run: npm run build
         - uses: actions/upload-pages-artifact@v2
           with:
             path: '_site'
   
     deploy:
       runs-on: ubuntu-latest
       needs: build
       permissions:
         pages: write
         id-token: write
       steps:
         - uses: actions/deploy-pages@v2

3. Habilita GitHub Pages: Settings → Pages → Build << deployment = GitHub Actions
4. Deploy automático: Cada push a main ejecuta workflow y publica en [usuario].github.io