Secure a Static Site with CloudFront

Deliver a private S3 website securely through CloudFront with HTTPS.

Introduction

30 Second Summary

A website can look finished on your computer yet remain impossible for anyone else to visit. Publishing it safely means giving viewers a fast public route while keeping the stored files out of direct reach.

In this project, you will build a deployment-status landing page for secure delivery through Amazon CloudFront over HTTPS. You'll keep its Amazon S3 files private while proving that Amazon CloudFront can still serve them.

What You'll Build

You'll open your finished landing page over HTTPS at its Amazon CloudFront address in Microsoft Edge while the matching direct Amazon S3 address stays blocked.

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

A responsive local website with a dark gradient behind a centered deployment-status card.
A working root address that redirects visitors to HTTPS before showing the site from its private Amazon S3 origin.
A security comparison showing the working Amazon CloudFront page beside a denied direct Amazon S3 request.
Secret Mission: You'll add Cache refreshed successfully. to the live page. You'll use a cache invalidation so viewers see the update immediately.

Are there any prerequisites?

No prior cloud or web development experience is required. You need a Windows device with Microsoft Edge and Notepad available.

Before We Start

Before any hands-on work begins, lock in the website you are building. Its defining proof is that Amazon CloudFront can deliver the site while Amazon S3 rejects anonymous access.

Set Up Your Free AWS Workspace

Your website has a clear destination: secure delivery through Amazon CloudFront from private files in Amazon S3.

This step prepares the AWS Management Console before you build anything. It also creates the Windows workspace for your local files.

In this step, get ready to:

Activate an AWS account on the Free plan.
Prepare Notepad with a dedicated local project folder.
Prepare both AWS service dashboards in Microsoft Edge.

Create your Free plan account

The Free plan gives you a protected space for this tutorial. Account activation verifies your identity before AWS gives you access to its services.

Why does AWS ask for verification?

AWS may request billing or identity details during activation. These checks help verify the account.

The Free plan ensures no charges while you explore AWS services. It ends after six months or when your credits are fully used.

Press the Windows key to open the Start search.
Type Microsoft Edge and press Enter to open it.
Search for Sign up for AWS.
Choose the official AWS result.
Select Sign up for AWS (new) if it is offered.
Use Sign up for AWS (advanced) if the new experience is unavailable.
Choose the Free plan during signup.
Complete any requested billing or identity verification.

Activation usually takes a few minutes. Some advanced signups take up to 24 hours.

A longer wait can still be part of normal account activation.

Wait for the activation confirmation from AWS.
Sign in to the AWS Management Console in Microsoft Edge.

You are through the account setup. When Console Home loads, your AWS session is active.

Still waiting for account access?

Check the spam folder for your activation confirmation.
Use the same email address from signup when you sign in.
Get help with an AWS activation or sign-in problem.

Confirm the Free plan

Your account plan controls the cost boundary for this project. Confirming it now keeps every later resource inside the intended setup.

Locate the Cost and Usage widget on AWS Console Home.
Confirm that the widget displays your free account plan information.

You should see details for the Free plan. This confirms that your account has the correct plan for the tutorial.

Cannot find your plan information?

Open Billing and Cost Management from the AWS Console search results.
Check the console home for your free account plan information.
Get help locating your AWS account plan.

Keep CloudFront on Free Tier

Free Tier accounts cannot use CloudFront flat-rate plans. This project uses a standard CloudFront distribution within the documented Free Tier allowance.

Prepare Windows and the service consoles

A dedicated folder keeps the two website files together. Notepad gives you a blank editor for the page you build next.

Press the Windows key to open the Start search.
Type Notepad and press Enter to open it.
Leave the blank Notepad document open.
Press the Windows key again.
Type File Explorer and press Enter to open it.
Select Documents in the left navigation pane.
Choose New at the top of File Explorer.
Choose Folder.

File Explorer now shows a name field for the new folder.

Type secure-static-site and press Enter.
Open the secure-static-site folder to confirm that it is empty.

Your empty Documents/secure-static-site folder is ready for the website files.

Why open both dashboards now?

Amazon S3 will store the website files. Amazon CloudFront will deliver those files through a secure viewer URL.

Keeping both consoles open gives you a short path from local files to cloud delivery.

Switch back to Microsoft Edge from the account setup.
Enter S3 in the AWS Console search bar.
Select Amazon S3 from the search results.
Leave the Amazon S3 console tab open.
Click the plus button in the Microsoft Edge tab bar to open a new tab.
Paste https://console.aws.amazon.com/cloudfront/v4/home into the address bar.
Press Enter to load the Amazon CloudFront console.

Before you check, which windows or console tabs should prove that your workspace is ready?

Switch to Notepad to confirm that the document is blank.
Switch to the Amazon S3 tab to confirm that its service dashboard is open.
Select the Amazon CloudFront tab to confirm that its service dashboard is open.
Return to File Explorer to confirm that Documents/secure-static-site is empty.

You should see a blank Notepad document. Microsoft Edge should show open tabs for the Amazon S3 and Amazon CloudFront dashboards.

File Explorer should show the empty Documents/secure-static-site folder. That clean workspace is ready for your first website files.

Your AWS session and Windows workspace are ready. Next up, you'll build the landing page inside your new folder.

Build and Preview the Site

Your AWS workspace is ready. The cloud steps are easier to debug when you already know the page works on your computer.

You’ll use Notepad to create the HTML structure for a compact status card.

CSS will shape the card’s visual design. Microsoft Edge will prove both files work together before you upload them.

In this step, get ready to:

Create the page structure in index.html.
Add the responsive dark design in style.css.
Preview the completed page in Microsoft Edge.

Create the page structure

HTML describes the content that the browser renders. The class names in this file give the stylesheet precise parts to target.

Paste the following code into the blank Notepad document:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Edge Delivered</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="card">
    <p class="eyebrow">Amazon S3 + Amazon CloudFront</p>
    <h1>Private origin. Global delivery.</h1>
    <p class="summary">
      This site is stored in a private S3 bucket and delivered securely through CloudFront.
    </p>

    <ul class="status-list" aria-label="Deployment status">
      <li><span>Origin</span><strong>Private S3 bucket</strong></li>
      <li><span>Access</span><strong>CloudFront OAC</strong></li>
      <li><span>Viewer protocol</span><strong>HTTPS</strong></li>
    </ul>

    <p class="proof">Built on Windows and delivered through a CDN.</p>
  </main>
</body>
</html>

What Does This Code Do?

The link element tells the browser to load style.css from the same folder.
The card class wraps every visible part of the landing page.
The eyebrow, summary, status-list, and proof classes provide separate styling hooks.
The viewport setting lets the layout respond to the width of the viewer’s screen.

Select File in Notepad.
Select Save As.
Choose the Documents/secure-static-site folder.
Set Save as type to All Files (*.*).
Enter index.html in File name.
Select Save.

The Notepad tab now shows index.html. This confirms that your first website file exists in Documents/secure-static-site.

Seeing index.html.txt?

Return to Save As if the Notepad tab shows index.html.txt.
Set Save as type to All Files (*.*) before saving the file again.
Check that index.html contains no spaces.
Help me save index.html without a .txt extension in Windows Notepad.

A browser can render the HTML before the stylesheet exists. This first preview proves the page structure is readable.

Switch back to Microsoft Edge from earlier.
Press Ctrl+O.
Select Documents/secure-static-site/index.html.
Press Enter to load the selected file.

You should see the heading Private origin. Global delivery. with the status text underneath it. The content still looks plain because style.css does not exist yet.

Does the page stay blank?

Confirm that Edge opened Documents/secure-static-site/index.html.
Check that the first line in Notepad is <!doctype html>.
Compare the closing </body> tag with the code above.
Help me troubleshoot a blank local index.html page in Microsoft Edge.

Style the landing page

A stylesheet applies visual rules through selectors such as body and .card. You’ll add the rules in small groups so each refresh shows what changed.

Switch back to Notepad.
Select the plus button on Notepad’s tab bar to create a blank document.
Add the page-wide styles by pasting this code:

:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #07111f;
  color: #e8f0ff;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, #1f4f78 0, transparent 38%),
    linear-gradient(145deg, #07111f, #0b1e33 60%, #102a43);
}

What Do These Styles Control?

The :root rules set the page font plus its default dark colors.
The universal * selector keeps padding inside each element’s calculated width.
The body rules fill the browser window with a layered gradient.
The grid alignment places the page content in the center of the window.

Select File in Notepad.
Select Save As.
Choose the Documents/secure-static-site folder.
Set Save as type to All Files (*.*).
Enter style.css in File name.
Select Save.

The Notepad tab now shows style.css. Your two website files now sit together in Documents/secure-static-site.

Switch back to the local page in Microsoft Edge.
Press Ctrl+O.
Select Documents/secure-static-site/index.html.
Press Enter to reload the selected file.

You should see a dark blue gradient filling the window. The page content now sits near the center.

Still seeing a white background?

Confirm that the second Notepad tab shows style.css.
Check that both files are inside Documents/secure-static-site.
Confirm that the HTML link uses href="style.css".
Help me find why style.css is not loading beside my local index.html file.

The page background is ready. The next rules turn the loose content into a bordered card with a clear visual hierarchy.

Place the cursor after the final closing brace in style.css.
Add the card plus heading styles by pasting this code on a new line:

.card {
  width: min(680px, 100%);
  padding: 40px;
  border: 1px solid #37648a;
  border-radius: 24px;
  background: rgba(7, 17, 31, 0.88);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

.eyebrow {
  margin: 0 0 12px;
  color: #7dd3fc;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  line-height: 0.98;
}

How Does the Card Take Shape?

The .card selector limits the content width while allowing the card to shrink on smaller screens.
The border plus translucent background separate the card from the page gradient.
The .eyebrow selector creates the small blue label above the heading.
The h1 rule scales the main heading according to the available screen width.

Save style.css by pressing Ctrl+S.
Switch back to the local page in Microsoft Edge.
Press Ctrl+O.
Select Documents/secure-static-site/index.html.
Press Enter to reload the selected file.

You should see a rounded dark card with a thin blue border. The blue eyebrow sits above a much larger heading.

Is the content still borderless?

Check that the selector begins with .card.
Confirm that the HTML uses class="card" on the main element.
Check that every selector block ends with a closing brace.
Help me troubleshoot why my .card and .eyebrow CSS styles are not appearing.

The card now has its main shape. The next rules organize the summary plus the three deployment status rows.

Place the cursor after the h1 block in style.css.
Add the summary plus status-list styles by pasting this code on a new line:

.summary {
  margin: 24px 0;
  color: #b9cbe0;
  font-size: 1.1rem;
  line-height: 1.7;
}

.status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #294864;
}

.status-list li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #294864;
}

How Are the Status Rows Organized?

The .summary selector gives the supporting sentence more space plus a softer color.
The .status-list selector removes the browser’s default bullets plus spacing.
Each .status-list li row places its label opposite its value.
The row borders make each deployment detail easy to scan.

Save style.css by pressing Ctrl+S.
Switch back to the local page in Microsoft Edge.
Press Ctrl+O.
Select Documents/secure-static-site/index.html.
Press Enter to reload the selected file.

You should see three separated status rows inside the card. Each label sits across from its deployment value.

Are the status rows still stacked?

Confirm that the row selector is .status-list li.
Check that the selector contains display: flex.
Compare the status-list spelling in both files.
Help me troubleshoot why the rows in .status-list are not using the CSS layout.

The layout is complete. The final color rules distinguish labels from values plus finish the proof line at the bottom.

Place the cursor after the .status-list li block in style.css.
Add the final text-color styles by pasting this code on a new line:

.status-list span {
  color: #8ea8c1;
}

.status-list strong {
  color: #a7f3d0;
  text-align: right;
}

.proof {
  margin: 24px 0 0;
  color: #dbeafe;
}

What Finishes the Design?

The .status-list span selector gives each row label a muted blue-gray color.
The .status-list strong selector highlights each deployment value in green.
The .proof selector separates the closing sentence from the status rows.

Save style.css by pressing Ctrl+S.
Switch back to the local page in Microsoft Edge.
Press Ctrl+O.
Select Documents/secure-static-site/index.html.
Press Enter to reload the selected file.

You should see muted labels beside green status values. The proof sentence appears below the final row.

Are the final colors missing?

Confirm that the final rules sit outside the closing brace for .status-list li.
Check that .status-list strong includes the leading period.
Confirm that the HTML proof paragraph uses class="proof".
Help me troubleshoot missing text colors in my status-list and proof CSS.

Preview the finished site

The final preview checks the exact file that you’ll upload later. Before you open it again, do you expect Edge to show plain text or the completed dark card?

Press Ctrl+O in Microsoft Edge.
Select Documents/secure-static-site/index.html.
Press Enter to complete the final preview.

You should see a dark gradient background with a centered status card. The card heading says Private origin. Global delivery..

That local baseline is working. Your browser has loaded the HTML structure plus its matching stylesheet from the same folder.

✔️ Awesome, I've got everything!

Keep the styled page open in Microsoft Edge for your checkpoint.
Keep both files in Documents/secure-static-site for the next step.

ⓧ I'd like to double check the full code

Compare both files with these complete versions. The filenames plus their shared folder must match exactly.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Edge Delivered</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="card">
    <p class="eyebrow">Amazon S3 + Amazon CloudFront</p>
    <h1>Private origin. Global delivery.</h1>
    <p class="summary">
      This site is stored in a private S3 bucket and delivered securely through CloudFront.
    </p>

    <ul class="status-list" aria-label="Deployment status">
      <li><span>Origin</span><strong>Private S3 bucket</strong></li>
      <li><span>Access</span><strong>CloudFront OAC</strong></li>
      <li><span>Viewer protocol</span><strong>HTTPS</strong></li>
    </ul>

    <p class="proof">Built on Windows and delivered through a CDN.</p>
  </main>
</body>
</html>

:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #07111f;
  color: #e8f0ff;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, #1f4f78 0, transparent 38%),
    linear-gradient(145deg, #07111f, #0b1e33 60%, #102a43);
}

.card {
  width: min(680px, 100%);
  padding: 40px;
  border: 1px solid #37648a;
  border-radius: 24px;
  background: rgba(7, 17, 31, 0.88);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

.eyebrow {
  margin: 0 0 12px;
  color: #7dd3fc;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  line-height: 0.98;
}

.summary {
  margin: 24px 0;
  color: #b9cbe0;
  font-size: 1.1rem;
  line-height: 1.7;
}

.status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #294864;
}

.status-list li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #294864;
}

.status-list span {
  color: #8ea8c1;
}

.status-list strong {
  color: #a7f3d0;
  text-align: right;
}

.proof {
  margin: 24px 0 0;
  color: #dbeafe;
}

Your landing page now has a working local baseline. Next, you’ll upload these exact files to a private cloud origin.

Upload to a Private S3 Bucket

Your landing page now works locally in Microsoft Edge. The next goal is to give those files a cloud home.

In this step, you will upload the site to Amazon S3. The bucket stays private so anonymous viewers cannot bypass Amazon CloudFront later.

In this step, get ready to:

Create a general purpose S3 bucket with its privacy defaults intact.
Upload index.html and style.css under their exact filenames.
Prove that anonymous direct access receives an access-denied response.

Create the private S3 bucket

General purpose bucket names share a global namespace. The pattern secure-static-site-unique-suffix leaves room for a personal ending that makes your bucket unique.

Choose General purpose buckets in the Amazon S3 console from earlier.
Choose Create bucket.
Choose a lowercase ending that makes the example name unique to you.
Enter your finished name in the bucket name field: secure-static-site-unique-suffix.
Choose a nearby AWS Region.
Record that Region's code here: region-code.

The creation form now shows the default ownership controls for your bucket. It also shows the public-access controls.

Confirm Object Ownership remains set to Bucket owner enforced.
Confirm all four Block Public Access settings remain enabled.
Choose Create bucket.

You should see secure-static-site-unique-suffix in the general purpose bucket list. Your private storage origin is ready for the site files.

Why keep the defaults?

The Bucket owner enforced default disables ACLs. This keeps file control with the bucket owner.

Block Public Access rejects anonymous requests. These settings create the private origin required for secure delivery.

Upload the site files

Amazon S3 stores each uploaded file as an object. Its filename becomes the object key used in requests.

The link in index.html expects the exact key style.css.

Select secure-static-site-unique-suffix from General purpose buckets.
Choose Upload.
Choose Add files.
Browse to Documents/secure-static-site in the Windows file picker.
Select index.html.
Hold Ctrl while selecting style.css.
Confirm your selection in the Windows file picker.
Choose Upload.

You should see upload results for both files. Amazon S3 has copied each file under its original name.

Return to the bucket's Objects tab.

The Objects tab should list index.html and style.css. Your local page now has a private cloud copy.

Missing one of the files?

Upload the missing file from Documents/secure-static-site.
Check that the two object keys are exactly index.html and style.css.
Help me troubleshoot missing files in my S3 bucket.

Test anonymous direct access

A direct S3 object address follows https://bucket-name.s3.region-code.amazonaws.com/key-name. The key for this check is index.html.

Record the direct object URL you build from that pattern here: https://secure-static-site-unique-suffix.s3.region-code.amazonaws.com/index.html.
Use Microsoft Edge's browser menu to open an InPrivate window.
Paste https://secure-static-site-unique-suffix.s3.region-code.amazonaws.com/index.html into the address bar.

Before you send this request, do you think an anonymous browser can read the object?

Press Enter to send the request.

You should see AccessDenied or HTTP 403. The styled landing page should remain unavailable.

That denied request is a win. Anonymous viewers cannot bypass the delivery layer you add next.

Does the site load directly?

Return to your bucket in Amazon S3 if the styled card loads.
Confirm all four Block Public Access settings are enabled.
Compare the bucket name in your URL with secure-static-site-unique-suffix.
Compare the Region code in your URL with region-code.
Help me troubleshoot my direct S3 access test.

Your bucket now holds both website files. Next, CloudFront will deliver them without opening the S3 origin to anonymous viewers.

Put CloudFront in Front of S3

Your private Amazon S3 bucket already rejects anonymous requests. That protection keeps viewers from bypassing the delivery layer.

Amazon CloudFront can now become the public delivery layer. Origin Access Control lets CloudFront authenticate each origin request.

In this step, get ready to:

Create a CloudFront standard distribution.
Connect the existing private S3 bucket with Origin Access Control.
Compare the named object path with the bare distribution domain.

Create the CloudFront distribution

A CloudFront distribution defines which origin holds your files. It also gives viewers a generated cloudfront.net domain.

Switch back to the Amazon CloudFront console from earlier.
Choose Create distribution.
Enter secure-static-site in the Distribution name field.
Select Single website or app.
Continue to the origin page.

You'll see the controls that connect this distribution to its content origin.

Connect the private S3 origin

OAC signs CloudFront requests to S3. The existing bucket can keep Block Public Access enabled.

Why use OAC for this origin?

OAC works with a regular S3 bucket origin. It lets CloudFront request private objects on behalf of viewers.

An S3 website endpoint cannot use OAC. The regular bucket origin preserves the private-origin design.

Set Origin type to Amazon S3.
Choose Browse S3.
Select secure-static-site-unique-suffix.
Choose Use recommended origin settings.

What do the recommended settings do?

CloudFront configures OAC for the selected bucket. It also updates the S3 bucket policy when you create the distribution.

That policy permits authenticated requests from this distribution while anonymous requests remain blocked.

Leave AWS WAF protections disabled for this focused exercise.

Creating this cloud resource keeps your account on the AWS Free plan.

Choose Create distribution.

The configuration-heavy part is done: your standard distribution now has a private origin attached through OAC.

You'll see Last modified showing Deploying. A wait of several minutes is normal while CloudFront distributes the configuration.

Compare the distribution URLs

A distribution must finish deploying before you test it. First, you will request the named HTML object.

After that, you will test the shorter root URL.

Wait for Last modified to change from Deploying.

You'll see a date and time when the distribution is ready for testing.

Copy the assigned cloudfront.net domain into this field: your-distribution-domain.

Before you open the named file in Microsoft Edge, do you think CloudFront can reach an object that anonymous S3 viewers cannot?

Open https://your-distribution-domain/index.html in Microsoft Edge.

You'll see the styled status card with the heading Private origin. Global delivery..

You've proved that CloudFront can retrieve index.html from the private bucket.

Site not loading through CloudFront?

Confirm that Last modified shows a date and time before retrying the URL.
Open the distribution's origin details to confirm secure-static-site-unique-suffix is selected.
Help me troubleshoot why my CloudFront /index.html path is not loading.

The named object works. Now the bare domain gets the same test.

Before you open it, do you think the shorter URL will find index.html on its own?

Open https://your-distribution-domain/ in a new Microsoft Edge tab.

You'll see Error 403 Forbidden instead of the site. This is the intended shortfall.

CloudFront can retrieve a named object. The distribution has no Default root object yet.

Return to the /index.html tab.

You'll see the complete site still loading through CloudFront.

Your named file now loads through CloudFront from the private bucket. Next, you'll repair the bare domain before proving the HTTPS route.

Fix the Root URL and Prove Secure Delivery

Your Amazon CloudFront distribution already serves index.html from the private Amazon S3 origin. Its bare domain still returns 403 because CloudFront has no default root object for /.

This step gives the bare URL a target through the default root object. It also redirects HTTP viewers to HTTPS before you prove that direct S3 access remains blocked.

In this step, get ready to:

Map root requests to index.html.
Set the default cache behavior to redirect HTTP viewers to HTTPS.
Compare CloudFront delivery with direct S3 denial.

Set the default root object

A default root object tells CloudFront which file to request when a viewer omits a filename. Setting it to index.html gives the bare domain a route to the page that already works at /index.html.

Return to the Amazon CloudFront console from earlier.
Select the row for your distribution with the domain your-distribution-domain.
Select the General tab.
Choose Edit.
Enter index.html in Default root object.
Choose Save changes.

The General tab now shows index.html as the Default root object. Good progress. Root requests now have a specific file to retrieve.

Why Does the Filename Need No Slash?

Use index.html exactly as shown. CloudFront expects the object name without a leading slash.

Entering /index.html can cause another access-denied response. The plain filename maps the distribution root to the correct S3 object.

Redirect viewers to HTTPS

The viewer protocol policy controls how CloudFront handles requests from a visitor's browser. Redirecting HTTP to HTTPS moves each insecure request onto an encrypted connection.

Select the Behaviors tab.
Select the default cache behavior.
Choose Edit.
Set Viewer protocol policy to Redirect HTTP to HTTPS.
Choose Save changes.

The default cache behavior now lists Redirect HTTP to HTTPS as its Viewer protocol policy.

Can't Find the Protocol Setting?

Confirm that you selected the default cache behavior before choosing Edit.
Return to the Behaviors tab if the distribution settings page is showing another section.
Help me find the Viewer protocol policy for my CloudFront distribution.

Prove the delivery path

CloudFront needs time to deploy these settings across its network. The console can remain on Deploying during this wait. That status means the update is still progressing.

Wait for the distribution deployment to finish.

The Last modified field changes from Deploying to a date and time when the settings are ready to test.

Before you test the root URL, where do you think Microsoft Edge will finish after starting with http://?

Return to the Microsoft Edge tab with the bare CloudFront domain from the previous step.
Replace https:// at the start of the address with http://.
Press Enter.

The address bar finishes on https://. The landing page displays the complete styled site from the bare CloudFront domain.

Before the security test, do you expect the direct S3 object URL to work now that the CloudFront root URL works?

Return to the InPrivate window from your earlier direct S3 test.
Reload the direct S3 object URL.

You still see AccessDenied or HTTP 403. This proves that anonymous viewers cannot bypass CloudFront to retrieve the S3 object directly.

You have closed the security loop. The root URL now works over HTTPS while the origin remains private.

What Did These Tests Prove?

CloudFront can retrieve the private objects because Origin Access Control sends authenticated requests to the S3 origin. Viewers receive the site through the distribution's public domain.

Amazon S3 continues to reject anonymous browser requests. The working CloudFront page beside the denied S3 request proves that your origin cannot be accessed directly.

Secret mission

Refresh Cached Content

Update the live landing page with a cache confirmation message. Replace the private origin object and invalidate CloudFront's cached copy so viewers receive the change immediately.

Clean Up Your Resources

Your refreshed site is live through Amazon CloudFront from a private Amazon S3 bucket. The AWS Free account plan prevents charges while you explore.

Decide whether to keep your resources running, pause the website to return later, or delete the project entirely.

Cost warning

The monthly CloudFront Free Tier includes 1 TB of Data Transfer Out. It also includes 10 Million HTTP or HTTPS Requests.

The first 1,000 invalidation paths submitted each month are free. The AWS Free account plan ends after six months or when its credits are fully used.

Keep your account on the Free plan.
Avoid activating paid-only services.

Resources you used:

The CloudFront standard distribution at your-distribution-domain.
The private S3 general purpose bucket secure-static-site-unique-suffix.
The private S3 objects index.html and style.css.
The S3 bucket policy that permits authenticated origin requests from CloudFront.
The local folder Documents/secure-static-site.

Keep everything running

No action is needed. Choose this option if you want the refreshed website to remain available through CloudFront.

Leave the CloudFront distribution enabled so the website remains available.
Keep the S3 bucket unchanged so CloudFront can continue retrieving the private objects.
Retain Documents/secure-static-site so you can edit the website again.

Pause - I'll come back to this later

Disabling the distribution pauses website delivery. Your S3 bucket keeps the uploaded files for later.

Return to the Amazon CloudFront console from earlier.
Select the distribution for your-distribution-domain.
Choose Disable.
Choose Yes, Disable in the confirmation prompt.
Wait for the updated Last modified timestamp.
Leave the S3 bucket secure-static-site-unique-suffix unchanged.
Retain the local Documents/secure-static-site folder.

Your website delivery is now paused. The private origin files remain ready for a future return.

Delete - I don't want to use this again

Deletion is permanent. The order below removes CloudFront before its private S3 origin.

Remove the CloudFront distribution

Return to the Amazon CloudFront console from earlier.
Select the distribution for your-distribution-domain.
Choose Disable.
Choose Yes, Disable in the confirmation prompt.
Wait for the Last modified timestamp to update.
Choose Delete.
Wait until the distribution no longer appears in the CloudFront list.

That removes the public delivery layer. The private origin is now safe to remove.

Empty the S3 bucket

Return to the Amazon S3 console from earlier.
Select General purpose buckets.
Open secure-static-site-unique-suffix.
Choose Empty on the bucket page.
Complete the on-screen confirmation to remove index.html and style.css.

The bucket should now contain no objects. It is ready for deletion.

Delete the Empty S3 Bucket

Return to General purpose buckets.
Select secure-static-site-unique-suffix.
Choose Delete.
Enter secure-static-site-unique-suffix in the confirmation field.
Choose Delete bucket.

The bucket deletion also removes its attached bucket policy. The automatically configured OAC can remain as an unused configuration object.

Remove the Local Project Folder

Press the Windows key to open the search bar.
Type File Explorer.
Press Enter to open File Explorer.
Select Documents in the left sidebar.
Select the secure-static-site folder.
Press Delete to move the folder to the Recycle Bin.
Empty the Recycle Bin to remove the folder completely.

Your CloudFront distribution, S3 website files, S3 bucket, and local project folder are now removed.

Nice Work!

You did it! Your Windows landing page now loads over HTTPS through Amazon CloudFront from a private Amazon S3 origin.

You've learned how to:

Built a responsive two-file landing page with HTML and CSS. Previewed the styled status card in Microsoft Edge before deployment.
Kept the S3 origin private with all four Block Public Access settings enabled. Proved that anonymous direct requests remain denied.
Connected CloudFront to the private bucket with Origin Access Control. Fixed the bare domain with index.html as the default root object. Redirected HTTP viewers to HTTPS.
Secret Mission: Replaced the live index.html object with refreshed content. Used a wildcard cache invalidation so CloudFront displayed the update immediately.

Ready to quiz yourself?