Cómo Desplegar tu Sitio Web Estático de Astro en Bunny.net

Has creado un sitio con Astro. Es rápido, es estático, y ahora necesitas un lugar donde alojarlo que no cueste una fortuna ni te obligue a mantener un servidor.

Yo alojo mi propio sitio de Astro en Bunny.net, y después de meses usándolo en producción puedo decir que la configuración es sencilla una vez que conoces los pasos. Bunny te ofrece almacenamiento edge con replicación global y una CDN con más de 119 puntos de presencia. Subes tus archivos compilados y Bunny los sirve desde la ubicación edge más cercana a cada visitante. Sin VPS que parchear, sin configuración de Nginx que depurar, sin contenedor Docker que vigilar.

Escribí una reseña completa de Bunny.net después de 1 año que cubre los precios de la CDN, Stream y cómo se compara con Cloudflare. Esta guía hace una sola cosa: llevarte paso a paso hasta tener tu sitio estático de Astro desplegado y en línea en Bunny.net.

Si aún no tienes un sitio de Astro, expliqué cómo crear un blog gratis con Astro usando el Bitdoze Astro Theme. La misma configuración se aplica aquí, solo cambia Cloudflare Pages por el alojamiento de Bunny.net.

Qué necesitas antes de empezar

• Un sitio de Astro configurado para salida estática (o haz fork del Bitdoze Astro Theme para seguir la guía)
• Una cuenta de Bunny.net (prueba gratuita de 14 días, sin tarjeta de crédito)
• Node.js instalado en tu máquina
• Un nombre de dominio (opcional, pero recomendado para producción)

Por qué Bunny.net para sitios estáticos

Un breve paréntesis sobre por qué merece la pena hacerlo antes de entrar en la configuración.

Así se compara Bunny.net con otras opciones populares de alojamiento estático:

Cloudflare Pages tiene el mejor nivel gratuito si el coste es tu única preocupación. Pero si quieres replicación de almacenamiento edge, precios predecibles a escala, o ya usas Bunny para la CDN o el vídeo, alojar tu sitio de Astro allí mantiene todo en un solo panel. Yo cambié de Cloudflare Pages a Bunny exactamente por esa razón.

Paso 1: Compila tu sitio de Astro

Asegúrate de que tu proyecto de Astro está configurado para salida estática. Abre astro.config.mjs y confirma que se parece a esto:

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://yourdomain.com',
  // output: 'static' is the default, so you may not see this line at all
});

Astro usa salida estática por defecto, así que a menos que la hayas cambiado explícitamente a server o hybrid, ya lo tienes listo.

Compila el sitio:

npm run build

Esto genera una carpeta dist/ que contiene tu sitio estático completo: archivos HTML, CSS, JavaScript, imágenes, todo. Puedes previsualizarlo localmente para verificar que todo se ve bien:

npm run preview

La carpeta dist/ es lo que desplegaremos en Bunny.net.

Paso 2: Configura la infraestructura en Bunny.net

Necesitas dos cosas del lado de Bunny.net: una storage zone (donde viven tus archivos) y una pull zone (la capa de CDN que los sirve a los visitantes). Ninguna lleva más de un par de minutos.

Crea una storage zone

Interfaz de Bunny.net para añadir una storage zone

1. Inicia sesión en tu panel de Bunny.net
2. Ve a Storage en la barra lateral izquierda
3. Haz clic en Add Storage Zone
4. Rellena los datos:
   • Name: algo como my-astro-site (se convierte en parte de la URL de almacenamiento)
   • Main Region: elige la región más cercana a tu audiencia principal (p. ej., DE para Europa, NY para la costa este de EE. UU.)
   • Replication Regions: añade las regiones donde quieras copias de tus archivos (p. ej., añade NY y SYD si tienes visitantes en EE. UU. y Australia)
   • Tier: el nivel Edge (almacenamiento SSD) merece la pequeña diferencia de precio por el mejor rendimiento

Crea una pull zone

Interfaz de Bunny.net para añadir una pull zone

La pull zone es la configuración de CDN que se sitúa delante de tu storage zone y sirve los archivos a los visitantes.

1. En tu storage zone recién creada, ve a Connected Pull Zones
2. Haz clic en Connect Pull Zone
3. Configúrala:
   • Name: algo como my-astro-site (se convierte en my-astro-site.b-cdn.net)
   • Zones: selecciona las zonas geográficas desde las que quieres servir tráfico (UE, NA, Asia, etc.)

Esa es la infraestructura básica. Tu hostname de pull zone (my-astro-site.b-cdn.net) ya está activo y servirá lo que haya en tu storage zone. Ahora mismo no hay nada, así que vamos a arreglarlo.

Paso 3: Despliega tu sitio

El despliegue sube los archivos de tu carpeta dist/ a Bunny Storage a través de la API de Bunny y luego purga la caché de la CDN. Puedes hacerlo desde tu máquina local o automatizarlo con GitHub Actions.

Obtén tus credenciales

Necesitas cuatro valores del panel de Bunny:

1. Storage Zone Name: el nombre que elegiste al crear la storage zone (p. ej., my-astro-site)
2. Storage Password: ve a Storage → tu storage zone → FTP & API Access → copia la contraseña
3. Pull Zone ID: ve a Pull Zones → tu pull zone → revisa la URL, contiene el ID de la pull zone (o encuéntralo en la configuración de la pull zone)
4. Account API Key: ve a Account Settings → copia la API Key

Ubicación de la API key de Bunny.net

# .env
BUNNY_STORAGE_ZONE=your-storage-zone-name
BUNNY_STORAGE_PASSWORD=your-storage-zone-password
BUNNY_PULL_ZONE_ID=your-pull-zone-id
BUNNY_API_KEY=your-account-api-key

#!/bin/bash
set -euo pipefail

# Load environment variables from .env
if [ ! -f .env ]; then
  echo "Error: .env file not found. Copy .env.example to .env and fill in your credentials."
  exit 1
fi

set -a
source .env
set +a

# Validate required variables
for var in BUNNY_STORAGE_ZONE BUNNY_STORAGE_PASSWORD BUNNY_PULL_ZONE_ID BUNNY_API_KEY; do
  if [ -z "${!var:-}" ]; then
    echo "Error: $var is not set in .env"
    exit 1
  fi
done

DIST_DIR="dist"

# Build the site
echo "Building Astro site..."
npm run build

# Collect file list into a temp file to avoid pipe subshell issues
FILE_LIST=$(mktemp)
trap 'rm -f "$FILE_LIST"' EXIT
find "$DIST_DIR" -type f > "$FILE_LIST"

total=$(wc -l < "$FILE_LIST")
echo "Uploading $total files to Bunny Storage..."

failed=0
count=0
while IFS= read -r file; do
  count=$((count + 1))
  remote_path="${file#$DIST_DIR/}"
  encoded_path=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$remote_path'))")
  printf "  [%d/%d] Uploading: %s" "$count" "$total" "$remote_path"

  http_code=$(curl -s -o /dev/null -w "%{http_code}" -X PUT \
    "https://storage.bunnycdn.com/$BUNNY_STORAGE_ZONE/$encoded_path" \
    -H "AccessKey: $BUNNY_STORAGE_PASSWORD" \
    --data-binary "@$file" || true)

  if [ "$http_code" -eq 201 ] || [ "$http_code" -eq 200 ]; then
    echo " -> OK"
  else
    echo " -> FAILED (HTTP $http_code)"
    failed=$((failed + 1))
  fi
done < "$FILE_LIST"

echo "Upload complete: $((count - failed))/$count succeeded."

if [ "$failed" -gt 0 ]; then
  echo "Warning: $failed file(s) failed to upload."
fi

# Purge CDN cache
echo "Purging CDN cache for pull zone $BUNNY_PULL_ZONE_ID..."
http_code=$(curl -s -o /dev/null -w "%{http_code}" -X POST \
  "https://api.bunny.net/pullzone/$BUNNY_PULL_ZONE_ID/purgeCache" \
  -H "AccessKey: $BUNNY_API_KEY" || true)
if [ "$http_code" -eq 200 ] || [ "$http_code" -eq 204 ]; then
  echo "Cache purged successfully."
else
  echo "Warning: cache purge returned HTTP $http_code"
fi

echo "Deployment complete!"

chmod +x deploy.sh
./deploy.sh

name: Deploy to Bunny.net

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts

      - name: Install dependencies
        run: npm ci

      - name: Build site
        run: npm run build

      - name: Upload to Bunny Storage
        env:
          BUNNY_STORAGE_ZONE: ${{ secrets.BUNNY_STORAGE_ZONE }}
          BUNNY_STORAGE_PASSWORD: ${{ secrets.BUNNY_STORAGE_PASSWORD }}
        run: |
          DIST_DIR="dist"
          total=$(find "$DIST_DIR" -type f | wc -l)
          echo "Uploading $total files to Bunny Storage..."
          count=0
          failed=0
          while IFS= read -r file; do
            count=$((count + 1))
            remote_path="${file#$DIST_DIR/}"
            encoded_path=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$remote_path'))")
            printf "  [%d/%d] Uploading: %s\n" "$count" "$total" "$remote_path"
            http_code=$(curl -s -o /dev/null -w "%{http_code}" -X PUT \
              "https://storage.bunnycdn.com/$BUNNY_STORAGE_ZONE/$encoded_path" \
              -H "AccessKey: $BUNNY_STORAGE_PASSWORD" \
              --data-binary "@$file" || true)
            if [ "$http_code" -ne 201 ] && [ "$http_code" -ne 200 ]; then
              echo "  -> FAILED (HTTP $http_code)"
              failed=$((failed + 1))
            fi
          done < <(find "$DIST_DIR" -type f)
          echo "Upload complete: $((count - failed))/$count succeeded."
          if [ "$failed" -gt 0 ]; then
            echo "Error: $failed file(s) failed to upload."
            exit 1
          fi

      - name: Purge CDN cache
        env:
          BUNNY_PULL_ZONE_ID: ${{ secrets.BUNNY_PULL_ZONE_ID }}
          BUNNY_API_KEY: ${{ secrets.BUNNY_API_KEY }}
        run: |
          http_code=$(curl -s -o /dev/null -w "%{http_code}" -X POST \
            "https://api.bunny.net/pullzone/$BUNNY_PULL_ZONE_ID/purgeCache" \
            -H "AccessKey: $BUNNY_API_KEY")
          if [ "$http_code" -eq 200 ] || [ "$http_code" -eq 204 ]; then
            echo "Cache purged successfully."
          else
            echo "Warning: cache purge returned HTTP $http_code"
          fi

Paso 4: Configura tu dominio personalizado

Tu sitio ya es accesible en your-pull-zone.b-cdn.net, pero probablemente quieras tu propio dominio. Así se hace.

Añade el hostname en Bunny

1. Ve a Pull Zones → tu pull zone → General
2. Baja hasta Hostnames
3. Haz clic en Add Custom Hostname
4. Introduce tu dominio (p. ej., www.yourdomain.com o yourdomain.com)
5. Haz clic en Add

Bunny genera un certificado SSL automáticamente (normalmente en unos minutos).

Configura el DNS en tu registrador

La forma de configurar el DNS depende de si usas un subdominio o el dominio raíz.

Para un subdominio (p. ej., www.yourdomain.com):

Añade un registro CNAME:

Los registros CNAME son el enfoque estándar. Dirigen el tráfico a través de la red Anycast de Bunny de forma eficiente.

Para un dominio raíz (p. ej., yourdomain.com):

Añade un registro ANAME (también llamado ALIAS):

No todos los proveedores de DNS soportan registros ANAME. Cloudflare, DNSMadeEasy y el propio DNS de Bunny sí. Si el tuyo no lo hace, usa un subdominio como www con un CNAME y luego configura una redirección del dominio raíz a www.

Verifica y fuerza el SSL

1. Espera a que el estado del certificado SSL cambie a Active (revisa la sección Hostnames de tu pull zone)
2. Activa Force SSL para redirigir todo el tráfico HTTP a HTTPS
3. Verifica visitando https://yourdomain.com en un navegador

Propagación del DNS

Los cambios de DNS pueden tardar desde unos minutos hasta 48 horas en propagarse globalmente, aunque la mayoría de las actualizaciones se ven en 15-30 minutos. Puedes comprobar el estado de la propagación con herramientas como dig o comprobadores de DNS online.

Paso 5: Configura el caché

Bunny tiene tres funciones de caché que conviene entender para un sitio estático de Astro. Trabajan juntas en capas.

Smart Cache

Smart Cache está activado por defecto en las pull zones aceleradas por Bunny DNS. Decide qué se cachea y qué pasa al origen en cada petición.

Para sitios estáticos, Smart Cache cachea todo lo que tenga una extensión de archivo estático reconocida (imágenes, fuentes, CSS, JS, PDF, etc.) y nunca cachea los tipos MIME text/html, application/json ni application/xml. Es el comportamiento correcto para la mayoría de los sitios de Astro, ya que tus páginas HTML se obtendrán siempre frescas mientras los recursos quedan cacheados.

Si necesitas cachear páginas HTML (Bunny las excluye por defecto), crea una Edge Rule con la acción Override Cache Time dirigida a tus archivos HTML.

Vary Cache

Vary Cache permite a Bunny almacenar diferentes versiones de la misma URL según factores como las capacidades del navegador, el tipo de dispositivo o la ubicación. Las opciones relevantes para un sitio estático de Astro:

Perma-Cache

Perma-Cache es una segunda capa de caché permanente entre la CDN y tu origen. Cuando se produce un fallo de caché en el edge de la CDN, Bunny comprueba primero el almacenamiento de Perma-Cache antes de ir a tu origen. Los archivos que se obtienen del origen se almacenan permanentemente en Perma-Cache en segundo plano.

Esto es diferente del caché normal de la CDN, que caduca según el tiempo o el espacio disponible. Los archivos de Perma-Cache permanecen indefinidamente.

Para activar Perma-Cache:

1. Crea una storage zone separada (distinta de la que contiene los archivos de tu sitio)
2. Ve a Pull Zones → tu pull zone → Caching → Perma-Cache
3. Selecciona la storage zone en el desplegable
4. Guarda la configuración

Paso 6: Añade seguridad con Bunny Shield

Bunny Shield es el servicio de WAF (Web Application Firewall) y protección DDoS de Bunny. Se sitúa delante de tu pull zone y filtra el tráfico malicioso antes de que llegue a tu sitio. Hay un nivel gratuito que cubre lo básico.

Qué incluye el nivel gratuito

El nivel gratuito de Shield incluye 71 reglas WAF integradas y protección DDoS. Bloquea automáticamente los ataques más comunes:

• Intentos de inyección SQL en parámetros de consulta y formularios
• Cargas útiles de cross-site scripting (XSS)
• Ataques de inclusión remota de archivos (RFI)
• Otras amenazas del OWASP Top 10

Para un sitio estático de Astro, Shield es sobre todo defensa contra DDoS y tráfico de bots, ya que no hay código del lado del servidor que explotar. Aun así, reduce el ruido en tus logs y puede bloquear scrapers o patrones de abuso.

Activa Shield

1. Ve a Shield en el panel de Bunny
2. Crea una nueva Shield Zone
3. Conéctala a tu pull zone
4. El nivel gratuito se activa automáticamente

Opcional: rate limiting y reglas WAF personalizadas

Los niveles de pago ($9.50/mes para Advanced, $99/mes para Business) añaden:

• Reglas WAF personalizadas (10 en Advanced, 25 en Business)
• Detección avanzada de bots
• Rate limiting por IP o ruta

Para un blog estático, el nivel gratuito suele ser suficiente. El rate limiting se vuelve relevante si notas que ciertas IP están machacando tu sitio o si quieres bloquear tráfico de determinados países.

Configura Edge Rules para las cabeceras de seguridad

Las Edge Rules permiten añadir cabeceras personalizadas a las respuestas. Añadir cabeceras de seguridad es una mejora rápida, uses Shield o no:

1. Ve a Pull Zones → tu pull zone → Edge Rules
2. Crea reglas para añadir cabeceras:

Desglose de costes

¿Cuánto cuesta esto realmente? Aquí va un escenario realista para un blog típico de Astro:

Menos de $4 al año para un blog con tráfico moderado, incluyendo protección DDoS y WAF. Incluso con 100 GB de ancho de banda mensual estarías pagando aproximadamente $1/mes.

Bunny tiene un mínimo mensual de $1, así que los sitios con muy poco tráfico siguen pagando $1. Pero ese $1 cubre hasta 100 GB de ancho de banda en EU/NA, más de lo que la mayoría de los blogs usan en un mes.

Solución de problemas

Preguntas frecuentes

Para terminar

Tu sitio de Astro ahora funciona sobre la CDN global de Bunny.net con almacenamiento edge, caché y protección DDoS vía Shield. Almacenamiento, CDN, SSL, WAF y entrega global por menos de $1/mes para la mayoría de los blogs.

Si tienes problemas, la sección de solución de problemas anterior cubre los más comunes. El workflow de GitHub Actions del paso 3 es el siguiente paso lógico si quieres despliegues automáticos en cada push a main.