[How to] Host a static website in AWS S3

HOW TO SERIES

🚀 Effortless Static Website Hosting: Leverage AWS S3 for Fast 🌐, Scalable 📈 Deployment!

Static websites are lightweight, fast, and easy to deploy. AWS S3 (Simple Storage Service) is one of the most reliable and cost-effective platforms for hosting static websites. This guide will walk you through the process of hosting a static website on AWS S3, making it accessible to your users.

Prerequisites

Before you begin, ensure you have:

1. An AWS account (sign up here if you don’t have one).
2. Your static website files ready (HTML, CSS, JavaScript, and assets).
3. Basic familiarity with the AWS Management Console.

Step 1: Create an S3 Bucket

1. Log in to the AWS Management Console.
2. Navigate to S3 under the “Storage” category.
3. Click Create bucket and provide a unique Bucket name (e.g., my-static-website).
4. Choose your preferred AWS Region (closer to your target audience for better latency).
5. Under Object Ownership, select ACLs disabled and uncheck Block all public access to make the bucket accessible publicly.
6. Confirm the settings and click Create bucket.

---

Step 2: Upload Website Files

1. Open your newly created bucket in the S3 console.
2. Click the Upload button.
3. Drag and drop your static website files or click Add files to select them from your computer.
4. Keep default settings and click Upload.

---

Step 3: Configure the Bucket for Static Website Hosting

1. In your S3 bucket, go to the Properties tab.
2. Scroll down to Static website hosting and click Edit.
3. Select Enable for static website hosting.
4. For the Index document, enter the name of your main file (e.g., index.html).
5. If you have a custom error page, specify it under Error document (e.g., 404.html).
6. Save changes.

---

Step 4: Set Bucket Permissions

To allow public access to your website:

1. Go to the Permissions tab in your bucket.
2. Under Bucket Policy, click Edit and paste the following JSON:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-static-website/*"
        }
    ]
}

1. Replace my-static-website with your bucket name.
2. Save the policy.

---

Step 5: Test Your Website

1. Navigate back to the Properties tab and locate the Static website hosting section.
2. Copy the Bucket website endpoint URL (e.g., http://my-static-website.s3-website-us-east-1.amazonaws.com).
3. Paste the URL into your browser to view your static website.

---

Optional: Set Up a Custom Domain

If you have a custom domain, you can configure it to point to your S3 bucket:

1. Register a domain using Route 53 or your preferred domain registrar.
2. Create an Amazon S3 Alias Record in Route 53 to map your domain to the S3 bucket endpoint.
3. Configure your DNS settings with the provided CNAME or alias record details.

---

Cost Considerations

AWS S3 offers a pay-as-you-go model. For static website hosting, you’ll typically incur costs for:

1. Storage: Based on the size of your website files.
2. Data transfer: Charges apply when users access your website.

Check the AWS S3 pricing page for more details.

---

Conclusion

Hosting a static website on AWS S3 is straightforward, scalable, and budget-friendly. By following these steps, you can deploy your website quickly and make it accessible globally. As your project grows, you can integrate additional AWS services like CloudFront for better performance and HTTPS support.

Do you have other topics you’d like covered in the next tech blog? Let me know in the comments! 😊

---

A Note from the writer…

Welcome to my How-to Tech Blog Series, where I break down technical tasks into simple, actionable steps. Whether you’re coding in your favorite language, navigating the complexities of cloud technologies, or tackling day-to-day programming challenges, this series aims to provide clear and concise solutions. Stay tuned for quick guides that empower you to solve problems and enhance your skills!