Hosting a Static Website on AWS S3 and CloudFront

In today’s digital world, hosting a website that is fast, secure, and highly available is essential for both businesses and developers. For websites that don’t require a backend or database — like portfolio sites, documentation pages, or landing pages — using Amazon S3 (Simple Storage Service) combined with Amazon CloudFront (CDN) is one of the most cost-effective and scalable solutions available.

This guide will walk you through how to host a static website on AWS S3 and CloudFront, covering everything from bucket configuration to security, performance optimization, and cost efficiency.

Understanding AWS S3 and CloudFront

What Is Amazon S3?

Amazon S3 is a highly durable and scalable object storage service that allows you to store and retrieve data such as HTML, CSS, JavaScript, and images. It’s perfect for static websites because it can serve files directly over HTTP or HTTPS without needing a web server.

What Is Amazon CloudFront?

Amazon CloudFront is AWS’s Content Delivery Network (CDN) that delivers content to users globally with low latency. It caches your website’s static assets in edge locations around the world, ensuring faster load times and better user experience.

Why Use S3 and CloudFront Together?

When used together, S3 and CloudFront offer:

• Global performance through caching and edge delivery.

• Automatic HTTPS support for security.

• High availability and scalability without managing servers.

• Low operational cost with pay-as-you-go pricing.

Step 1: Prepare Your Website Files

Before you start setting up your AWS infrastructure, ensure your static website files are ready.
These typically include:

• index.html (home page)

• error.html (custom error page)

• CSS, JavaScript, and image assets

Make sure all file references are relative paths, since S3 does not support server-side routing like traditional web servers.

Step 2: Create an S3 Bucket

1. Log In to AWS Console

Navigate to the S3 service in the AWS Management Console.

2. Create a New Bucket

• Click Create bucket.

• Enter a unique bucket name (e.g., my-static-site-example).

• Choose a region closest to your primary audience.

3. Configure Permissions

To host a public website, your S3 bucket must allow public access to the objects (HTML, CSS, JS, etc.).

However, AWS recently tightened public access policies for better security, so follow these steps carefully:

• Uncheck Block all public access.

• Acknowledge the warning message.

• After creation, go to the Permissions tab and set the Bucket Policy.

Example bucket policy:

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

4. Enable Static Website Hosting

Go to the Properties tab and scroll to Static website hosting.

• Select Enable.

• Choose Host a static website.

• Enter index.html as the index document and error.html as the error document.

• Save changes.

After enabling it, AWS will display an endpoint URL like:

http://my-static-site-example.s3-website-us-east-1.amazonaws.com

You can now access your website using this link.

Step 3: Upload Your Website Files

• Open your S3 bucket.

• Click Upload and add all your files.

• Once uploaded, confirm that each file has the correct permissions (public read access).

At this point, your static website is live, but it uses an S3 endpoint URL. To improve performance, security, and branding, you’ll integrate CloudFront next.

Step 4: Set Up CloudFront for Your S3 Website

1. Open CloudFront in AWS Console

Go to CloudFront → Distributions → Create Distribution.

2. Configure Origin Settings

• Under Origin domain, select your S3 bucket from the dropdown.

• For Origin access, select Origin Access Control (OAC) to restrict direct access to S3 and force users through CloudFront.

• Enable Redirect HTTP to HTTPS to enforce secure connections.

3. Default Cache Behavior

• Viewer protocol policy: Redirect HTTP to HTTPS

• Allowed HTTP methods: GET, HEAD

• Cache policy: Use the managed policy CachingOptimized

4. Configure Distribution Settings

• Price class: Choose the region closest to your audience (e.g., "Use only North America and Europe").

• Alternate domain name (CNAME): Add your custom domain (optional).

• SSL Certificate: Choose an AWS Certificate Manager (ACM) certificate for HTTPS.

5. Create the Distribution

Click Create distribution. It may take 10–20 minutes for the distribution to be deployed globally.

Once complete, you’ll get a CloudFront URL like:

https://d123abcd.cloudfront.net

Step 5: Connect a Custom Domain (Optional)

To use your own domain (e.g., www.mysite.com), set up Route 53 or another DNS provider.

1. Create a CNAME record in your domain’s DNS settings:

   www.mysite.com → d123abcd.cloudfront.net
   

2. Wait for DNS propagation.

3. Verify that your custom domain loads the CloudFront-distributed version of your website.

Step 6: Enforce Security and Access Control

Use HTTPS Everywhere

Always serve your site via HTTPS using a free ACM certificate. This ensures encrypted communication and better SEO ranking.

Restrict Direct S3 Access

After setting up CloudFront, disable direct public access to your S3 bucket. You can use Origin Access Control (OAC) to ensure only CloudFront can fetch content from S3.

Enable Logging

Enable Access Logs in both S3 and CloudFront to track user activity, performance, and security incidents.

Add WAF Protection

Integrate AWS Web Application Firewall (WAF) with CloudFront to block common web attacks such as SQL injection or XSS.

Step 7: Optimize Performance and Cost

Enable Caching

CloudFront automatically caches your website assets at edge locations. You can fine-tune cache settings using cache policies and TTL (Time to Live) values.

Compress Content

Enable Gzip or Brotli compression in CloudFront to reduce the size of assets like CSS and JavaScript files, improving page load times.

Use S3 Lifecycle Rules

Set up lifecycle rules to archive old versions of files or move them to S3 Glacier for long-term storage at a lower cost.

Monitor Costs

Use AWS Cost Explorer to track your S3 and CloudFront expenses. You can also enable Budgets to receive alerts when costs exceed a threshold.

Step 8: Versioning and Continuous Deployment

Enable S3 Versioning

Turn on versioning in your S3 bucket to keep track of changes and easily roll back to previous versions if something breaks.

Automate Deployment

Integrate your workflow with AWS CodePipeline, GitHub Actions, or Jenkins to automatically upload new website builds to S3 and invalidate CloudFront caches after each deployment.

Example command to clear cache:

aws cloudfront create-invalidation --distribution-id XYZ123 --paths "/*"

Step 9: Test Your Website

Once your CloudFront distribution is active:

• Visit your CloudFront or custom domain URL.

• Verify that all assets (HTML, CSS, JS, images) load correctly.

• Check SSL configuration and response headers for HTTPS.

• Test site speed using tools like Google PageSpeed Insights or GTmetrix.

If everything loads correctly, congratulations — your static website is now securely hosted and globally distributed on AWS!

Benefits of Hosting a Static Website on S3 and CloudFront

1. Scalability: Your website can handle any level of traffic without manual scaling.

2. Cost Efficiency: You only pay for storage and bandwidth — no server costs.

3. Global Reach: CloudFront’s CDN ensures users around the world get fast load times.

4. Reliability: Built on AWS’s fault-tolerant infrastructure.

5. Security: Full HTTPS support and DDoS protection via AWS Shield.

6. Automation Ready: Easy to integrate with CI/CD tools for automated deployments.

Conclusion

Hosting a static website using Amazon S3 and CloudFront is one of the most efficient and affordable ways to create a globally accessible, secure, and fast online presence. Whether you’re building a personal portfolio, documentation site, or business landing page, this setup eliminates server management while delivering enterprise-grade performance.

By following this guide, you’ve learned how to:

• Configure an S3 bucket for static hosting.

• Securely deliver content via CloudFront.

• Add HTTPS and custom domains.

• Optimize for performance and cost.

With AWS S3 and CloudFront, you can focus on what truly matters — building great content — while AWS takes care of speed, scalability, and reliability behind the scenes.