How to Host a Static Website on AWS S3: A Detailed Guide

Introduction

Hosting a static website on Amazon S3 (Simple Storage Service) is a cost-effective, scalable, and reliable solution for delivering static content such as HTML, CSS, JavaScript, and images. This guide will walk you through the steps to set up and host your static website on AWS S3.

Prerequisites

Before you begin, make sure you have the following:

1. AWS Account: If you don't have an AWS account, sign up at aws.amazon.com.

2. Static Website Files: Prepare your HTML, CSS, JavaScript, and other static assets that you want to host.

Step-by-Step Guide

Step 1: Create an S3 Bucket

1. Log in to AWS Management Console:

   • Open the AWS Management Console and navigate to the S3 service.

2. Create a New Bucket:

   • Click on the "Create bucket" button.

   • Provide a unique bucket name (e.g., my-static-website-bucket).

   • Select the AWS Region where you want to create the bucket.

   • Keep the default settings or configure additional settings as needed.

   • Click on "Create bucket."

Step 2: Configure Bucket for Static Website Hosting

1. Enable Static Website Hosting:

   • Go to your newly created bucket.

   • Click on the "Properties" tab.

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

   • Select "Enable" to turn on static website hosting.

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

   • Click on "Save changes."

Step 3: Upload Your Website Files

1. Upload Files to S3 Bucket:

   • Go to the "Objects" tab in your bucket.

   • Click on the "Upload" button.

   • Add files or folders containing your static website content.

   • Click on "Upload" to start uploading your files to the bucket.

Step 4: Set Bucket Permissions

1. Make the Bucket Public:

   • Go to the "Permissions" tab in your bucket.

   • Click on "Bucket Policy" and add the following policy to allow public read access to your files:

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

Replace my-static-website-bucket with the name of your bucket. Click on "Save changes."

Step 5: Access Your Website

1. Find the Website Endpoint:

   • Go to the "Properties" tab in your bucket.

   • Scroll down to the "Static website hosting" section.

   • Note the "Endpoint" URL. This is the URL of your static website (e.g., http://my-static-website-bucket.s3-website-us-east-1.amazonaws.com).

2. Open the URL in a Browser:

   • Copy the endpoint URL and open it in a web browser to view your static website.

Optional: Configure a Custom Domain

If you want to use a custom domain for your static website, follow these additional steps.

Step 6: Register a Domain (Optional)

1. Register a Domain:

   • Use AWS Route 53 or any other domain registrar to register your domain (e.g., example.com).

Step 7: Configure Route 53 (Optional)

1. Create a Hosted Zone:

   • In the AWS Management Console, navigate to Route 53.

   • Click on "Hosted zones" and then "Create hosted zone."

   • Enter your domain name (e.g., example.com) and click "Create hosted zone."

2. Create S3 Bucket for Custom Domain:

   • Create a new S3 bucket with the same name as your custom domain (e.g., example.com).

3. Enable Static Website Hosting on Custom Domain Bucket:

   • Follow the same steps as before to enable static website hosting for the new bucket.

   • Upload your website files to this new bucket.

Step 8: Set Up Bucket Policy for Custom Domain (Optional)

1. Add Bucket Policy:

   • Add a similar bucket policy to allow public read access for your custom domain bucket.

Step 9: Create Route 53 Alias Record (Optional)

1. Create Alias Record:

   • In Route 53, go to your hosted zone.

   • Click on "Create record."

   • Choose "A - IPv4 address" as the record type.

   • Select "Alias" and choose your S3 website endpoint.

   • Click on "Create records."

Step 10: Configure SSL/TLS with CloudFront (Optional)

1. Create a CloudFront Distribution:

   • In the AWS Management Console, navigate to CloudFront.

   • Click on "Create Distribution" and choose "Web."

   • Enter your S3 bucket URL as the origin.

   • Configure settings and enable SSL/TLS by using an AWS Certificate Manager (ACM) certificate.

   • Complete the setup and deploy the distribution.

2. Update Route 53 Record:

   • Update your Route 53 alias record to point to your CloudFront distribution.

Conclusion

Hosting a static website on AWS S3 is a straightforward and efficient way to deliver your content to a global audience. By following this guide, you can set up your S3 bucket, upload your website files, and configure the necessary permissions to make your website accessible. For added customization and security, you can integrate a custom domain and SSL/TLS using CloudFront and Route 53. Start leveraging the power of AWS S3 to host your static website today and enjoy the benefits of scalability, reliability, and cost-effectiveness.