.png)
Introducción
Si te cansa subir archivos manualmente a AWS S3 para publicar un sitio estático, configurar CI CD con GitHub Actions es la mejor solución. En esta guía aprenderás a crear un bucket S3 para hosting estático, un usuario IAM con permisos mínimos, secretos en GitHub para credenciales seguras y un flujo de GitHub Actions que despliega automáticamente con cada push. Al finalizar, cada vez que subas código a GitHub tu sitio se actualizará solo y en segundos.
Qué vas a configurar en pocos pasos: bucket S3 para hosting, política de acceso público, usuario IAM con permisos para S3, secretos de GitHub, workflow de GitHub Actions de despliegue continuo.
Paso 1 Preparar tus archivos
Ten listo tu proyecto con index.html, style.css, imágenes y demás recursos en una carpeta. Súbelo a un repositorio en GitHub.
Paso 2 Crear un bucket S3
Entra a AWS Management Console y abre S3. Crea un bucket con un nombre único por ejemplo portfolio-website. Si deseas servir el sitio de forma pública desmarca la opción Bloquear todo el acceso público y confirma. Crea el bucket.
Paso 3 Activar hosting estático del bucket
Abre el bucket y entra en Propiedades. Busca la sección Alojamiento de sitio web estático y actívala. Establece Index document en index.html y de forma opcional Error document en 404.html. Guarda cambios.
Paso 4 Habilitar acceso público con política de bucket
En la pestaña Permisos agrega una política que permita lectura pública de objetos. Estructura sugerida sin comillas
Version 2012-10-17
Statement
Sid PublicReadGetObject
Effect Allow
Principal *
Action s3:GetObject
Resource arn:aws:s3:::TU_BUCKET/*
Guarda y confirma. Tu sitio ya será accesible públicamente mediante el endpoint de sitio web del bucket.
Paso 5 Crear un usuario IAM para CI CD
Ve a IAM, sección Usuarios, crea un nuevo usuario para despliegue. Continúa al apartado de permisos.
Paso 6 Asignar permisos mínimos
Crea una política personalizada y asígnala al usuario con permisos mínimos para tu bucket. Contenido esencial sin comillas
Version 2012-10-17
Statement
Effect Allow
Action s3:PutObject, s3:DeleteObject, s3:ListBucket
Resource arn:aws:s3:::TU_BUCKET y arn:aws:s3:::TU_BUCKET/*
Guarda la política, asígnala al usuario y crea el usuario.
Paso 7 Revisar y crear
Verifica los detalles y confirma la creación del usuario.
Paso 8 Claves de acceso programático
En Credenciales de seguridad crea una Access key para el usuario. Copia y guarda Access Key ID y Secret Access Key de forma segura. No podrás ver la clave secreta de nuevo.
Paso 9 Agregar secretos en GitHub
En tu repositorio entra a Settings Secrets and variables Actions y crea secretos
AWS_ACCESS_KEY_ID clave del usuario IAM
AWS_SECRET_ACCESS_KEY secreto del usuario IAM
AWS_REGION región del bucket por ejemplo ap-south-1
S3_BUCKET_NAME nombre del bucket
Paso 10 Crear el workflow de GitHub Actions
Crea el archivo .github workflows deploy.yml con un flujo simple de despliegue. Estructura de referencia sin comillas
name Deploy Website to S3
on
push
branches
- main
jobs
deploy
runs-on ubuntu-latest
steps
- name Checkout Repository
uses actions/checkout@v4
- name Configure AWS credentials
uses aws-actions/configure-aws-credentials@v4
with
aws-access-key-id ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region ${{ secrets.AWS_REGION }}
- name Sync files to S3
run aws s3 sync . s3://${{ secrets.S3_BUCKET_NAME }} --delete
Paso 11 Despliegue automático
Haz commit y push a la rama main. GitHub Actions ejecutará el pipeline y subirá los archivos al bucket S3. En pocos segundos tu sitio quedará actualizado.
Paso 12 Acceder a tu app
En S3 abre Propiedades Alojamiento de sitio web estático y copia la URL de Bucket website endpoint. Ábrela en el navegador y verás tu sitio HTML CSS online con despliegues automáticos.
Mejores prácticas y notas
Para mayor seguridad puedes mantener el bucket privado y publicar a través de CloudFront con OAC y políticas más estrictas. Considera configurar invalidaciones de CloudFront en el workflow cuando uses CDN. Mantén el principio de menor privilegio y limita la política IAM al bucket concreto. Si usas frameworks de build agrega un paso de build antes del sync y sincroniza solo la carpeta de salida por ejemplo dist o build.
Conclusión
Con este pipeline de CI CD tendrás despliegues rápidos, sin tareas manuales y con un flujo profesional como los equipos DevOps modernos. Ideal para portfolios, landings, documentación y micrositios, además de integrarse fácilmente con servicios cloud AWS y Azure.
Cómo te ayuda Q2BSTUDIO
En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida, especialistas en inteligencia artificial, ciberseguridad, servicios cloud AWS y Azure, servicios de inteligencia de negocio y power bi, automatización de procesos, agentes IA e IA para empresas. Si quieres llevar tu infraestructura al siguiente nivel con prácticas DevOps, hardening de seguridad y observabilidad, nuestro equipo puede diseñar una solución de software a medida optimizada para tu negocio. Conoce cómo modernizamos infraestructuras y habilitamos escalado con nuestro equipo cloud en el enlace de servicios cloud AWS y Azure aquí servicios cloud aws y azure. Y si deseas incorporar modelos de inteligencia artificial, asistentes y agentes IA en tus procesos, descubre nuestras capacidades para IA empresarial aquí inteligencia artificial para empresas.
Palabras clave para ayudarte a encontrar este contenido y mejorar tu posicionamiento web aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi, automatización de procesos y DevOps.
Título sugerido del proyecto Deploy Static HTML CSS Website to AWS S3 with CI CD GitHub Actions
.jpg)
.jpg)