Host a Website with S3 + CloudFront

Host a static website on AWS using S3 storage and CloudFront CDN with HTTPS.

Introduction

30 Second Summary

Every website you visit loads from a server somewhere in the world. The closer that server is to you, the faster the page appears.

In this project, you will host a personal landing page on Amazon's cloud using S3 for storage and CloudFront for global delivery. You'll wire these two services together securely and end up with a live HTTPS website anyone can visit.

What You'll Build

A static website hosted on Amazon S3 and served globally through a CloudFront distribution with HTTPS encryption and Origin Access Control.

By the end of this project, you'll have:

  • An S3 bucket storing your website files securely, with public access blocked.
  • A CloudFront distribution delivering your site globally from the nearest edge location to each visitor.
  • A live HTTPS URL you can share with anyone to show off your website.
  • Secret Mission: Add a second page to your website and learn how to handle navigation with CloudFront cache invalidation.

Do I need any prior AWS experience?

Nope. You just need an AWS account. This project walks you through every click in the AWS Management Console.

Create Your Website Files

Before you head into the AWS Console, you need the actual website files to upload. Every static website starts with plain HTML and CSS files stored on your computer.

In this step, you'll create three files: a landing page, a stylesheet, and a custom error page. Later, these files will live in an S3 bucket and be served globally by CloudFront.

In this step, get ready to:
  • Create a project folder on your Desktop.
  • Write your landing page in HTML.
  • Add a stylesheet and a custom error page.
Create your project folder and landing page

You need a dedicated folder to keep all your website files together. You'll create this folder on your Desktop so it's easy to find later when you upload to AWS.

  • Right-click on your Desktop.
  • Select New, then Folder.
  • Name the folder my-aws-website.

Now open Notepad to create your first file.

  • Press the Windows key to open your search bar.
  • Type Notepad and press Enter to open it.
  • Paste the following HTML into the empty Notepad window:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My AWS Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Hello from AWS!</h1>
        <p>This website is hosted on Amazon S3 and delivered globally by CloudFront.</p>
        <div class="info-box">
            <h2>What's happening behind the scenes:</h2>
            <ul>
                <li>My files live in an S3 bucket (private, not publicly accessible)</li>
                <li>CloudFront fetches them using Origin Access Control</li>
                <li>You're seeing this page served from the nearest edge location</li>
                <li>The connection is encrypted with HTTPS</li>
            </ul>
        </div>
        <p class="footer">Built with AWS S3 + CloudFront</p>
    </div>
</body>
</html>

What does this code do?

This HTML creates a simple personal landing page. The <link rel="stylesheet" href="style.css"> line connects this page to a separate stylesheet you'll create next.

The info-box section lists what's happening behind the scenes once your site is deployed to AWS. Visitors will see a clean, dark-themed page with an orange heading and a list of cloud architecture facts.

  • Click File, then Save As.
  • Navigate to the my-aws-website folder on your Desktop.
  • Change the Save as type dropdown to All Files (*.*).
  • In the File name field, type index.html.
  • Click Save.

File saved as index.html.txt?

If you see index.html.txt in your folder, you missed the Save as type dropdown. Delete the file, go back to Notepad, and make sure you select All Files (*.*) before saving.

Help me save my file without the .txt extension in Notepad.

✔️ Awesome, I've got everything!

Great. Double check you've saved your file in the my-aws-website folder with the name index.html.

ⓧ I'd like to double check the full code

Here is the complete index.html file for comparison:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My AWS Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Hello from AWS!</h1>
        <p>This website is hosted on Amazon S3 and delivered globally by CloudFront.</p>
        <div class="info-box">
            <h2>What's happening behind the scenes:</h2>
            <ul>
                <li>My files live in an S3 bucket (private, not publicly accessible)</li>
                <li>CloudFront fetches them using Origin Access Control</li>
                <li>You're seeing this page served from the nearest edge location</li>
                <li>The connection is encrypted with HTTPS</li>
            </ul>
        </div>
        <p class="footer">Built with AWS S3 + CloudFront</p>
    </div>
</body>
</html>
Create the stylesheet

Your landing page references a file called style.css for its visual design. Without this file, the page would display as plain black text on a white background.

  • Open a new Notepad window by pressing the Windows key, typing Notepad, and pressing Enter.
  • Paste the following CSS into the empty Notepad window:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #232f3e 0%, #1a252f 100%);
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.container {
    max-width: 600px;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #ff9900;
}

p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #d5dbdb;
}

.info-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 153, 0, 0.3);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: left;
}

.info-box h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #ff9900;
}

.info-box ul {
    list-style: none;
    padding: 0;
}

.info-box li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #d5dbdb;
}

.info-box li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ff9900;
}

.footer {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-top: 2rem;
}

What does this stylesheet do?

This CSS gives your page a dark gradient background inspired by the AWS Console color scheme. The orange #ff9900 color is the signature AWS brand color.

The .info-box styles create a subtle bordered card with checkmark icons next to each list item. The display: flex on the body centers everything vertically and horizontally on the page.

  • Click File, then Save As.
  • Navigate to the my-aws-website folder on your Desktop.
  • Change the Save as type dropdown to All Files (*.*).
  • In the File name field, type style.css.
  • Click Save.

Saved as style.css.txt?

Same fix as before. Delete the file, return to Notepad, and select All Files (*.*) from the Save as type dropdown before saving.

Help me save my CSS file without the .txt extension.

✔️ Awesome, I've got everything!

Great. Confirm you see style.css in your my-aws-website folder alongside index.html.

ⓧ I'd like to double check the full code

Here is the complete style.css file for comparison:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #232f3e 0%, #1a252f 100%);
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.container {
    max-width: 600px;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #ff9900;
}

p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #d5dbdb;
}

.info-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 153, 0, 0.3);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: left;
}

.info-box h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #ff9900;
}

.info-box ul {
    list-style: none;
    padding: 0;
}

.info-box li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #d5dbdb;
}

.info-box li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ff9900;
}

.footer {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-top: 2rem;
}
Create the custom error page

When someone visits a page that doesn't exist on your website, you want to show a helpful message instead of a generic browser error. This file will serve as your custom 404 page.

  • Open a new Notepad window by pressing the Windows key, typing Notepad, and pressing Enter.
  • Paste the following HTML into the empty Notepad window:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Not Found</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #232f3e 0%, #1a252f 100%);
            color: #ffffff;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
        }
        .container {
            max-width: 500px;
        }
        h1 {
            font-size: 4rem;
            color: #ff9900;
            margin-bottom: 1rem;
        }
        p {
            font-size: 1.2rem;
            color: #d5dbdb;
            margin-bottom: 1rem;
        }
        a {
            color: #ff9900;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>404</h1>
        <p>Oops! This page doesn't exist.</p>
        <p><a href="/">Go back to the homepage</a></p>
    </div>
</body>
</html>

Why does this file have its own styles?

Unlike index.html, this error page includes its CSS directly in a <style> tag instead of linking to style.css. If a visitor lands on a broken URL, the stylesheet link might also fail.

By embedding the styles directly, the error page always looks correct regardless of what went wrong. The page shows a large "404" heading with a link back to the homepage.

  • Click File, then Save As.
  • Navigate to the my-aws-website folder on your Desktop.
  • Change the Save as type dropdown to All Files (*.*).
  • In the File name field, type error.html.
  • Click Save.
  • Open the my-aws-website folder on your Desktop.
  • Confirm you see all three files: index.html, style.css, and error.html.

Only seeing two files, or files have .txt extensions?

If any file has a .txt extension at the end, delete it and re-save from Notepad with All Files (*.*) selected in the Save as type dropdown.

If you can't see file extensions at all, open File Explorer, click View in the top menu, and check File name extensions.

Help me check my website files are saved correctly.

✔️ Awesome, I've got everything!

Great. You should have all three files ready to upload to AWS.

ⓧ I'd like to double check the full code

Here is the complete error.html file for comparison:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Not Found</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #232f3e 0%, #1a252f 100%);
            color: #ffffff;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
        }
        .container {
            max-width: 500px;
        }
        h1 {
            font-size: 4rem;
            color: #ff9900;
            margin-bottom: 1rem;
        }
        p {
            font-size: 1.2rem;
            color: #d5dbdb;
            margin-bottom: 1rem;
        }
        a {
            color: #ff9900;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>404</h1>
        <p>Oops! This page doesn't exist.</p>
        <p><a href="/">Go back to the homepage</a></p>
    </div>
</body>
</html>

Your website files are ready to go. Next up, you'll create an S3 bucket in AWS and upload these files to the cloud.

Create an S3 Bucket

Your website files are ready on your computer. Now they need a home in the cloud where they can be stored and eventually served to anyone in the world.

Amazon S3 is a storage service that holds files (called "objects") inside containers called "buckets." In this step, you'll create a bucket and upload your website files to it.

In this step, get ready to:
  • Create an S3 bucket with a unique name.
  • Upload your three website files to the bucket.
  • Confirm the files are stored securely and not publicly accessible.
Sign in and create your S3 bucket

An S3 bucket is the container that will hold your website files. Each bucket needs a globally unique name because bucket names share a single namespace across all AWS accounts worldwide.

  • Sign in to the AWS Management Console at https://console.aws.amazon.com.
  • In the search bar at the top of the console, type S3 and select S3 from the results.
  • In the left navigation pane, select General purpose buckets.
  • Click Create bucket.
  • In the Bucket name field, enter a unique name like my-first-website-yourname-2026 (replace "yourname" with your actual name).
  • For AWS Region, select a region close to your physical location.
  • Leave all other settings as their defaults. Block all public access should remain checked ON.
  • Scroll to the bottom of the page and click Create bucket.

Why does the bucket name need to be unique?

S3 bucket names share a single global namespace across all AWS accounts. No two buckets anywhere in the world can have the same name.

Adding your name and the year to the bucket name helps ensure it's unique. The name must be all lowercase and cannot contain spaces.

Why is Block all public access turned on?

Keeping the bucket private is intentional. Instead of making your files open to the entire internet, you'll set up CloudFront in the next step to act as the only gateway to your files. This is the modern, secure approach AWS recommends.

Seeing a "bucket already exists" error?

Someone else already has a bucket with that exact name. Try adding extra numbers or characters to make it unique (e.g., my-first-website-yourname-2026-v2).

Help me fix my S3 bucket name error.

Upload your website files
  • After the bucket is created, you'll see a success banner. Click your bucket's name in the list to open it.
  • Click the Upload button.
  • Click Add files.
  • Navigate to the my-aws-website folder on your computer.
  • Select all three files: index.html, style.css, and error.html.
  • Click Open to add them to the upload queue.
  • Scroll to the bottom and click Upload.

You should see a success banner confirming all three files have been uploaded.

Upload failed or files missing?

Make sure you selected the files themselves, not the folder. Double-check that all three files (index.html, style.css, error.html) appear in the upload list before clicking Upload.

Help me upload my files to S3.

Verify your files are stored securely
  • Click Close on the upload success page to return to your bucket.
  • In the Objects tab, confirm you see all three files listed: index.html, style.css, and error.html.

Notice that even though the files are uploaded, you cannot access them publicly yet. If you click on a file and try opening its URL, you'll get an "Access Denied" error. This is expected and correct.

Why can't I see my website yet?

Your S3 bucket has Block all public access enabled. Nobody on the internet can reach these files directly.

In the next step, you'll create a CloudFront distribution that acts as the secure front door to your bucket. CloudFront gets special permission to read your files and serve them to visitors over HTTPS.

Your website files are safely stored in S3. Next up, you'll create a CloudFront distribution to serve these files to the world over HTTPS.

Create a CloudFront Distribution

Your website files are sitting safely in S3, but nobody can access them yet. The bucket is locked down with Block Public Access turned on.

CloudFront is AWS's CDN (content delivery network). It sits in front of your S3 bucket, fetches your files securely, and serves them to visitors over HTTPS from servers around the world.

In this step, get ready to:
  • Navigate to the CloudFront service and start creating a distribution.
  • Connect CloudFront to your S3 bucket using Origin Access Control.
  • Launch your distribution and let CloudFront handle permissions automatically.
Navigate to CloudFront and start a new distribution

A CloudFront distribution is the resource that defines how your content gets delivered to users. Think of it as the bridge between your private S3 bucket and the rest of the internet.

  • In the AWS Console, click the search bar at the top of the page.
  • Type CloudFront and select CloudFront from the results.
  • Click Create distribution.
  • Enter My Website in the Distribution name field.
  • Select Single website or app.
  • Click Next.

What is a CloudFront distribution?

A distribution is a set of instructions that tells CloudFront where your content lives (the origin) and how to deliver it. CloudFront copies your files to edge locations around the world so visitors load your site from the server closest to them.

Connect your S3 bucket as the origin

Now you need to tell CloudFront where your files live. This is called setting the origin.

  • For Origin type, select Amazon S3.
  • For S3 origin, click Browse S3.
  • Select the bucket you created earlier (e.g., my-first-website-yourname-2026).
  • For Settings, choose Use recommended origin settings.
  • Click Next.

What is Origin Access Control?

Origin Access Control (OAC) is the secure bridge between CloudFront and your private S3 bucket. It allows CloudFront to fetch files from S3 on behalf of your visitors, without making the bucket public.

By choosing Use recommended origin settings, CloudFront configures OAC automatically and updates your S3 bucket policy to grant access. You don't need to touch any permissions yourself.

Skip WAF and create the distribution

The next page asks about AWS WAF (Web Application Firewall), which adds security protections against web attacks. You can skip this for a simple static website.

  • On the security protections page, select Do not enable for AWS WAF.
  • Click Next.
  • Click Create distribution.

You should now see your distribution's detail page. The Last modified column shows Deploying, which means CloudFront is rolling your configuration out to its edge servers worldwide.

What just happened behind the scenes?

CloudFront automatically updated your S3 bucket policy to allow your new distribution to read files from the bucket. Your bucket stays private to everyone else. Only your specific CloudFront distribution can access it.

Look for your Distribution domain name on the page. It looks something like d111111abcdef8.cloudfront.net. This will be your live website URL once deployment finishes.

Don't see your distribution?

Make sure you clicked Create distribution on the final page (not just Next). If you're on the CloudFront main page, check the distributions list for one named My Website.

Help me troubleshoot my CloudFront distribution creation.

Your CloudFront distribution is now deploying across AWS's global network. In the next step, you'll configure it to serve your index.html as the homepage and set up custom error pages.

Configure Your Distribution Settings

Your CloudFront distribution is live and connecting to your S3 bucket. However, if someone visits the root URL right now, CloudFront won't know which file to show them.

In this step, you'll tell CloudFront to serve index.html as the homepage and configure a custom error page so visitors see a friendly 404 message instead of a raw error.

In this step, get ready to:
  • Set the default root object to index.html.
  • Configure a custom error response for missing pages.
  • Record your CloudFront distribution domain name.
Set the default root object

Without a default root object, visiting your CloudFront URL shows nothing useful. You need to tell CloudFront which file to return when someone visits the root of your website.

  • Return to your distribution in the CloudFront console. You should see your distribution with Last modified showing either "Deploying" or a timestamp.
  • In the Settings pane, on the General tab, click Edit.
  • Find the Default root object field.
  • Enter index.html in the field.
  • Click Save changes.

What is a default root object?

When someone visits https://d111111abcdef8.cloudfront.net (with no filename after it), CloudFront needs to know which file to serve. Setting the default root object to index.html tells CloudFront to fetch that file from your S3 bucket whenever someone hits the root URL.

Do not add a leading slash. Enter index.html exactly, not /index.html.

Don't see the Default root object field?

Make sure you clicked Edit in the Settings pane on the General tab. The field only appears in edit mode.

help me find the Default root object setting in my CloudFront distribution

Configure a custom error response

Since your S3 bucket is private, when someone requests a file that doesn't exist, S3 returns a 403 (Access Denied) error instead of a 404 (Not Found). You'll configure CloudFront to intercept that 403 and show your custom error.html page with a proper 404 status code.

  • In your distribution, click the Error pages tab.
  • Click Create custom error response.
  • For HTTP error code, select 403.
  • Choose to customize the error response.
  • For Response page path, enter /error.html.
  • For HTTP response code, enter 404.
  • Click Create.

Why map 403 to 404?

Your S3 bucket has Block Public Access enabled. When CloudFront requests a file that doesn't exist, S3 can't tell CloudFront "file not found" because the bucket is private. Instead, S3 returns 403 (Access Denied).

By mapping 403 errors to your error.html page with a 404 response code, visitors see a friendly "page not found" message. This is the standard pattern for private S3 origins.

Don't see the Error pages tab?

Make sure you're inside your distribution (click the distribution ID to open it). The Error pages tab appears alongside tabs like General, Origins, and Behaviors at the top of the distribution detail page.

help me configure custom error responses in CloudFront

Wait for deployment and record your domain name

CloudFront distributes your configuration to edge locations worldwide. This typically takes 3-5 minutes.

  • Watch the Last modified field in your distribution details. When deployment is complete, it changes from "Deploying" to a date and timestamp.
  • Locate your distribution's Domain name in the distribution details. It looks like d111111abcdef8.cloudfront.net.
  • Copy this domain name and save it somewhere you can find it easily. You'll use it in the next step to visit your live website.

Refresh to check deployment status

If the Last modified field still shows "Deploying" after a few minutes, refresh the page. Deployment usually completes within 3-5 minutes.

Your distribution is configured and deployed. Next up, you'll visit your live website and see everything in action.

Test Your Live Website

Your CloudFront distribution is deployed and configured. Now it's time to prove everything works.

In this step, you'll verify three things: your website loads over HTTPS, your custom error page handles missing pages, and your S3 bucket remains private. These three checks confirm that your entire architecture is wired correctly.

In this step, get ready to:
  • Visit your live website via the CloudFront URL and confirm it loads over HTTPS.
  • Test your custom error page by navigating to a URL that does not exist.
  • Verify that your S3 bucket is not publicly accessible by testing the direct S3 URL.
Visit your live website

Your CloudFront distribution is now serving your files globally over HTTPS. The distribution domain name you recorded is your website's address.

  • Open a new browser tab.
  • In the address bar, type https:// followed by your distribution domain name (the one you recorded earlier, which looks like d111111abcdef8.cloudfront.net).
  • Press Enter to load the page.

You should see your landing page with the orange "Hello from AWS!" heading, the dark gradient background, and the info box listing what's happening behind the scenes.

What confirms HTTPS is working?

Look at the address bar in your browser. You should see a padlock icon next to the URL. This means the connection between your browser and CloudFront is encrypted with HTTPS. CloudFront provides this automatically with no extra configuration.

Seeing an error instead of your website?

If you see a generic CloudFront error, your distribution may still be deploying. Return to the CloudFront console and check that the Last modified column shows a timestamp instead of "Deploying". Wait a few minutes and try again.

If the page loads but you see an XML error mentioning AccessDenied, check that you set the Default root object to index.html in your distribution's Settings.

Still stuck? Help me troubleshoot why my CloudFront distribution isn't loading my website.

Test your custom error page

A polished website handles broken links gracefully instead of showing ugly default errors. You configured CloudFront to serve your custom error page for any URL that does not match a real file.

  • In the same browser tab, add /doesnotexist to the end of your CloudFront URL (so it looks like https://d111111abcdef8.cloudfront.net/doesnotexist).
  • Press Enter to load the page.

You should see your custom 404 page with the large orange "404" heading, the message "Oops! This page doesn't exist.", and a link back to the homepage.

Why does this work?

When you request a file that doesn't exist in your S3 bucket, S3 returns a 403 (Access Denied) error to CloudFront. Your custom error response catches that 403, serves /error.html instead, and changes the response code to 404. The visitor sees a friendly page instead of a raw error.

  • Click the Go back to the homepage link on the error page to confirm it takes you back to your main website.

Seeing XML instead of your error page?

If you see raw XML with an error message instead of your styled 404 page, your custom error response may not be configured correctly. Return to your CloudFront distribution, click the Error pages tab, and verify you have an entry for HTTP error code 403 with the response page path set to /error.html and response code 404.

Need more help? Help me figure out why my custom error page isn't showing up on my CloudFront distribution.

Verify S3 is not publicly accessible

The whole point of using Origin Access Control is to keep your S3 bucket private. Only CloudFront should be able to read your files. Let's prove that by trying to access a file directly through S3.

  • Switch back to the AWS Console tab in your browser.
  • Navigate to the S3 service using the search bar at the top.
  • Click on your bucket name to open it.
  • In the Objects list, click on index.html to open its details.
  • In the Object overview section, find the Object URL field. Copy this URL.
  • Open a new browser tab and paste the Object URL into the address bar.
  • Press Enter.

You should see an Access Denied error. This is exactly what you want. It proves that nobody can bypass CloudFront to read your files directly from S3.

Why is Access Denied a good thing here?

Your S3 bucket has Block Public Access turned on. The only entity allowed to read your files is your CloudFront distribution, via the OAC bucket policy that was created automatically.

This means all traffic to your website must go through CloudFront. That gives you HTTPS encryption, caching at edge locations worldwide, and a single access point you can monitor and control.

Not seeing Access Denied?

If the S3 Object URL loads the page instead of denying access, your bucket may have public access enabled. Return to your S3 bucket, click the Permissions tab, and confirm that Block all public access is set to On.

Need help? Help me understand why my S3 bucket is allowing public access when it should be private.

Secret mission

Add a Second Page and Improve Navigation

Your website works, but it's only one page. Real websites have multiple pages with navigation between them. Can you extend your site, push the updates to S3, and force CloudFront to serve the fresh content?

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Both S3 and CloudFront have generous free tier allowances. CloudFront offers 1 TB of data transfer out per month free (always free). S3 storage for a few HTML files costs fractions of a cent. You will not be charged for this project.

Resources you used:

  • 1 S3 bucket (stores your website files).
  • 1 CloudFront distribution (serves your website globally).
  • Local my-aws-website folder on your computer.

Keep everything running

No action needed. Choose this if you're still actively building or want to keep your website live at the CloudFront URL.

  • Your website remains accessible at your CloudFront distribution domain.
  • S3 storage for a few HTML/CSS files costs fractions of a cent per month.
  • CloudFront data transfer stays well within the always-free 1 TB monthly allowance.

Pause - I'll come back to this later

Disable your CloudFront distribution so it stops serving traffic, but keep your files in S3 for when you return.

  • Open the CloudFront console at https://console.aws.amazon.com/cloudfront/v4/home.
  • Select the checkbox next to your distribution.
  • Click Disable, then confirm with Yes, Disable.
  • Wait for the Last modified column to show a new timestamp.
  • Your S3 bucket and files remain intact. When you're ready to resume, select the distribution and re-enable it.

Delete - I don't want to use this again

Remove all project resources permanently. This cannot be undone.

Delete the CloudFront distribution
  • Open the CloudFront console at https://console.aws.amazon.com/cloudfront/v4/home.
  • Select the checkbox next to your distribution.
  • Click Disable, then confirm with Yes, Disable.
  • Wait for the Last modified column to show a new timestamp (this may take a few minutes).
  • Select the checkbox next to your distribution again.
  • Click Delete, then confirm with Delete.
Empty and delete the S3 bucket
  • Open the S3 console at https://console.aws.amazon.com/s3/.
  • In the left navigation pane, choose General purpose buckets.
  • Select the radio button next to your bucket, then choose Empty.
  • Type permanently delete in the confirmation field, then choose Empty.
  • Return to the bucket list. Select your bucket again, then choose Delete at the top of the page.
  • Type your bucket name in the confirmation field, then choose Delete bucket.
Delete local files
  • Delete the my-aws-website folder from your Desktop.
  • On Windows, right-click the folder in File Explorer and select Delete. On macOS, drag it to the Trash.

That's a Wrap!

That's a Wrap!

Nice work! You just deployed your first website to the cloud.

You've learned how to:

  • Created an S3 bucket and uploaded website files to host a static site without managing a server.
  • Created a CloudFront distribution with Origin Access Control to serve your site globally over HTTPS.
  • Connected AWS services through bucket policies and custom error responses to build a secure, polished website.
  • Secret Mission: Added a second page, created a cache invalidation, and configured multi-page navigation.

Ready to quiz yourself?