This step-by-step guide demonstrates how to create a secure static website using Amazon S3 for hosting, CloudFront for content delivery with HTTPS, and Route 53 for custom domain management.

Overview

Hosting a static website on AWS provides several benefits including high availability, scalability, and security. This guide walks through the complete process of setting up a static website with a custom domain and HTTPS support.

Step 1: Create an S3 Bucket for Your Website

First, create an S3 bucket with the same name as your domain:

1. Sign in to the AWS Management Console and open the S3 console
2. Click Create bucket
3. Enter your domain name as the bucket name (e.g., demo.example.com)
4. Select the appropriate region
5. Configure other settings as needed
6. Click Create bucket

Step 2: Create an IAM User for Content Management

Create a dedicated IAM user with limited permissions for uploading and managing website content:

1. Go to the IAM console
2. Click Users > Add users
3. Enter a name (e.g., user-demo.example.com)
4. Select Access key - Programmatic access
5. Create a policy with appropriate S3 permissions or use an existing one
6. Complete the user creation process

Step 3: Configure S3 Bucket Policy

Update the S3 bucket policy to allow public read access and specific permissions for your IAM user. Replace <aws-account> with your AWS account ID:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::demo.example.com/*"
        },
        {
            "Sid": "Allow-deployment-To-Bucket",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::<aws-account>:user/user-demo.example.com"
            },
            "Action": [
                "s3:ListBucket",
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::demo.example.com",
                "arn:aws:s3:::demo.example.com/*"
            ]
        }
    ]
}

Step 4: Enable Static Website Hosting

Configure your S3 bucket to serve as a static website:

1. Select your bucket and go to the Properties tab
2. Scroll down to Static website hosting and click Edit
3. Select Enable
4. Enter index.html for the Index document
5. Optionally enter error.html for the Error document
6. Click Save changes

Record the website endpoint URL that appears, which will look like:

http://demo.example.com.s3-website-{region}.amazonaws.com

Step 5: Upload Website Content

Upload your website files to the S3 bucket:

1. Select your bucket and go to the Objects tab
2. Click Upload
3. Add your website files (HTML, CSS, JavaScript, images, etc.)
4. Click Upload

After uploading, test your website by visiting the S3 website endpoint URL from Step 4.

Step 6: Request an SSL Certificate

Use AWS Certificate Manager (ACM) to create a free SSL certificate for your domain:

1. Open the AWS Certificate Manager console
2. Click Request a certificate
3. Select Request a public certificate
4. Enter your domain name (e.g., demo.example.com)
5. Select DNS validation as the validation method
6. Click Request
7. Follow the validation process to verify domain ownership

Step 7: Create a CloudFront Distribution

Set up a CloudFront distribution to serve your website with HTTPS:

1. Open the CloudFront console
2. Click Create Distribution
3. Under Origin Domain, enter your S3 website endpoint
4. Configure the following settings:

Setting	Value
Origin Domain Name	demo.example.com.s3-website-{region}.amazonaws.com
Viewer Protocol Policy	Redirect HTTP to HTTPS
Alternate Domain Names	demo.example.com
SSL Certificate	Custom SSL Certificate (select the certificate created in Step 6)
Default Root Object	index.html

5. Configure other settings as needed
6. Click Create Distribution

Note: It may take 15-30 minutes for the CloudFront distribution to deploy. You can check the status in the CloudFront console.

Content Updates: When you update your website content in S3, you may need to invalidate the CloudFront cache to see the changes immediately. To do this, create an invalidation with the path /*.

Step 8: Configure DNS with Route 53

Connect your domain to the CloudFront distribution:

1. Open the Route 53 console
2. Select your hosted zone
3. Click Create record
4. Leave the subdomain field empty (or enter a subdomain if needed)
5. Select A - Routes traffic to an IPv4 address and some AWS resources
6. Enable Alias
7. In the Route traffic to dropdown, select Alias to CloudFront distribution
8. Select your CloudFront distribution
9. Click Create records

After DNS propagation (which can take up to 48 hours, but often completes within an hour), your website will be accessible via HTTPS at your custom domain (e.g., https://demo.example.com).

Conclusion

You now have a secure static website hosted on AWS with the following benefits:

• High Availability: S3 provides 99.99% availability
• Global Content Delivery: CloudFront serves your content from edge locations worldwide
• HTTPS Security: All traffic is encrypted with your SSL certificate
• Cost-Effective: Pay only for what you use with no upfront costs
• Scalable: Handles any amount of traffic without configuration changes