Introduction 

Hosting a static website on Amazon S3 with CloudFront ensures fast, scalable, and cost-effective web delivery. AWS S3 provides secure storage, while CloudFront enhances performance with global content distribution. This guide walks through the step-by-step process to host a static website on AWS S3 and CloudFront.

Step 1: Create an S3 Bucket

  1. Sign in to the AWS Management Console.
  2. Navigate to S3 and click Create Bucket.
  3. Choose a unique bucket name and select the preferred AWS region.
  4. Uncheck “Block all public access” and acknowledge the warning to allow public access.
  5. Click Create Bucket.

Step 2: Upload Website Files

  1. Open the newly created S3 bucket.
  2. Click Upload and add the website’s HTML, CSS, JavaScript, and other static assets.
  3. Set public read permissions under Permissions.
  4. Click Upload.

Step 3: Enable Static Website Hosting

  1. Inside the S3 bucket, go to the Properties tab.
  2. Scroll down to Static Website Hosting and click Edit.
  3. Select Enable and specify the index document (e.g., index.html).
  4. Click Save Changes.

Step 4: Configure Bucket Policy for Public Access

  1. Go to the Permissions tab and click Bucket Policy.
  2. Add the following policy to grant public read access:


{

    “Version”: “2012-10-17”,

    “Statement”: [

        {

            “Sid”: “PublicReadGetObject”,

            “Effect”: “Allow”,

            “Principal”: “*”,

            “Action”: “s3:GetObject”,

            “Resource”: “arn:aws:s3:::your-bucket-name/*”

        }

    ]

}

  1. Replace your-bucket-name with the actual S3 bucket name.
  2. Click Save Changes.

Step 5: Set Up CloudFront for Global Content Delivery

  1. Navigate to AWS CloudFront and click Create Distribution.
  2. Under Origin Domain Name, select the previously created S3 bucket.
  3. Set Origin Access Control (OAC) to restrict S3 access to CloudFront only.
  4. Enable Compress Objects Automatically for performance optimization.
  5. Under Default Root Object, enter index.html.
  6. Click Create Distribution.

Step 6: Update DNS Settings for a Custom Domain (Optional)

  1. If using a custom domain, configure Amazon Route 53 or another DNS provider.
  2. Create an A record (Alias) pointing to the CloudFront distribution.
  3. Verify the domain is correctly mapped to CloudFront.

Step 7: Enable SSL/TLS for Secure HTTPS

  1. In AWS Certificate Manager (ACM), request a public certificate for the custom domain.
  2. Validate the domain via email or DNS.
  3. Associate the certificate with the CloudFront distribution.
  4. Enable HTTPS redirect in CloudFront settings.

Conclusion

Hosting a static website using AWS S3 and CloudFront ensures high availability, fast load times, and cost efficiency. With global caching, improved security, and seamless scalability, AWS provides an ideal hosting solution for static websites.