¡Como un náufrago construyendo su refugio! Crea tu sitio web estático en AWS S3

Wed Feb 26 2025

Desarrollo

¡Hola Chiquis!👋🏻 ¿Alguna vez te has sentido como Tom Hanks en El Náufrago, varado en una isla desierta y sin herramientas para comunicarte con el mundo? ¡Pues hoy te convertirás en un “náufrago digital” y construirás tu propio refugio en la web: un sitio web estático alojado en AWS S3!

Imagina que estás en una isla desierta, solo, como Chuck Noland el protagonista de El Náufrago. Tienes una idea de cómo sobrevivir, pero no sabes por dónde empezar. ¿Qué hacer? En este caso, ¡lo que necesitas es construir un refugio! Pero, en lugar de usar ramas y hojas, usaremos AWS S3 para crear tu “sitio web estático”, el refugio perfecto para tu presencia online.

¿Qué es AWS S3? Imagina que AWS S3 es como una isla paradisíaca donde puedes almacenar todos tus archivos: imágenes, videos, documentos, ¡lo que se te ocurra! Es un servicio de almacenamiento en la nube de Amazon Web Services (AWS) que te permite guardar tus datos de forma segura y escalable.

Paso 1: Configurar tu Cuenta en AWS Lo primero que necesitas es una cuenta de AWS. Si no tienes una, ve a AWS y regístrate. AWS ofrece una capa gratuita que te permitirá experimentar sin coste.

Paso 2: Crear un Bucket S3 Un bucket S3 es como el “refugio” de tu sitio web en la isla. Aquí es donde almacenarás todos tus archivos web (HTML, CSS, JavaScript, imágenes).

Ve a la consola de administración de AWS y navega a S3.
Haz clic en “Create bucket”.
Elige un nombre único para tu bucket (esto es como ponerle nombre a tu isla). Ejemplo: mi-sitio-web-123.
Asegúrate de seleccionar la región más cercana a tus usuarios para optimizar la carga de tu sitio.
Asegúrate de que “Block all public access” esté deshabilitado. Necesitamos que el contenido sea accesible públicamente.

Cuando termines, ¡haz clic en “Create” y ya tienes tu refugio (bucket) listo para recibir tu sitio! Ejemplo:

# Usando AWS CLI para crear un bucket S3
aws s3 mb s3://mi-bucket-web --region us-west-2

Paso 3: Subir tus Archivos al Bucket Ahora que tienes tu refugio, necesitas llenarlo con cosas esenciales (tus archivos web).

Crea tu sitio web en tu máquina local. Si estás empezando, algo simple como un archivo index.html y un style.css es perfecto.

Ejemplo index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bienvenido a mi sitio web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>¡Hola desde mi isla!</h1>
    <p>Este es un sitio web estático alojado en AWS S3. ¡Bienvenidos!</p>
</body>
</html>

Ejemplo style.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    color: #333;
    text-align: center;
}

h1 {
    color: #1e90ff;
}

Sube estos archivos a tu bucket S3. Regresa a tu bucket de S3 y haz clic en “Upload” para subir tus archivos (index.html, style.css, etc.).

Ejemplo:

# Subir archivos al bucket S3
aws s3 cp index.html s3://mi-bucket-web/
aws s3 cp styles.css s3://mi-bucket-web/
aws s3 cp script.js s3://mi-bucket-web/

Asegúrate de hacer clic en “Grant public read access” para que tus archivos sean accesibles públicamente.

Ahora, ¡tu sitio web empieza a tomar forma! Has subido tus archivos al refugio (S3), ahora es momento de ponerlos a funcionar.

Paso 4: Configurar el Bucket para Alojamiento de Sitios Web Estáticos

Haz de tu refugio un hogar acogedor configurando tu bucket para el alojamiento de sitios web estáticos.
En la consola de S3, selecciona tu bucket.
Ve a la pestaña “Properties” y selecciona “Static website hosting”.
Marca la opción “Use this bucket to host a website”.
Introduce el nombre del archivo de tu página de inicio, generalmente index.html.

Paso 5: Permisos y Políticas de Bucket Necesitamos que nuestro hogar esté abierto a visitantes (permitir acceso público).

Navega a la pestaña “Permissions” en tu bucket.
Selecciona “Bucket Policy” y añade la siguiente política:

Ejemplo:
{
    "Version": "2025-02-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mi-bucket-web/*"
        }
    ]
}

Paso 6: Hazlo Real (¡Accede a tu Sitio Web!) Finalmente, después de tu arduo trabajo, el sitio web estará disponible en una URL de AWS. Para acceder a él, solo necesitas:

Regresar a la sección Static website hosting de tu bucket.
Aquí verás la URL de tu sitio web: algo como http://mi-sitio-web-123.s3-website-us-east-1.amazonaws.com.

¡Listo! Tu sitio web estático ahora es accesible desde cualquier parte del mundo, tal como el protagonista de El Náufrago finalmente encuentra la forma de enviar un mensaje de ayuda.

¡Felicidades! Tu refugio digital está listo. Ahora puedes acceder a tu sitio web a través del endpoint proporcionado en la configuración de alojamiento estático.

Bonus: Usar un Dominio Personalizado Si quieres que tu refugio tenga una dirección más amigable (un dominio personalizado):

Compra un dominio a través de un registrador de dominios.
Configura tu bucket S3 para que tenga el mismo nombre que tu dominio.
Usa AWS Route 53 para gestionar tu dominio y redirigirlo a tu bucket.

Ejemplo:

# Crear un bucket con el nombre de tu dominio
aws s3 mb s3://www.midominio.com --region us-west-2

# Configurar la política del bucket para hacer público el acceso
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.midominio.com/*"
        }
    ]
}

¿Por qué usar AWS S3 para tu sitio web? Al igual que un náufrago necesita un refugio para protegerse de los elementos, tu sitio web necesita un lugar seguro y confiable para alojarse. AWS S3 te ofrece:

Almacenamiento ilimitado: ¡Como la isla de “El Náufrago”, AWS S3 te ofrece espacio de almacenamiento prácticamente ilimitado para tu sitio web!
Alta disponibilidad: ¡Tu sitio web estará disponible para los visitantes en cualquier momento, como si tu refugio estuviera siempre abierto!
Bajo costo: ¡Alojar tu sitio web en AWS S3 es más económico de lo que piensas, como si construir tu refugio no te costara nada!
Facilidad de uso: ¡AWS S3 es fácil de usar, como si construir tu refugio fuera un juego de niños!

Consejos para un “refugio web” de lujo

Utiliza un nombre de dominio personalizado: ¡Dale a tu sitio web un nombre fácil de recordar, como si estuvieras nombrando tu isla!
Configura un certificado SSL: ¡Protege tu sitio web con HTTPS para que los visitantes se sientan seguros, como si estuvieras construyendo un refugio a prueba de intrusos.
Utiliza un CDN: ¡Acelera la carga de tu sitio web para que los visitantes no tengan que esperar, como si estuvieras construyendo un refugio con acceso a Internet de alta velocidad!

Recursos: Documentación de AWS S3

Conclusión A lo largo de este proceso, al igual que Tom Hanks en El Náufrago, comenzaste con una idea simple pero poderosa. Usando AWS S3, creaste un refugio (tu bucket), lo llenaste con tus archivos (tu sitio web), lo hiciste visible al mundo y, finalmente, aseguraste que todo funcione correctamente. Con estos pasos, has convertido un proceso que parecía complicado en algo completamente alcanzable, y ahora tienes un sitio web estático alojado en la nube.

¡Gracias por leer! 👇🏻 🚀 ¿Te ha gustado? Comparte tu opinión. Artículo completo, visita: https://community.aws/@orlidun https://lnkd.in/ewtCN2Mn https://lnkd.in/eAjM_Smy 👩💻 https://lnkd.in/eKvu-BHe https://dev.to/orlidev https://lnkd.in/ecHHabTD https://pin.it/2BuZ9N4n8 https://linktr.ee/orlidevs ¡No te lo pierdas!

Referencias: Imágenes creadas con: Copilot ( microsoft.com )

#PorUnMillóndeAmigos #MakeYourselfVisible

¡Como un náufrago construyendo su refugio! Crea tu sitio web estático en AWS S3

https://my-million-friend-blog.vercel.app/blog/post-220/