Cómo configurar Azure Blob Static Website: paso a paso

João Barros 04 de October de 2026 5 min de lectura

Este tutorial muestra cómo publicar un sitio estático sencillo usando Azure Blob Storage Static Website. Es una solución ligera y económica para alojar landing pages, single-page apps (SPA) o documentación técnica sin necesitar una Web App, servidor o CDN compleja. Aquí explico por qué cada paso y doy comandos prácticos para tener el sitio en línea en pocos minutos.

Requisitos previos

Cuenta Azure con permisos para crear recursos (Subscription Contributor o superior).
Azure CLI instalada y autenticada (az login).
Un pequeño sitio estático local — normalmente al menos index.html y 404.html; por ejemplo un directorio ./site con 5–20 archivos (HTML, CSS, JS, imágenes).
Opcional: Azure Storage Explorer para inspeccionar visualmente el contenedor $web.

Por qué es útil: Azure Blob Static Website sirve archivos directamente desde un contenedor especial ($web). No hay servidores en ejecución, el servicio escala automáticamente con el tráfico y el coste es principalmente almacenamiento + egress. Para un sitio estático sencillo, se pueden tener costes de pocos céntimos al mes con bajo tráfico.

Paso 1: Crear una Storage Account

Creamos una Storage Account del tipo StorageV2 (general-purpose v2) con replicación Standard_LRS. El nombre de la Storage Account debe ser único globalmente y solo caracteres alfanuméricos minúsculos.

az group create --name rg-staticweb --location northeurope
az storage account create --name mystaticacct12345 --resource-group rg-staticweb --location northeurope --sku Standard_LRS --kind StorageV2

Notas prácticas: elige northeurope si estás en Europa para latencias más bajas. Standard_LRS es una buena elección inicial (coste reducido); si necesitas mayor resiliencia puedes usar GRS/RA-GRS. Un ejemplo real: una pequeña landing page con 1 MB de contenido distribuido en 20 archivos suele tener costes de almacenamiento inferiores a 0,10 €/mes, más el coste de egress según las visitas.

Paso 2: Habilitar Static Website en la Storage Account

Activa la funcionalidad static website y define los documentos de index y 404. Esto le dice al servicio que mapee las peticiones a la raíz a index.html y gestione errores con 404.html.

az storage account update --name mystaticacct12345 --resource-group rg-staticweb --set allowBlobPublicAccess=true

# Activar static website y definir archivos por defecto
az storage blob service-properties update --account-name mystaticacct12345 --static-website --index-document index.html --404-document 404.html

Explicación: allowBlobPublicAccess=true permite servir los blobs públicamente; si prefieres restricción, usa un SAS o una CDN con origin privada. Tras activar, Azure crea automáticamente el contenedor $web.

Paso 3: Subir los archivos del sitio

Sube los archivos de tu directorio local al contenedor $web. El ejemplo usa la connection string, pero puedes usar un SAS token o SharedKey.

CONN=$(az storage account show-connection-string --name mystaticacct12345 --resource-group rg-staticweb -o tsv)

# Subir todos los archivos del directorio ./site
az storage blob upload-batch --connection-string "$CONN" --destination '$web' --source ./site

# Verificar que los blobs fueron subidos
az storage blob list --connection-string "$CONN" --container-name '$web' -o table

Ejemplo práctico: si tienes 12 archivos, el comando upload-batch los enviará en paralelo. Si un archivo falla por problemas de red, repite la subida del archivo en cuestión.

Paso 4: Configurar MIME types y caching (opcional)

Para asegurar que los navegadores interpreten correctamente CSS y JS y para optimizar el rendimiento, define Content-Type y Cache-Control. Un ejemplo habitual es definir un cache largo para archivos estáticos versionados (hash en el nombre) y cache corto para index.html.

az storage blob upload --connection-string "$CONN" --container-name '$web' --file ./site/styles.css --name styles.css --content-type 'text/css' --content-cache-control 'public, max-age=31536000'

# Para el index.html (cache corto)
az storage blob upload --connection-string "$CONN" --container-name '$web' --file ./site/index.html --name index.html --content-type 'text/html' --content-cache-control 'no-cache, must-revalidate'

Regla práctica: usa max-age=31536000 (1 año) para assets estables y no-cache para archivos que pueden cambiar sin cambiar el nombre.

Paso 5: Obtener la URL pública y configurar dominio personalizado (opcional)

Obtén el endpoint público creado y prueba el sitio. Si quieres dominio personalizado con HTTPS, considera usar Azure CDN o Azure Front Door porque el endpoint static website no soporta directamente TLS para dominios personalizados.

az storage account show --name mystaticacct12345 --resource-group rg-staticweb --query "primaryEndpoints.web" -o tsv
# Ejemplo de output: https://mystaticacct12345.z6.web.core.windows.net/

Para dominios personalizados: crea un registro CNAME que apunte al endpoint y valida el dominio. Para HTTPS automático y mejores caches, implementa Azure CDN o Front Door (puede costar desde unos euros/mes dependiendo del tráfico).

Verificar el resultado

Accede a la URL del endpoint; deberías ver el contenido de index.html. Prueba una ruta inexistente y confirma que aparece 404.html. Si no encuentras archivos, verifica que estén en el contenedor $web con az storage blob list y confirma el Content-Type. Error común: 403 Forbidden — eso indica que allowBlobPublicAccess está desactivado o usaste credenciales inválidas; solución: activa la opción o usa un SAS válido.

Conclusión

Ahora tienes un sitio estático corriendo en Azure Blob Static Website. Es rápido de configurar y muy adecuado para proyectos sencillos. Próximos pasos sugeridos: automatiza el deploy con GitHub Actions (hacer build y ejecutar los mismos comandos CLI), añade dominio personalizado con Azure CDN para HTTPS, o define políticas de cache finas para reducir latencia. Consejo final: siempre confirma que los archivos están en el contenedor '$web' y que los Content-Type son correctos para evitar problemas de renderizado en el navegador.