How to Host a Static Website on AWS S3 with CloudFront CDN

Objective:

To host a static website on AWS S3 and optimize its performance and security using CloudFront as a Content Delivery Network (CDN), ensuring fast and secure global content delivery.

Prerequisite:

• Active AWS account for setting up services.
• Pre-built static website content (e.g., HTML, CSS, JavaScript files).

Step 1: Create an S3 Bucket

• Log in to the AWS Management Console and navigate to the S3 Service.
• Create a bucket with a globally unique name.
• Enable public access to allow your website to be publicly accessible.

Step 2: Upload files and folder to the bucket

• Click upload on the newly created bucket
• Upload .html file as a file, then upload others as folder

Step 3: Configure the bucket to allow static web hosting

• Click on properties tab in the bucket, Enable Static Website Hosting and edit
• Choose "Host a static website" as the hosting option.
• Specify Index and Error Documents
• Enter the name of your main file (e.g index.html) in the Index Document field.
• Specify an error file (e.g., 404.html) for handling invalid URLs. (Optional)
• After saving, copy the Website Endpoint, the URL will be address for your website.

Step 4: create IAM bucket policy that makes the bucket contents publicly accessible.

• Click on permission in the bucket
• Edit the bucket policy with this

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

• Save and open the website endpoint URL from Step 3 in a browser to ensure the website is accessible.

Step 5: Set Up a CloudFront Distribution

• Navigate to cloudfront service, create a distribution
• Configure the settings; add origin domain, enter index.html into default root object

Step 6: Copy the domain URL and check it on the browser to confirm access to your website

Conclusion

Benefits of Using CloudFront:

• Speeds up content delivery with edge locations.
• Provides an SSL certificate for secure connections.
• Offers caching to reduce latency and S3 bucket costs.