AWS Builder Center

Builder Center

Host a Static Website on AWS with Amazon S3 and CloudFront

Amazon S3, Amazon CloudFront

Introduction

You don’t need a server to put a website online. If your site is made of static files (HTML, CSS, JavaScript, images), you can host it on AWS for pennies a month, with no servers to patch and nothing to scale.
In this tutorial, you’ll host a simple website using Amazon S3 to store your files and Amazon CloudFront to deliver them quickly and securely over HTTPS. Your bucket stays private, and only CloudFront can read from it.

Architecture

1
Visitor → CloudFront (CDN, HTTPS) → S3 bucket (private)
  • S3 stores your website files.
  • CloudFront caches them at edge locations around the world and serves them over HTTPS.
  • Origin Access Control (OAC) ensures the bucket is only reachable through CloudFront.

Prerequisites

  • An AWS account
  • A basic index.html file (we’ll create one below)

Step 1: Create your website file

On your computer, create a file named index.html:
html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>My First AWS Site</title>
</head>
<body>
<h1>Hello from AWS!</h1>
<p>This site is hosted on S3 and served by CloudFront.</p>
</body>
</html>

Step 2: Create an S3 bucket

  1. Open the S3 console and choose Create bucket.
  2. Enter a globally unique bucket name, for example my-first-site-yourname-2026.
  3. Pick a Region close to you.
  4. Leave Block all public access turned on. CloudFront will handle access.
  5. Choose Create bucket.

Step 3: Upload your file

  1. Open your new bucket and choose Upload.
  2. Add index.html and choose Upload.

Step 4: Create a CloudFront distribution

  1. Open the CloudFront console and choose Create distribution.
  2. For Origin domain, select your S3 bucket.
  3. For Origin access, choose Origin access control settings (recommended), then create a new OAC with the default settings.
  4. Under Default root object, enter index.html. This makes the root URL serve your page.
  5. Leave the remaining settings at their defaults and create the distribution.

Step 5: Update the bucket policy

After creating the distribution, CloudFront shows a banner with a ready-made bucket policy. Copy it, then:
  1. Go to your S3 bucket → Permissions → Bucket policy → Edit.
  2. Paste the policy and save.
It will look similar to this (with your own bucket name and account/distribution details):
json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"Version": "2012-10-17",
"Statement": {
"Sid": "AllowCloudFrontServicePrincipal",
"Effect": "Allow",
"Principal": { "Service": "cloudfront.amazonaws.com" },
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::ACCOUNT-ID:distribution/DISTRIBUTION-ID"
}
}
}
}

Step 6: Test your site

Wait a few minutes for the distribution status to change from Deploying to a last-modified date. Then copy the Distribution domain name (it looks like d1234abcd.cloudfront.net) and open it in your browser:
1
https://d1234abcd.cloudfront.net
You should see your “Hello from AWS!” page.

Updating your site

When you change your files, upload the new versions to S3. CloudFront may keep serving cached copies for a while. To see changes immediately, create an invalidation in the CloudFront console with the path /*.

Cost

For a small personal site, costs are typically minimal. S3 charges for storage and requests, and CloudFront has a monthly free tier for data transfer and requests. Check current pricing on the AWS pricing pages for your Region.

Clean up

To avoid ongoing charges when you’re done experimenting:
  1. Disable, then delete the CloudFront distribution.
  2. Empty, then delete the S3 bucket.

Key takeaways

  • Static websites don’t need servers. S3 plus CloudFront is simple, fast, and cheap.
  • Keep your bucket private and use Origin Access Control so only CloudFront can read from it.
  • Set a default root object so visitors don’t get an error at your root URL.
  • Use invalidations when you need updates to show up right away.

Next steps

  • Add a custom domain with Amazon Route 53 and a free SSL certificate from AWS Certificate Manager.
  • Automate deployments with GitHub Actions or AWS CodePipeline.
  • Try AWS Amplify Hosting for an even more managed experience.
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