Deliver a Website Globally with CloudFront

Host a static site on S3 and serve it globally through CloudFront's CDN.

Introduction

30 Second Summary

Every website you visit lives on a server somewhere in the world. The further you are from that server, the longer you wait for the page to load.

In this project, you will store a portfolio page in Amazon S3 and deliver it globally through Amazon CloudFront. Your page will load from the nearest edge location to each visitor instead of a single faraway server.

What You'll Build

A static portfolio page hosted on Amazon S3 and accelerated by Amazon CloudFront's global edge network, secured with HTTPS and Origin Access Control.

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

  • A static website hosted privately in an Amazon S3 bucket, accessible only through CloudFront.
  • A CloudFront distribution delivering your content from 750+ edge locations worldwide with HTTPS enabled automatically.
  • A cache invalidation that proves you understand how CDN updates propagate to the edge.
  • Secret Mission: Custom error pages and per-file-type cache behaviors for production-grade CDN management.

Are there any prerequisites?

No prior AWS experience is needed. This project includes setup for every tool, starting from scratch with your AWS account and CLI.

Before We Start

Before We Start...

Set Up Your AWS Account and CLI

Before you can deliver a website through CloudFront, you need access to AWS. Everything in this project happens inside the AWS Management Console and through the AWS CLI on your local machine.

In this step, you will create an AWS account, install the AWS CLI on Windows, and configure it with your credentials so you can interact with AWS services from your terminal.

In this step, get ready to:
  • Create an AWS account and sign into the console.
  • Install the AWS CLI and verify the installation.
  • Configure the CLI with your access credentials.
Create an AWS account and sign in

An AWS account gives you access to all the cloud services you need for this project. A credit card is required during signup, but this project stays within the free tier.

  • Open your browser and navigate to https://aws.amazon.com.
  • Click Create an AWS Account in the top right corner (or Sign In if you already have one).
  • Follow the on-screen prompts to complete your account creation.
  • Once signed in, you will land on the AWS Management Console dashboard.

What is the AWS Management Console?

The AWS Management Console is a web interface where you can create and manage cloud resources. Think of it as your control panel for everything in AWS.

Install the AWS CLI on Windows

The AWS CLI lets you run commands against AWS services directly from your terminal. You will use it later in this project to clean up resources.

  • Download the AWS CLI installer by visiting https://awscli.amazonaws.com/AWSCLIV2.msi in your browser.
  • Run the downloaded AWSCLIV2.msi file.
  • The installer will ask for administrator permissions. Click Yes on the Windows UAC prompt to allow it.
  • Follow the installer wizard, accepting the default settings, and click Install.
  • Once installation completes, click Finish.

Now you need to verify the installation worked. You must open a new Command Prompt window after installation for the PATH changes to take effect.

  • Press the Windows key to open your search bar.
  • Type Command Prompt and press Enter to open it.
  • Verify the AWS CLI is installed by running this command:
aws --version

✔️ I see a version number

You should see output similar to aws-cli/2.x.x Python/3.x.x Windows/10 exe/AMD64. The AWS CLI is installed and ready to go.

ⓧ Command not found

If Windows cannot find the aws command, try these fixes:

  • Close all open Command Prompt windows and open a brand new one. The PATH update only takes effect in new terminal sessions.
  • If that does not work, restart your computer to fully refresh the PATH environment variable.
  • If it still fails, re-download and run the installer from https://awscli.amazonaws.com/AWSCLIV2.msi. The installation may not have completed successfully.
Configure the AWS CLI with your credentials

The CLI needs credentials to authenticate your requests to AWS. You will create an access key in the console, then provide it to the CLI.

  • In the AWS Management Console, click your username in the top-right navigation bar.
  • Select Security credentials from the dropdown menu.
  • Scroll down to the Access keys section.
  • Click Create access key.
  • You may see a warning recommending alternatives to long-term access keys. For this learning project, select the acknowledgment checkbox and click Create access key.
  • On the Retrieve access keys page, click Show to reveal your Secret Access Key.
  • Copy both the Access Key ID and Secret Access Key to a secure location (such as a password manager). This is the only time the Secret Access Key will be shown.
  • Click Done.

What are access keys?

Access keys are a pair of credentials (an Access Key ID and a Secret Access Key) that let programs authenticate with AWS on your behalf. The CLI uses these to sign every request it sends to AWS services.

Never share your Secret Access Key with anyone or commit it to code. Treat it like a password.

Now configure the CLI with your new credentials. The aws configure command will prompt you for four values one at a time.

  • In your Command Prompt, run this command:
aws configure

What will this command ask me?

The aws configure command will prompt you for four values in sequence:

  • AWS Access Key ID: paste your Access Key ID.
  • AWS Secret Access Key: paste your Secret Access Key.
  • Default region name: type us-east-1.
  • Default output format: type json.
  • Enter each value when prompted and press Enter after each one.

Why us-east-1?

The us-east-1 region (N. Virginia) is required for CloudFront SSL certificates. Keeping all resources in the same region simplifies this project.

Getting an error during configuration?

  • Make sure you are pasting the Access Key ID and Secret Access Key exactly as they appeared on the Retrieve access keys page. Extra spaces or line breaks will cause authentication failures.
  • If you closed the Retrieve access keys page before copying, you will need to delete the key and create a new one.

Still stuck? Help me troubleshoot my AWS CLI configuration.

Your AWS environment is ready. Next up, you will create an S3 bucket and upload your portfolio page to it.

Create Your S3 Bucket and Upload Content

Your AWS account is ready and the CLI is configured. Now you need somewhere to store your website files.

In this step, you will create an S3 bucket to hold your portfolio page. The bucket stays completely private. Later, CloudFront will be the only gateway to your content.

In this step, get ready to:
  • Create a private S3 bucket in the us-east-1 region.
  • Write and upload a portfolio HTML page with CSS styling.
  • Confirm the bucket blocks direct public access.
Create an S3 bucket

An S3 bucket is a container that holds files (called objects) in the cloud. You need one bucket to store your website's HTML and CSS files.

  • In the AWS Management Console, type S3 into the search bar at the top and select S3 from the results.
  • Click Create bucket.
  • Under Bucket name, enter a globally unique name for your bucket (for example, my-portfolio-cdn-2026). Replace 2026 with your own numbers or initials to make it unique.
  • For AWS Region, select US East (N. Virginia) us-east-1.
  • Leave all other settings at their defaults. Confirm that Block all public access is checked.
  • Scroll to the bottom and click Create bucket.

Why is Block all public access enabled?

Keeping the bucket private means nobody can access your files directly through S3. Only CloudFront will be allowed to read from the bucket, which gives you a single secure entry point for all visitors.

What is a globally unique bucket name?

Every S3 bucket name must be unique across all AWS accounts worldwide. If the name you choose is already taken, AWS will show an error. Try adding your initials or a random number to make it unique.

You should see a green success banner confirming your bucket was created.

Seeing a "Bucket name already exists" error?

Someone else already has a bucket with that exact name. Try a different combination of words, numbers, or initials until AWS accepts it.

help me fix my S3 bucket name error

Create your portfolio page files

Before uploading anything to S3, you need to create the website files on your computer. You will build a simple portfolio page with an HTML file for structure and a CSS file for styling.

  • Open a text editor on your computer. You can use Notepad (Windows) or any editor you prefer.
  • Create a new file and paste the following HTML content into it:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to My Portfolio</h1>
        <p>Delivered globally via Amazon CloudFront CDN</p>
    </header>
    <main>
        <section>
            <h2>About Me</h2>
            <p>I am learning cloud computing and content delivery networks. This page is served from the nearest AWS edge location to you, anywhere in the world.</p>
        </section>
        <section>
            <h2>How This Works</h2>
            <p>This page is stored in an S3 bucket and delivered through CloudFront's 750+ edge locations. Open DevTools and check the response headers to see which edge served this page!</p>
        </section>
    </main>
    <footer>
        <p>Powered by Amazon S3 + CloudFront</p>
    </footer>
</body>
</html>

What does this HTML do?

  • The <header> section displays your portfolio title and a subtitle mentioning CloudFront.
  • The <main> section contains two content areas: an "About Me" blurb and a "How This Works" explanation.
  • The <link rel="stylesheet" href="style.css"> tag connects this page to the CSS file you will create next.
  • Save this file as index.html on your Desktop.

Now create the stylesheet that makes your portfolio look polished.

  • Create another new file in your text editor and paste the following CSS:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f5f5f5;
}

header {
    text-align: center;
    padding: 3rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 2rem;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

main {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

section {
    margin-bottom: 2rem;
}

section:last-child {
    margin-bottom: 0;
}

h2 {
    color: #667eea;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
}

footer {
    text-align: center;
    padding: 2rem 0;
    color: #666;
    font-size: 0.9rem;
}

What does this CSS do?

  • The * selector resets all default browser margins and padding for a consistent look.
  • The header uses a purple gradient background to create a bold visual banner.
  • The main section gets a white card with rounded corners and a subtle shadow.
  • The body is centered at 800px max width so the page looks clean on any screen size.
  • Save this file as style.css on your Desktop, in the same location as index.html.
  • Open your Desktop in File Explorer (Windows) or Finder (macOS). You should see both index.html and style.css listed.

Only seeing one file, or the file has a .txt extension?

In Notepad, when saving, change the Save as type dropdown from "Text Documents" to "All Files". Then type the full filename including the extension (index.html or style.css).

help me save my HTML file with the correct extension

✔️ Awesome, I've got everything!

Great. Make sure both files are saved on your Desktop before moving on.

ⓧ I'd like to double check the full code

Here is the complete index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to My Portfolio</h1>
        <p>Delivered globally via Amazon CloudFront CDN</p>
    </header>
    <main>
        <section>
            <h2>About Me</h2>
            <p>I am learning cloud computing and content delivery networks. This page is served from the nearest AWS edge location to you, anywhere in the world.</p>
        </section>
        <section>
            <h2>How This Works</h2>
            <p>This page is stored in an S3 bucket and delivered through CloudFront's 750+ edge locations. Open DevTools and check the response headers to see which edge served this page!</p>
        </section>
    </main>
    <footer>
        <p>Powered by Amazon S3 + CloudFront</p>
    </footer>
</body>
</html>

And the complete style.css file:

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f5f5f5;
}

header {
    text-align: center;
    padding: 3rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 2rem;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

main {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

section {
    margin-bottom: 2rem;
}

section:last-child {
    margin-bottom: 0;
}

h2 {
    color: #667eea;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
}

footer {
    text-align: center;
    padding: 2rem 0;
    color: #666;
    font-size: 0.9rem;
}
Upload your files to S3

With your files ready, upload them to the S3 bucket so they are stored in the cloud.

  • Return to the S3 console in your browser.
  • Click on the name of the bucket you just created to open it.
  • Click Upload.
  • Click Add files.
  • Select both index.html and style.css from your Desktop.
  • Click Upload.

You should see a green "Upload succeeded" banner. Both files now appear in your bucket's object list.

Upload failed?

Make sure you selected the correct files from your Desktop. If you saved them with a .txt extension by accident, re-save them with the correct .html and .css extensions and try uploading again.

help me fix my S3 upload issue

Verify the bucket is private

Your bucket has "Block all public access" enabled. This means nobody can reach the files through S3 directly. You can confirm this by trying to open the S3 object URL in your browser.

  • In the S3 console, click on index.html in your bucket's object list to open its detail page.
  • Find the Object URL field in the Object overview section.
  • Click the Object URL link to open it in a new browser tab.

You should see an "AccessDenied" error in your browser. This confirms your bucket is private and not publicly accessible.

Why is Access Denied a good thing?

This error proves that the bucket is locked down. Nobody on the internet can reach your files by guessing the S3 URL. In the next step, you will create a CloudFront distribution that has permission to read from this bucket and deliver the content securely over HTTPS.

Your website files are safely stored in a private S3 bucket. Next up, you will create a CloudFront distribution that serves these files to visitors worldwide through 750+ edge locations.

Create a CloudFront Distribution with OAC

Your S3 bucket is loaded with content, but right now nobody can reach it. The bucket is locked down with Block all public access enabled.

In this step, you will create a CloudFront distribution that acts as the global front door to your bucket. CloudFront will use Origin Access Control (OAC) to securely read from your private bucket, so visitors never touch S3 directly.

In this step, get ready to:
  • Open CloudFront and start creating a distribution.
  • Configure the origin with OAC so CloudFront can read your private S3 bucket.
  • Select the Free pricing plan and launch your distribution globally.
Open CloudFront and start creating a distribution

A CDN distribution is the configuration that tells CloudFront where your content lives and how to serve it. Creating one connects your private S3 bucket to CloudFront's 750+ edge locations worldwide.

  • In the AWS Management Console, use the search bar at the top to search for CloudFront.
  • Select CloudFront from the results to open the CloudFront console.
  • In the left navigation pane, click Distributions.
  • Click Create distribution.
  • Enter a name for your distribution in the Distribution name field (e.g., My Portfolio CDN).
  • Select Single website or app, then click Next.
  • On the Domain setup page, skip the domain configuration and click Next.

What is a CloudFront distribution?

A distribution is CloudFront's term for the set of instructions that define how your content gets served globally. It maps an origin (your S3 bucket) to a unique domain name like d111111abcdef8.cloudfront.net.

When someone visits that domain, CloudFront routes them to the nearest edge location. If the content is cached there, it is returned instantly. If not, CloudFront fetches it from your S3 bucket and caches it for future visitors.

Configure the origin with OAC

The origin is where CloudFront pulls your actual files from. You will point it at your S3 bucket and let CloudFront set up secure access automatically.

  • On the Specify origin page, select Amazon S3 as the origin type.
  • For S3 origin, click Browse S3 and select your my-portfolio-cdn-2026 bucket.
  • For Settings, choose Use recommended origin settings.
  • Click Next.
  • On the Enable security protections page, leave the default settings and click Next.

What is Origin Access Control?

Origin Access Control (OAC) is a security feature that lets CloudFront access your private S3 bucket without making the bucket public. When you choose "Use recommended origin settings", CloudFront automatically creates an OAC policy and updates your bucket policy to grant CloudFront read access.

This means your S3 bucket stays fully private. The only way visitors can reach your files is through CloudFront's domain. Direct S3 URLs continue to return "Access Denied".

Select the Free pricing plan and create

CloudFront offers flat-rate pricing plans that bundle CDN delivery, security, and DNS into a single monthly price with no overage charges. The Free plan costs $0/month and includes 1 million requests and 100GB of data transfer.

  • On the pricing plan step, select the Free plan ($0/month).
  • Click Create distribution.

What does the Free plan include?

The Free flat-rate plan bundles CloudFront CDN, AWS WAF, DDoS protection, Route 53 DNS, TLS certificate, and serverless edge compute into $0/month. You get 1 million requests and 100GB of data transfer per month with no overage charges.

You can have up to three Free plans per AWS account. If you exceed the usage allowance, performance may be reduced, but you will never be billed extra.

Using an AWS Free Tier account?

AWS accounts using the AWS Free Tier cannot use CloudFront Flat-Rate Plans. If you do not see the Free plan option, your account is using pay-as-you-go pricing instead. This still has its own perpetual free tier (1TB data transfer and 10 million requests per month), so this project costs $0 either way.

CloudFront will now deploy your distribution across its global edge network. This takes 3-5 minutes.

  • Wait for the Last modified field to change from Deploying to a date and time. This confirms your distribution is active.
  • Find the Distribution domain name in the details section. It looks like d111111abcdef8.cloudfront.net.
  • Copy this domain name and save it somewhere you can find it later. You will use it in the next step to access your website.

Still showing Deploying after 5 minutes?

Distribution deployment can occasionally take longer than 5 minutes. Refresh the page using your browser's refresh button and check the Last modified field again. If it still shows Deploying after 10 minutes, verify your AWS region is set to a supported region in the console header.

Why is my CloudFront distribution stuck on Deploying?

Your website is now being served from CloudFront's global edge network. Next up, you will visit your new CloudFront URL and see your portfolio page delivered over HTTPS from the nearest edge location.

Test Your CDN-Delivered Website

Your CloudFront distribution is live and ready to serve your portfolio page from edge locations around the world.

In this step, you will load your website through the CloudFront HTTPS URL and use browser Developer Tools to observe how CDN caching works in real time.

In this step, get ready to:
  • Access your portfolio through the CloudFront HTTPS endpoint.
  • Inspect response headers to identify the serving edge location.
  • Observe cache hit and miss behavior across multiple requests.
Access your site through CloudFront

Your S3 bucket is private. The only way to reach your content is through the CloudFront distribution URL you recorded in the previous step.

  • Open your browser and navigate to your CloudFront URL:
https://[[CLOUDFRONT_DOMAIN="d111111abcdef8.cloudfront.net"]]/index.html

Your portfolio page should load with the purple gradient header, your About Me section, and the How This Works section.

What is happening here?

When you visit this URL, your browser connects over HTTPS automatically. CloudFront provides a free TLS certificate for its default domain, so your connection is encrypted without any extra configuration.

Behind the scenes, CloudFront routed your request to the nearest edge location. That edge location fetched your index.html from your S3 bucket and cached a copy for future visitors in your area.

Seeing an Access Denied or error page?

Make sure your distribution status shows a timestamp (not "Deploying") in the CloudFront console. Distributions typically take 3-5 minutes to finish deploying.

Also confirm you are using the CloudFront domain (ending in .cloudfront.net) and not the S3 bucket URL directly.

Help me troubleshoot my CloudFront distribution not serving my S3 content.

Inspect the response headers

Your browser's Developer Tools reveal exactly how CloudFront handled your request. The response headers tell you whether the content came from the edge cache or from your S3 origin.

  • Press F12 to open Developer Tools.
  • Click the Network tab at the top of the DevTools panel.
  • Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (macOS) to hard-refresh the page and capture the network request.
  • Click on index.html in the request list.
  • Click the Headers tab in the details pane on the right.
  • Scroll down to the Response Headers section.

You should see a header called X-Cache with the value Miss from cloudfront. This means CloudFront did not have the file in its edge cache and fetched it from your S3 bucket.

You should also see X-Amz-Cf-Pop which shows a short code like IAD89-C1 identifying which edge location served your request.

What do these headers mean?

  • X-Cache tells you whether CloudFront served the file from its cache (Hit) or fetched it from the origin (Miss).
  • X-Amz-Cf-Pop identifies the specific Point of Presence (edge location) that handled your request. The code maps to an airport near the edge server.

Don't see these headers?

Make sure you clicked on the index.html request specifically, not the style.css request or another resource. Both will have the headers, but start with index.html for clarity.

If the Network tab is empty, make sure DevTools was open before you refreshed the page. Close DevTools, reopen with F12, then refresh.

Help me find the CloudFront response headers in my browser's Developer Tools.

Understand the cache behavior

The real power of a CDN becomes visible when you reload the page. CloudFront has now cached your file at the edge, so the next request skips the trip to S3 entirely.

  • With DevTools still open on the Network tab, press F5 or click the reload button in your browser.
  • Click on the new index.html request in the Network tab.
  • Look at the X-Cache header in the Response Headers section.

This time, you should see X-Cache: Hit from cloudfront. CloudFront served the file directly from the edge cache without contacting your S3 bucket.

Why does this matter?

A cache hit means the file was served from a server geographically close to you. This dramatically reduces load time compared to fetching from a single origin server that might be thousands of miles away.

CloudFront keeps this cached copy for a default TTL of 86,400 seconds (24 hours). During that time, every visitor near your edge location gets the cached version instantly.

What is a TTL?

TTL stands for Time to Live. It controls how long CloudFront keeps a cached copy before checking the origin for updates. The default is 24 hours, which means CloudFront serves the same cached version for a full day before looking for changes in your S3 bucket.

You have confirmed that CloudFront is caching and serving your content from the edge. Next up, you will update your site and learn how to push changes through the cache using invalidation.

Update Content and Invalidate the Cache

In the previous step, you confirmed that CloudFront caches your content at edge locations around the world. But what happens when you need to update your site?

By default, CloudFront serves cached content for 24 hours before checking back with S3. In this step, you will update your portfolio page, see the stale cache in action, and then force CloudFront to fetch fresh content using a cache invalidation.

In this step, get ready to:
  • Update your portfolio page and re-upload it to S3.
  • Observe stale content served from CloudFront's edge cache.
  • Create a cache invalidation to push updates to all edge locations.
Update your portfolio page

To see cache invalidation in action, you need to make a visible change to your site. You will edit your index.html file and re-upload it to S3.

  • Open index.html on your computer in your text editor (Notepad or VS Code).
  • Find the <h1> heading that says Welcome to My Portfolio.
  • Change the heading text to something visibly different, such as Welcome to My Updated Portfolio.
  • Save the file.

Why a visible change?

You need to be able to tell at a glance whether CloudFront is showing the old version or the new one. A heading change is the quickest way to confirm that your invalidation worked.

  • Return to the S3 console in your browser.
  • Open your my-portfolio-cdn-2026 bucket.
  • Click Upload.
  • Drag your updated index.html file into the upload area.
  • Click Upload to confirm.

You should see a green success banner confirming the upload completed.

Upload not overwriting the old file?

Make sure the file is named exactly index.html (not index (1).html or similar). S3 overwrites objects with the same key name automatically.

Help me troubleshoot my S3 upload.

Observe stale cache

Your S3 bucket now has the updated file. But CloudFront does not know that yet.

  • Open a new browser tab and navigate to your CloudFront URL:
https://[[CLOUDFRONT_DOMAIN="your-distribution-id.cloudfront.net"]]/index.html
  • Look at the heading on the page.

The old heading still appears. CloudFront is serving the cached copy from the edge location nearest to you.

Why does the old version still show?

CloudFront's default TTL is 86,400 seconds (24 hours). Until that time expires, CloudFront serves the cached version without checking S3 for updates. This is the CDN working as designed. It reduces load on your origin and speeds up delivery.

To push an urgent update, you need to explicitly tell CloudFront to drop its cached copies. That is what a cache invalidation does.

Create a cache invalidation

A cache invalidation tells CloudFront to discard cached copies so the next request fetches fresh content from S3.

/*
  • Click Create invalidation.

What does /* mean?

The /* path is a wildcard that matches all files in your distribution. This tells CloudFront to discard every cached object so the next viewer request fetches fresh content from your S3 origin.

You could also invalidate a single file (e.g. /index.html), but the wildcard is convenient when you have changed multiple files.

  • Wait for the invalidation status to change from In progress to Completed. This typically takes 1-2 minutes.
  • Return to your browser tab with the CloudFront URL and refresh the page.

Your updated heading now appears. The invalidation forced CloudFront to fetch the latest version from S3.

Still seeing the old content after invalidation?

Make sure the invalidation status shows Completed in the CloudFront console. If it still says In progress, wait another minute and refresh.

Try a hard refresh in your browser. Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (macOS) to bypass any local browser cache.

Help me troubleshoot my cache invalidation.

Secret mission

Add Custom Error Pages and Cache Behaviors

Your CDN is live, but what happens when someone visits a page that does not exist? Right now they see a generic XML error. In this secret mission, you will create a polished custom error page and configure intelligent cache behaviors that treat different file types differently.

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.

This project uses the CloudFront Free flat-rate plan, which costs $0/month with no overage charges. Your S3 bucket stores less than 5GB, so there are no ongoing storage costs either.

Resources you used:

  • 1 CloudFront distribution on the Free flat-rate plan.
  • 1 S3 bucket containing index.html, style.css, and 404.html.
  • Local copies of index.html, style.css, and 404.html on your computer.

Keep everything running

No action needed. Choose this if you plan to keep experimenting with your CDN or want to leave your portfolio site live.

  • The Free flat-rate plan costs $0/month with no overage charges, as long as you stay within 1M requests and 100GB transfer per month.
  • S3 storage under 5GB incurs no charges.
  • The AWS CLI remains installed on your machine for future projects.

Pause - I'll come back to this later

CloudFront distributions cannot be paused, but you can disable the distribution. This stops it from serving traffic while keeping the configuration intact so you can re-enable it later.

  • Open the CloudFront console at https://console.aws.amazon.com/cloudfront/v4/home.
  • Select the check box for your distribution.
  • Choose Disable, then choose Yes, Disable to confirm.
  • Wait until a new timestamp appears under the Last modified column. This may take a few minutes.
  • Your distribution is now disabled. Visitors will no longer be able to access your site, but you can re-enable it at any time.

Delete - I don't want to use this again

Remove all project resources and start fresh. This cannot be undone.

Flat-rate plan constraint

You cannot delete a distribution that is subscribed to a CloudFront flat-rate pricing plan. You must first cancel the pricing plan from the CloudFront console's pricing page. After the current billing cycle ends, you can proceed with disabling and deleting the distribution.

If your account uses pay-as-you-go pricing instead of the flat-rate plan, you can skip straight to disabling and deleting below.

Delete the CloudFront distribution:

  • Open the CloudFront console at https://console.aws.amazon.com/cloudfront/v4/home.
  • Select the check box for your distribution.
  • Choose Disable, then choose Yes, Disable to confirm. Choose Close.
  • Wait until a new timestamp appears under the Last modified column. This may take a few minutes.
  • Select the check box for the distribution again.
  • Choose Delete, then Delete to confirm.

Delete the S3 bucket:

  • Empty and delete your S3 bucket by running this command in your terminal:
aws s3 rb s3://[[BUCKET_NAME="your-bucket-name"]] --force

Delete local files:

  • Delete the index.html, style.css, and 404.html files from wherever you saved them on your computer.

That's a Wrap!

That's a Wrap!

Nice work! You just deployed a static website to one of the world's largest CDN networks. Your portfolio page is now served from 750+ edge locations around the globe, secured with HTTPS, and you know exactly how to manage cached content at the edge.

Here's what you accomplished:

  • Created a CloudFront distribution with Origin Access Control keeping your S3 bucket private while delivering content globally over HTTPS.
  • Verified CDN caching in action by inspecting response headers (X-Cache: Hit/Miss and X-Amz-Cf-Pop) to see which edge location served your content.
  • Performed a cache invalidation to push content updates to all 750+ edge locations, proving you understand how CDN content freshness works.
  • Configured custom error pages and per-file-type cache behaviors with different TTLs for production-grade CDN management.

Ready to quiz yourself?