</> HTML5Advent
ENFRESDEITPT

// hosting · Web Platform Advent #12

Alojamiento de sitios estáticos: desplegar un sitio Astro, Vite o HTML

Qué es el alojamiento estático, cómo un CDN sirve tu build y cómo desplegar un sitio Astro, Vite o JAMstack con dominio propio y HTTPS gratis.

La mano de un técnico manipulando un servidor iluminado en azul dentro de un rack de centro de datos

Un sitio estático es un conjunto de archivos pregenerados — HTML, CSS, JavaScript y recursos — que un servidor puede entregar tal cual al navegador, sin ejecutar código en cada petición. Herramientas como Astro, Vite, Eleventy o una carpeta HTML escrita a mano producen este tipo de salida. Alojarlo es más sencillo, más barato y más rápido que alojar una app dinámica, porque no hay nada que ejecutar en el servidor.

Qué significa realmente «alojamiento estático»

Con el alojamiento estático ejecutas un paso de build en local o en CI, y este genera una carpeta de archivos planos (a menudo llamada dist o _site). La única tarea del proveedor es almacenar esos archivos y servirlos por HTTP. No hay PHP, ni proceso de Node, ni base de datos — solo archivos. Eso tiene tres consecuencias directas:

  • Velocidad — los archivos se cachean de forma agresiva y se sirven desde el edge, cerca del visitante.
  • Coste — no hay un servidor encendido permanentemente que pagar; muchos proveedores ofrecen un plan gratuito generoso.
  • Fiabilidad — menos piezas móviles significan menos cosas que puedan fallar bajo carga.

Generar tu carpeta de salida

Cada framework estático expone un comando de build. El resultado es la carpeta que subes o a la que apuntas tu proveedor:

# Astro
npm run build        # genera ./dist

# Vite
npm run build        # genera ./dist

# HTML plano
# sin paso de build — tu carpeta de archivos .html ya es la salida

Para un sitio HTML plano, el «build» es simplemente la carpeta que ya tienes. Para Astro o Vite, el directorio dist es lo que se sirve.

Una fila de servidores negros montados en rack dentro de un centro de datos
Detrás de cada sitio estático hay infraestructura física — racks de servidores y nodos edge de CDN que almacenan y distribuyen tus archivos generados.

Dónde alojar: CDN frente a alojamiento estático clásico

Tienes dos grandes familias de opciones:

Plataformas edge / CDN

Construyen tu proyecto desde un repositorio Git y distribuyen la salida por una red de entrega de contenido. Un CDN almacena copias de tus archivos en muchas ubicaciones del mundo, de modo que un visitante se sirve desde un nodo cercano. Esto reduce la latencia y absorbe los picos de tráfico. Los despliegues suelen activarse con un git push.

Alojamiento clásico / almacenamiento de objetos

También puedes servir un sitio estático desde un alojamiento web tradicional o desde almacenamiento de objetos con un CDN por delante. Encaja bien cuando ya tienes alojamiento para otros proyectos, o cuando prefieres gestionar tú mismo la subida vía FTP/SSH o un script de despliegue.

Conectar un dominio propio

Sea cual sea el proveedor, el cableado del dominio es el mismo en principio. Apuntas los registros DNS de tu dominio al proveedor:

  • Un registro A (o AAAA) que apunte el dominio apex (example.com) a la IP del proveedor, o
  • Un registro CNAME que apunte un subdominio (www.example.com) al nombre de host que facilita el proveedor.

Muchas plataformas también admiten la delegación de servidores de nombres, donde entregas la gestión DNS por completo al proveedor. Una vez propagados los registros, el proveedor sirve tu sitio en tu propio dominio.

HTTPS gratis

HTTPS ya no es opcional — los navegadores marcan el HTTP simple como «no seguro», y muchas API de la plataforma web solo funcionan en un contexto seguro. La buena noticia: prácticamente todos los proveedores estáticos modernos emiten y renuevan los certificados TLS por ti automáticamente, normalmente vía Let's Encrypt. Una vez conectado tu dominio, el certificado se aprovisiona sin ningún paso manual, y las renovaciones ocurren solas.

Referencia rápida

PasoQué haces
BuildEjecutar npm run build (Astro/Vite) o usar tu carpeta HTML
SalidaServir la carpeta dist / _site
ProveedorElegir una plataforma edge/CDN o un alojamiento compatible con estáticos
DominioApuntar los registros A/AAAA o CNAME al proveedor
HTTPSCertificado TLS automático, sin configuración manual

Todo el sentido del alojamiento estático es quitarse de en medio: construyes una vez, haces push y los archivos se sirven rápido desde el edge. Reserva el alojamiento dinámico para las partes de tu proyecto que de verdad necesitan lógica de servidor — y mantén el frontend estático sobre una infraestructura diseñada para entregar archivos con rapidez.