How to Host a Static Website on AWS S3: A Step-by-Step Guide

Amazon S3 (Simple Storage Service) is a robust cloud storage solution that allows you to store and retrieve any amount of data from anywhere. One of its lesser-known but highly useful features is static website hosting, which enables you to host websites with static content. This guide will take you through the process of setting up a static website on AWS S3.

Prerequisites

1. AWS Account: Sign up for a free-tier account if you don't have one.

2. Website Files: Prepare your static files (e.g., index.html, styles.css).

Step 1: Create an S3 Bucket

1. Log in to AWS Management Console:

   • Navigate to the S3 service by searching for "S3" in the services search bar.

2. Create a New Bucket:

   • Click Create bucket.

   • Enter a unique bucket name. If you plan to use a custom domain, match the bucket name with your domain name (e.g., example.com).

   • Choose a region close to your target audience for better performance.

   • Leave the remaining settings as default for now.

3. Disable Block Public Access:

   • During the creation process, uncheck "Block all public access".

   • Confirm your choice, as this step is essential for making your website accessible to users.

Step 2: Upload Website Files

1. Navigate to Your Bucket:

   • Click on your newly created bucket to open it.

2. Upload Files:

   • Click the Upload button and drag your website files (e.g., index.html, style.css, images) into the upload window.

   • Click Upload to save the files to your bucket.

Step 3: Enable Static Website Hosting

1. Go to Bucket Properties:

   • Click on the Properties tab in your bucket.

2. Enable Static Website Hosting:

   • Scroll to the Static website hosting section and click Edit.

   • Select Enable.

   • Specify the index document name (e.g., index.html).

   • Optionally, add an error document (e.g., 404.html).

   • Save changes.

3. Note the Endpoint URL:

   • After enabling static website hosting, AWS provides an endpoint URL (e.g., http://your-bucket-name.s3-website-region.amazonaws.com) for your site.

Step 4: Configure Bucket Permissions

1. Set Public Access Permissions:

   • Go to the Permissions tab of your bucket.

• Scroll to Bucket Policy and add a policy to allow public access to your files. Use the following JSON policy, replacing your-bucket-name with your bucket's name:

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

• Save the policy.

2. Test Access:

   • Open the endpoint URL in your browser to verify your website is live.

Step 5: Optional - Use a Custom Domain

1. Set Up a Domain:

   • Purchase a domain name from a domain registrar (e.g., Route 53, GoDaddy).

2. Add a CNAME Record:

   • In your domain's DNS settings, add a CNAME record pointing to your S3 bucket's static website endpoint.

3. Secure with HTTPS:

   • Use Amazon CloudFront (AWS’s CDN service) to distribute your content and add an SSL certificate for secure HTTPS access.

Conclusion

Congratulations! You’ve successfully hosted a static website on AWS S3. With this setup, your website benefits from AWS’s global infrastructure, ensuring high availability and durability. Whether you're hosting a portfolio, landing page, or documentation, AWS S3 is a cost-effective and scalable solution.

Feel free to experiment with adding more features, such as using Amazon CloudFront for faster delivery or automating deployments with CI/CD pipelines. Let me know if you need help with advanced configurations!