Introduction

Hosting a static website on AWS S3 with CloudFront provides a highly scalable, secure, and cost-effective solution for serving web content globally. Amazon S3 (Simple Storage Service) acts as the storage for your static files, while CloudFront, AWS’s Content Delivery Network (CDN), ensures fast and secure delivery to users worldwide.

In this guide, we’ll walk through the steps to host a static website using Amazon S3 and distribute it globally using Amazon CloudFront.

Prerequisites

Before getting started, ensure you have:

• An AWS account
• A registered domain name (optional but recommended for custom domain setup)
• AWS CLI installed (optional but useful for automation)

Step 1: Create an S3 Bucket

1. Login to AWS Console and navigate to Amazon S3.
2. Click Create bucket and enter a unique bucket name (e.g., my-static-site).
3. Choose the region closest to your users.
4. Uncheck Block all public access (we’ll configure access permissions later).
5. Enable Static website hosting under Properties.
6. Set the index document to index.html.
7. Click Create bucket.

Step 2: Upload Your Website Files

1. Open the newly created S3 bucket.
2. Click Upload, then Add files.
3. Select your website’s files (index.html, styles.css, scripts.js, etc.).
4. Click Upload.

Step 3: Configure Bucket Permissions

1. Navigate to the Permissions tab of your bucket.
2. In the Bucket policy section, click Edit policy and add the following JSON policy:

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

   Replace my-static-site with your actual bucket name.

3. Click Save changes.

Your website is now accessible via the S3 bucket’s public URL.

Step 4: Create a CloudFront Distribution

1. Navigate to CloudFront in the AWS Console.
2. Click Create Distribution.
3. Under Origin, enter your S3 bucket’s website endpoint (not the bucket name).
4. Set Viewer Protocol Policy to Redirect HTTP to HTTPS.
5. Enable Compress Objects Automatically for faster loading times.
6. Click Create Distribution.

Once CloudFront finishes deploying, you will receive a CloudFront URL (e.g., d1234abcd.cloudfront.net).

Step 5: Configure a Custom Domain (Optional)

If you want to use a custom domain:

1. In Route 53, create a new record for your domain.
2. Choose Alias Record and point it to your CloudFront distribution.
3. Use AWS Certificate Manager (ACM) to request an SSL certificate and attach it to CloudFront for HTTPS support.

Step 6: Test Your Website

1. Open your CloudFront URL in a browser.
2. If using a custom domain, ensure your domain is resolving correctly.
3. Verify page loading speed and security settings.

Conclusion

Congratulations! You have successfully hosted a static website on AWS S3 and distributed it globally using CloudFront. This setup ensures your site is fast, scalable, and secure, with minimal maintenance. You can now focus on building great content while AWS handles the infrastructure.

For further improvements, consider enabling AWS WAF for security, Lambda@Edge for dynamic content modifications, and CloudFront logging for analytics.