AWS Builder Center

Builder Center

Host a Static Website on AWS Using Amazon S3 and CloudFront

Host a Static Website on AWS Using Amazon S3 and CloudFront

Learn how to host a static website using Amazon S3 and Amazon CloudFront. This beginner-friendly guide explains website storage, content delivery, HTTPS, and secure access using AWS services.

Introduction

Cloud computing makes it easier to host websites without managing physical servers. AWS provides services that help us store website files, deliver content efficiently, and improve security.
In this article, we will learn how to host a static website using Amazon S3 and Amazon CloudFront.

What Is Amazon S3?

Amazon Simple Storage Service (Amazon S3) is an object storage service used to store files such as HTML, CSS, JavaScript, images, and documents.
For a static website, S3 stores the files required to display the website.
Example files:
  • index.html — the main webpage
  • style.css — website styling
  • script.js — interactive features
  • Images and other assets

What Is Amazon CloudFront?

Amazon CloudFront is a Content Delivery Network (CDN) that delivers content through a global network of edge locations.
It helps reduce latency by serving cached content closer to users. CloudFront can also provide HTTPS connections to make website access more secure.

Understanding the Architecture

The basic architecture is:
User → Amazon CloudFront → Amazon S3
Here is how it works:
  1. A user opens the website in a browser.
  2. CloudFront receives the request.
  3. If the requested content is cached, CloudFront can deliver it from an edge location.
  4. Otherwise, CloudFront retrieves the content from the S3 origin.
  5. The content is delivered to the user.

Step-by-Step Implementation

Step 1: Create an S3 Bucket

  1. Sign in to the AWS Management Console.
  2. Open Amazon S3.
  3. Create a bucket with a globally unique name.
  4. Upload your website files, including index.html, CSS, and images.

Step 2: Prepare Your Website

Make sure your website files are organized correctly and that the HTML file references the correct CSS, JavaScript, and image paths.

Step 3: Create a CloudFront Distribution

  1. Open Amazon CloudFront.
  2. Create a distribution.
  3. Select your S3 bucket as the origin.
  4. Configure Origin Access Control (OAC) to allow CloudFront to access the private S3 bucket.
  5. Set index.html as the default root object.
  6. Enable HTTPS using the CloudFront default certificate.

Step 4: Configure Secure Access

Keep the S3 bucket private and configure its bucket policy to allow access through your CloudFront distribution using OAC.
This approach helps prevent users from bypassing CloudFront to access the S3 origin directly.

Step 5: Test the Website

After the CloudFront distribution finishes deploying:
  1. Copy the CloudFront distribution domain name.
  2. Open it in your browser using HTTPS.
  3. Check whether the webpage, images, and styling load correctly.
  4. Troubleshoot any permission or file-path errors.

Common Issues and Solutions

Access Denied: Check the S3 bucket policy and CloudFront OAC configuration.
404 Not Found: Verify the default root object and the uploaded file names.
Old content appears: Check CloudFront caching and create an invalidation if necessary.
CSS or images are missing: Verify file paths and confirm that the required assets are uploaded.

Benefits of This Architecture

  • Scalability: S3 can store large amounts of website content.
  • Performance: CloudFront can cache content closer to users.
  • Security: HTTPS and private S3 access help protect website delivery.
  • Cost awareness: You pay for applicable service usage, so monitor your AWS billing.

Conclusion

Hosting a static website using Amazon S3 and CloudFront is a practical way to understand AWS storage, content delivery, and cloud security.
For students beginning their cloud engineering journey, this project provides a foundation for learning more about AWS architecture. You can extend it by connecting a custom domain using Amazon Route 53, configuring a certificate with AWS Certificate Manager, and automating deployments through GitHub Actions.
Keep learning, keep building, and keep sharing your cloud journey!
# aws-certification# cloud-concepts# devops
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article