Host a Portfolio Website on Amazon S3

Host a portfolio site with public access and custom error pages on Amazon S3.

Introduction

30 Second Summary

People often meet your work through a link before they meet you. That link needs to open quickly while showing only what you intended to share.

In this project, you will build a compact portfolio site with a custom error page. You will publish it with Amazon S3 static website hosting by resolving a private 403 (Access Denied) response through scoped public read access.

What You'll Build

You open your live portfolio in Microsoft Edge to demo a cloud page that responds with your custom message when a visitor follows a missing address.

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

  • A local portfolio preview that lets you check your cloud learning card before publishing it.
  • A public website link that opens your portfolio directly from Amazon S3.
  • A before-and-after permission test that moves from 403 (Access Denied) to a working portfolio with a custom missing-page message.
  • Secret Mission: Add a linked About page that visitors can open from the portfolio before returning Home.

Are there any prerequisites?

You need a Windows computer with Windows Notepad, Microsoft Edge, internet access, and an AWS account that permits Amazon S3 bucket creation. Every detail you publish must be safe for anyone to read.

Before We Start

This first checkpoint locks in the purpose of your public learning portfolio. It also draws a clear boundary around the content you publish. Include only non-sensitive information that you are comfortable sharing with anyone online.

Confirm Your Free Plan and Windows Tools

Your portfolio eventually becomes a public cloud resource. A billing check prevents that learning site from turning into a surprise charge.

The Free account plan shows its remaining credits and time in AWS Billing and Cost Management. Those signals tell you whether to continue safely.

Microsoft Edge gives you access to the AWS Management Console. Windows Notepad must preserve the exact content of your local files.

In this step, get ready to:
  • Confirm that the Free account plan can cover this lab.
  • Verify that Microsoft Edge reaches the AWS Management Console.
  • Prove that Windows Notepad saves the setup file correctly.
Check your Free account plan

Billing checks can feel high-stakes, but you are only reading your account status here. This substep creates no cloud resources.

  • Press the Windows key to open Windows search.
  • Type Microsoft Edge into the search box.
  • Press Enter to open Microsoft Edge.
  • Visit the AWS Management Console sign-in page.
  • Sign in with the AWS account you use for this project.

You should reach the AWS Management Console home page. This confirms that Microsoft Edge can access the console.

  • Enter Billing and Cost Management into the console search bar.
  • Select Billing and Cost Management from the results.
  • Confirm that the console home identifies your account as using the Free account plan.
  • Confirm that your credit balance is positive.
  • Confirm that the plan shows time remaining.

Know When to Stop

This account check is the safety gate for the rest of the project.

  • Stop before creating cloud resources if the account shows a Paid account plan.
  • Stop before creating cloud resources if the credit balance is empty.
  • Stop before creating cloud resources if the Free account plan has no time remaining.

Your account is ready when all three checks pass. You now know that this lab can use the active Free account plan without an out-of-pocket charge.

Open Windows Notepad

A successful Notepad check proves that Windows can create the local files used by your website. It also gives you a chance to catch filename problems before any upload.

  • Press the Windows key to open Windows search.
  • Type Notepad into the search box.

✔️ Notepad appears in the results

  • Select Notepad from the results.

You should see a blank editing window. This confirms that Windows Notepad is installed and opens correctly.

ⓧ Notepad does not appear

No search result means Windows Notepad needs to be installed before you create the setup file.

You should see a blank editing window after the installation completes.

Windows Notepad Still Missing?

  • Confirm that the store listing names Microsoft Corporation as the publisher.
  • Restart Windows search after the installation completes.

Help me troubleshoot Windows Notepad installation on my Windows computer.

Create and reopen the setup file

The setup file tests the complete local workflow before you build the website. Its single line proves that the folder exists and that Notepad preserved your text.

  • Type S3 portfolio setup ready into the blank Notepad window.
  • Use Notepad's save command to open the save window.
  • Navigate to Documents in the save window.
  • Create a folder named s3-portfolio using the new-folder control.

You should see the new s3-portfolio folder inside Documents.

  • Open the s3-portfolio folder in the save window.
  • Enter setup-check.txt as the filename.
  • Save the file.

The Notepad title bar should now show setup-check.txt. This confirms that the file exists at Documents/s3-portfolio/setup-check.txt.

  • Close Windows Notepad.
  • Use Windows search to reopen Windows Notepad.
  • Open Documents/s3-portfolio/setup-check.txt by using Notepad's open-file command.

The reopened file should display the same single line you saved. Reopening it proves that the content was written to disk.

  • Compare your reopened file with the reference if you want to check every character.

✔️ Awesome, I've got everything!

Your reopened file matches the target when it contains the same single line.

ⓧ I'd like to double check the full code

S3 portfolio setup ready

Before the final check, which screens do you expect to prove that your account and Windows tools are ready?

  • Switch back to Microsoft Edge.
  • Confirm that AWS Billing and Cost Management still shows the Free account plan.
  • Confirm that the credit balance is positive.
  • Confirm that the plan has time remaining.
  • Return to the reopened setup-check.txt file in Windows Notepad.
  • Confirm that the file contains S3 portfolio setup ready.

You should see the active Free account plan in Microsoft Edge. Windows Notepad should show the saved setup message without any missing text.

That is the groundwork secured. Your account status is checked and your Windows file workflow is working.

Your account and Windows tools are ready. Next up, you will build the portfolio page and its custom error page.

Build Your Portfolio Pages

Your setup check proved that Windows Notepad can create files inside Documents/s3-portfolio.

Building the HTML pages locally gives you a visible result before any cloud configuration begins. You can catch filename problems while previewing both pages in Microsoft Edge.

In this step, get ready to:
  • Build a personalized portfolio landing page.
  • Create a custom page for missing website paths.
  • Verify both filenames before previewing the finished pages.
Build the portfolio page

The first version establishes the page structure before styling it. Its heading is also where you replace the generic profile text with information you are comfortable publishing.

  • Switch back to Windows Notepad from earlier.
  • Use the File menu to create a new document.
  • Build the initial structure of index.html by pasting this code:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Cloud Portfolio</title>
</head>
<body>
  <main class="card">
    <p class="eyebrow">Cloud Beginner Challenge</p>
    <h1>Hello, I am [your name].</h1>
    <p>I am learning how cloud storage, permissions, and static website hosting work on AWS.</p>

    <section class="skills">
      <h2>What I built</h2>
      <ul>
        <li>Created a general purpose bucket</li>
        <li>Uploaded static website files</li>
        <li>Configured public read access</li>
      </ul>
    </section>

    <footer>Built with HTML and Amazon S3.</footer>
  </main>
</body>
</html>

What Does This Code Do?

  • The document metadata gives the page its browser title.
  • The card container groups the portfolio content into one section.
  • The eyebrow text identifies the learning challenge.
  • The skills section lists the cloud work demonstrated by the site.
  • Replace the bracketed profile text in the main heading with a non-sensitive name you are comfortable publishing.
  • Select Save As from Notepad's File menu.
  • Choose the Documents/s3-portfolio folder in the save window.
  • Enter index.html in the File name field.
  • Save the file.
  • Open index.html from the Documents/s3-portfolio folder with Microsoft Edge.

You should see an unstyled page containing your personalized heading. The visible content proves that the file contains valid HTML.

Does the Page Show Code as Text?

Check the filename in the Documents/s3-portfolio folder. Remove a trailing .txt extension if Notepad added one.

Ask for help if the browser still displays the source code: help me check why my local HTML file opens as text in Microsoft Edge

Cascading Style Sheets control the visual layout of the page. The first CSS section sets the shared colours plus the full-page layout.

  • Return to index.html in Windows Notepad.
  • Find the closing </head> tag.
  • Add the base page styles immediately above that tag by pasting this code:
  <style>
    :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: linear-gradient(145deg, #07111f, #12355b);
    }
  </style>

How Do the Base Styles Help?

  • The root styles define the page font plus its dark colour palette.
  • The universal selector keeps padding within each element's width.
  • The body styles center the portfolio content against a blue gradient.
  • Save index.html.
  • Return to the local page in Microsoft Edge.
  • Refresh the page.

You should see the content centered on a dark blue background. The page now has its overall visual theme.

Still Seeing a White Background?

Confirm that the <style> section sits inside <head>. Check that you saved the same index.html file currently open in Microsoft Edge.

Ask for focused help: help me find why the base CSS is missing from my local portfolio page

  • Find the closing </style> tag in index.html.
  • Add the card styles immediately above that tag by pasting this code:
    .card {
      width: min(720px, 100%);
      padding: 40px;
      border: 1px solid #3d6d9e;
      border-radius: 20px;
      background: rgba(7, 17, 31, 0.9);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    }

    .eyebrow {
      color: #7dd3fc;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

What Shapes the Portfolio Card?

  • The .card selector creates the bordered panel around the portfolio.
  • The .eyebrow selector turns the challenge label into a compact accent.
  • Save index.html.
  • Return to Microsoft Edge.
  • Refresh the portfolio page.

You should see the content inside a rounded dark card. The challenge label should appear in light blue uppercase text.

Is the Card Still Plain Text?

Check that the opening element still uses class="card". Confirm that the challenge paragraph still uses class="eyebrow".

Ask for help matching the classes: help me compare my HTML classes with the supplied CSS selectors

  • Find the closing </style> tag again.
  • Add the remaining typography plus section styles immediately above that tag by pasting this code:
    h1 {
      margin: 12px 0;
      font-size: clamp(2rem, 7vw, 4rem);
      line-height: 1;
    }

    p,
    li {
      color: #c7d7eb;
      line-height: 1.7;
    }

    .skills {
      margin-top: 28px;
      padding: 20px;
      border-radius: 14px;
      background: #0d223b;
    }

    footer {
      margin-top: 28px;
      color: #8fa8c3;
      font-size: 0.9rem;
    }

What Finishes the Design?

  • The heading scales with the width of the browser window.
  • The paragraph plus list styles keep supporting text readable.
  • The .skills selector separates the achievement list from the introduction.
  • The footer uses a quieter colour to close the card.
  • Save index.html.
  • Return to Microsoft Edge.
  • Refresh the portfolio page.

You should see a large personalized heading above a separate skills panel. Your local portfolio page is now complete.

Does the Skills Panel Blend In?

Confirm that the section uses class="skills". Check that the final CSS appears before the closing </style> tag.

Ask for help locating the mismatch: help me debug the skills panel styling in my portfolio page

Use this reference to compare the complete file. Keep your personalized non-sensitive heading in place of the generic profile text shown here.

✔️ Awesome, I've got everything!

Great work. Your portfolio page now has its full structure plus all three project classes.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Cloud Portfolio</title>
  <style>
    :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: linear-gradient(145deg, #07111f, #12355b);
    }

    .card {
      width: min(720px, 100%);
      padding: 40px;
      border: 1px solid #3d6d9e;
      border-radius: 20px;
      background: rgba(7, 17, 31, 0.9);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    }

    .eyebrow {
      color: #7dd3fc;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1 {
      margin: 12px 0;
      font-size: clamp(2rem, 7vw, 4rem);
      line-height: 1;
    }

    p,
    li {
      color: #c7d7eb;
      line-height: 1.7;
    }

    .skills {
      margin-top: 28px;
      padding: 20px;
      border-radius: 14px;
      background: #0d223b;
    }

    footer {
      margin-top: 28px;
      color: #8fa8c3;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <main class="card">
    <p class="eyebrow">Cloud Beginner Challenge</p>
    <h1>Hello, I am [your name].</h1>
    <p>I am learning how cloud storage, permissions, and static website hosting work on AWS.</p>

    <section class="skills">
      <h2>What I built</h2>
      <ul>
        <li>Created a general purpose bucket</li>
        <li>Uploaded static website files</li>
        <li>Configured public read access</li>
      </ul>
    </section>

    <footer>Built with HTML and Amazon S3.</footer>
  </main>
</body>
</html>
Create the custom error page

A missing browser path needs its own clear response. This second file gives visitors a useful message plus a route back to the portfolio.

  • Switch back to Windows Notepad.
  • Use the File menu to create another new document.
  • Build the initial structure of 404.html by pasting this code:
<!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>
</head>
<body>
  <main>
    <h1>404</h1>
    <h2>This cloud object is missing.</h2>
    <p>The address does not match a file in this website's S3 bucket.</p>
    <a href="/">Return home</a>
  </main>
</body>
</html>

How Does the Error Page Work?

  • The 404 heading makes the missing-page state recognizable.
  • The message explains that the requested address does not match a website object.
  • The href="/" value points the home link at the website root.
  • Select Save As from Notepad's File menu.
  • Choose the Documents/s3-portfolio folder in the save window.
  • Enter 404.html in the File name field.
  • Save the file.
  • Open 404.html from the Documents/s3-portfolio folder with Microsoft Edge.

You should see an unstyled error message plus a Return home link. This confirms that the second HTML file opens correctly.

Is the Error Page Blank?

Check that 404.html contains both closing </body> plus </html> tags. Confirm that Microsoft Edge opened the file from Documents/s3-portfolio.

Ask for help checking the file: help me debug a blank local 404 page without changing the supplied content

  • Return to 404.html in Windows Notepad.
  • Find the closing </head> tag.
  • Add the page layout styles immediately above that tag by pasting this code:
  <style>
    body {
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      font-family: "Segoe UI", Arial, sans-serif;
      text-align: center;
      background: #07111f;
      color: #e8f0ff;
    }

    main {
      max-width: 520px;
    }
  </style>

What Creates the Error Layout?

  • The body styles center the error message across the browser window.
  • The dark background matches the portfolio page.
  • The main element limits the line length for easier reading.
  • Save 404.html.
  • Return to the error page in Microsoft Edge.
  • Refresh the page.

You should see the missing-page message centered on a dark background. The error state now matches the visual theme of your portfolio.

Is the Message Stuck in the Corner?

Confirm that the new <style> section sits inside <head>. Check that every brace in the body selector has a matching closing brace.

Ask for help with the layout: help me find why my local 404 message is not centered

  • Find the closing </style> tag in 404.html.
  • Add the heading plus link styles immediately above that tag by pasting this code:
    h1 {
      font-size: clamp(3rem, 12vw, 7rem);
      margin: 0;
      color: #7dd3fc;
    }

    p {
      line-height: 1.7;
      color: #c7d7eb;
    }

    a {
      color: #7dd3fc;
    }

What Finishes the Error State?

  • The main heading scales into the largest element on the page.
  • The paragraph uses a softer colour for the explanation.
  • The home link uses the same light blue accent as the heading.
  • Save 404.html.
  • Return to Microsoft Edge.
  • Refresh the error page.

You should see a large blue 404 above the custom missing-object message. The blue Return home link completes the page.

Is the 404 Heading Still Small?

Confirm that the selector is written as h1. Check that the heading in the page body uses the matching <h1> element.

Ask for help comparing the selector: help me check why the 404 heading style is not applying

✔️ Awesome, I've got everything!

That is the second page finished. Visitors now have a clear missing-page message plus a route home.

ⓧ I'd like to double check the full code

<!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>
    body {
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      font-family: "Segoe UI", Arial, sans-serif;
      text-align: center;
      background: #07111f;
      color: #e8f0ff;
    }

    main {
      max-width: 520px;
    }

    h1 {
      font-size: clamp(3rem, 12vw, 7rem);
      margin: 0;
      color: #7dd3fc;
    }

    p {
      line-height: 1.7;
      color: #c7d7eb;
    }

    a {
      color: #7dd3fc;
    }
  </style>
</head>
<body>
  <main>
    <h1>404</h1>
    <h2>This cloud object is missing.</h2>
    <p>The address does not match a file in this website's S3 bucket.</p>
    <a href="/">Return home</a>
  </main>
</body>
</html>
Verify the filenames and preview both pages

Windows uses the final filename extension to decide whether each document is a web page or a text file. This check prevents a hidden .txt extension from following your files into the cloud.

  • Inspect the filenames inside Documents/s3-portfolio.
  • Confirm that the folder contains setup-check.txt.
  • Confirm that the folder contains index.html.
  • Confirm that the folder contains 404.html.
  • Remove any trailing .txt extension from either HTML filename.

Before you open both finished pages, which visual details do you expect will make the portfolio state different from the missing-page state?

  • Open index.html from the local folder with Microsoft Edge.
  • Open 404.html from the local folder with Microsoft Edge.

The portfolio tab should show your personalized cloud portfolio card. The error tab should show the large 404 plus the custom missing-object message.

Does One File Still Open in Notepad?

Inspect the complete filename before changing the app used to open it. An HTML page ending in .txt remains a text document.

Ask for help checking the extension: help me verify the exact extensions of my two local HTML files

Your local website is ready for the cloud. Next, you will upload both pages to Amazon S3 while keeping the first deployment private.

Deploy a Private Website

Your portfolio and error page already work in Microsoft Edge. Now you will move those same files into Amazon S3.

The new general purpose bucket starts with Block Public Access enabled. What does its website endpoint do while the uploaded files remain private?

In this step, get ready to:
  • Create a general purpose S3 bucket with its default protections enabled.
  • Upload index.html and 404.html to the bucket root.
  • Configure static website hosting for the private website.
Create the private S3 bucket

Bucket names are shared across AWS accounts and Regions. A random suffix lowers the chance of a collision.

Bucket names can appear in public URLs. Keep sensitive information out of the name.

  • Use the search bar in the AWS Management Console to find Amazon S3.
  • Select Amazon S3 from the results.
  • Choose Create bucket.
  • Keep General purpose selected as the bucket type.
  • Enter your exact bucket name in the Bucket name field: cloud-portfolio-<six-random-digits>.
  • Choose a nearby AWS Region.
  • Keep all remaining settings at their defaults.
  • Choose Create bucket.

Good progress. Your private bucket should now appear in the bucket list under its unique name.

Bucket name unavailable?

Another AWS account may already own that bucket name.

  • Replace the six-digit suffix with a new random value.
  • Update your saved bucket name here: cloud-portfolio-<six-random-digits>.

Help me resolve an unavailable S3 bucket name.

Upload the website objects

Amazon S3 stores files as objects inside a bucket. Uploading both HTML files to the bucket root makes their object keys match the website document names.

  • Choose cloud-portfolio-<six-random-digits> from the bucket list.
  • Choose Upload.
  • Choose Add file.
  • Select Documents/s3-portfolio/index.html plus Documents/s3-portfolio/404.html in the file picker.
  • Choose Upload.
  • Wait for Upload: status to report success.
  • Return to the bucket's object list.

You should see index.html plus 404.html at the bucket root. Both pages are now stored as private objects.

Files missing from the bucket root?

  • Check the Upload: status page for a failed file.
  • Repeat Add file for any missing HTML file.
  • Choose Upload again.

Help me find why my HTML files are missing from the S3 bucket root.

Enable static website hosting

Static website hosting maps requests for the bucket root to index.html. Its error document handles requests for missing object keys.

  • Choose the Properties tab.
  • Scroll to Static website hosting.
  • Choose Edit.
  • Select Use this bucket to host a website.
  • Select Enable.
  • Enter index.html as the index document.
  • Enter 404.html as the error document.
  • Choose Save changes.

The Static website hosting section should now show that hosting is enabled.

Before you open the endpoint, do you think Microsoft Edge can read an object that still has no anonymous public-read permission?

  • Choose the Bucket website endpoint in the Static website hosting section.

Microsoft Edge shows 403 (Access Denied). This intended result proves that anonymous reads remain blocked.

Why Does the Endpoint Return 403?

Website hosting tells Amazon S3 which object answers the root request. Block Public Access still denies anonymous object reads.

The 403 (Access Denied) HTTP response is the visible proof.

Seeing Something Other Than 403?

  • Confirm that the browser address came from the Bucket website endpoint.
  • Confirm that index.html appears at the bucket root.
  • Confirm that Block Public Access remains enabled.

Help me diagnose why my private S3 website endpoint is not showing the expected 403 response.

You have reached the exact security boundary this deployment was meant to expose. Next, you will grant public read access only to the website objects.

Grant Public Read Access

Your Amazon S3 website endpoint can find index.html. The 403 (Access Denied) response proves that anonymous visitors still lack permission to read it.

Now you will clear Block Public Access at the bucket level. A scoped bucket policy then grants only s3:GetObject access to objects in this learning bucket.

In this step, get ready to:
  • Disable Block Public Access for the learning bucket.
  • Apply a scoped public-read bucket policy.
  • Verify the live portfolio and custom error behavior.
Disable the bucket-level protection

Block Public Access is a guardrail that overrides public permissions for a bucket. The bucket-level switch must be cleared before the scoped policy can work.

Keep public access deliberate

Changing this protection can feel risky. The policy you add next limits public access to reading objects in this one learning bucket.

  • Keep secrets, credentials, personal addresses, and private files out of this bucket.
  • Return to the AWS Management Console tab in Microsoft Edge.
  • Select your existing cloud-portfolio-<six-random-digits> bucket.
  • Select the Permissions tab.
  • Scroll to Block public access (bucket settings).
  • Choose Edit.
  • Clear Block all public access.
  • Choose Save changes.

The bucket-level Block Public Access setting now shows that public access is no longer blocked there.

Account protection still active?

Amazon S3 applies the most restrictive account-level and bucket-level settings. Use this path only if the console reports that an account-level setting still blocks this temporary lab.

  • Select Account and organization settings.
  • Choose Edit under Block Public Access settings for this account.
  • Clear Block all public access.
  • Choose Save changes.
  • Enter confirm.
  • Choose Confirm.
  • Stop this lab if an organization policy prevents the change.

Ask for help if the account-level setting remains active: help me understand which Amazon S3 Block Public Access setting is preventing my bucket policy.

Create and apply the bucket policy

A bucket policy is a JSON document attached to the bucket. You will keep a local copy in Windows Notepad before applying it in the console.

  • Select Start on the Windows taskbar.
  • Type Notepad.
  • Select Notepad from the results.
  • Copy the following policy into the blank document:
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:s3:::cloud-portfolio-<six-random-digits>/*"
      ]
    }
  ]
}

What does this policy do?

  • The "Version": "2012-10-17" value identifies the policy language version.
  • The "Principal": "*" entry includes anonymous visitors.
  • The s3:GetObject action grants read access to objects.
  • The arn:aws:s3:::cloud-portfolio-<six-random-digits>/* resource limits that access to objects in this bucket.
  • Replace cloud-portfolio-<six-random-digits> with your bucket's exact name.
  • Save the document in Documents/s3-portfolio as bucket-policy.json.
  • Confirm the saved filename is exactly bucket-policy.json.

Filename ends in .txt?

  • Resave the document with the exact filename bucket-policy.json.
  • Remove the extra .txt suffix if Notepad added it.

Ask for help if Windows keeps changing the extension: help me save this Notepad document as bucket-policy.json without a .txt suffix.

✔️ Awesome, I've got everything!

Your local policy file is ready for the Amazon S3 console.

ⓧ I'd like to double check the full code

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:s3:::cloud-portfolio-<six-random-digits>/*"
      ]
    }
  ]
}

The local file now holds the permission your website needs. Applying it to the bucket turns that document into an active access rule.

  • Select all the policy text in Notepad.
  • Copy the selected policy text.
  • Return to Microsoft Edge.
  • Return to the bucket's Permissions tab.
  • Scroll to Bucket Policy.
  • Choose Edit.
  • Paste the copied policy into the policy editor.
  • Choose Save changes.

You should see a confirmation that the bucket policy was successfully added.

Policy will not save?

  • Compare the bucket name in the Resource value with the exact bucket name shown in the console.
  • Check whether an account-level Block Public Access setting still applies.
  • Copy the complete JSON policy from Notepad again if the editor reports a formatting problem.

Ask for help with the policy details: help me find why this Amazon S3 public-read bucket policy will not save.

That is the access barrier cleared. Anonymous visitors can now read only the objects covered by this bucket policy.

Test the portfolio and missing page

The same website endpoint now checks whether the permission change worked. A missing path also checks whether 404.html is connected as the error document.

Before you refresh, predict whether an anonymous visitor now sees the portfolio or the access response.

  • Switch to the existing Bucket website endpoint tab in Microsoft Edge.
  • Refresh the page.

That is the payoff: your portfolio card now loads with your personalized non-sensitive profile text.

Before you test a missing path, predict which local page Amazon S3 will serve.

  • Select the website endpoint URL in the Microsoft Edge address bar.
  • Append /missing-page.html to the URL.
  • Press Enter.

You should see the custom missing-object message from 404.html with the Return home link.

Still seeing 403?

  • Confirm the policy's bucket name matches the bucket shown in Amazon S3.
  • Confirm Block Public Access is disabled at every level that applies to this temporary lab.
  • Confirm you are testing the Bucket website endpoint from the bucket's Properties tab.

Ask for help tracing the remaining access block: help me diagnose why my Amazon S3 website endpoint still returns 403 after I added the public-read policy.

Secret mission

Add an About Page

Your portfolio already proves that Amazon S3 can serve a public website. Add a second page with working navigation to test how browser links map to objects in your bucket.

Clean Up Your Resources

Clean Up Your Resources

Your public website keeps using Amazon S3 storage while the bucket exists. Decide whether to keep the site public, pause access, or delete it for the strict $0 goal.

Cost warning

Amazon S3 storage consumes Free Tier credits. Requests consume credits too.

Your Free account plan avoids out-of-pocket charges while it remains active. Upgrading to a Paid account plan can make retained resources billable at standard rates after credits run out or expire.

Resources you used:

  • The general purpose bucket cloud-portfolio-<six-random-digits>.
  • The public objects index.html, 404.html, and about.html.
  • Static website hosting with index.html as the index document.
  • Static website hosting with 404.html as the error document.
  • The PublicReadGetObject bucket policy granting public s3:GetObject access.
  • The temporary account-level Block Public Access change, only if this lab required it.
  • The local Documents/s3-portfolio folder.

Keep everything running

No action needed. Choose this if you are still using the public website.

  • Keep every published object free of credentials or private information.
  • Monitor your plan details in AWS Billing and Cost Management.
  • Check your remaining credit balance regularly.
  • Keep Documents/s3-portfolio as your editable local copy.
  • Choose the Pause or Delete option before upgrading to a Paid account plan.

The site becomes inaccessible when the Free account plan closes unless you upgrade the account.

Pause - I'll come back to this later

Pause public access while keeping the bucket ready for a later return. Stored objects continue consuming credits.

  • Return to the cloud-portfolio-<six-random-digits> bucket in Amazon S3.
  • Choose Permissions.
  • Choose Edit under Block public access (bucket settings).
  • Select Block all public access.
  • Choose Save changes.

If you changed account-level Block Public Access for this lab, restore that guardrail too.

  • Choose Account and organization settings in Amazon S3.
  • Choose Edit under Block Public Access settings for this account.
  • Restore Block all public access.
  • Choose Save changes.
  • Enter confirm.
  • Choose Confirm.
  • Refresh the Bucket website endpoint in Microsoft Edge.

Your website is private again. The endpoint now returns 403 (Access Denied).

Delete - I don't want to use this again

Remove all project resources to stop this site from using S3 storage or requests. Bucket deletion is permanent.

  • Copy any files you want to keep outside Documents/s3-portfolio.

Restore the account-level Block Public Access setting first if you changed it for this temporary lab.

  • Choose Account and organization settings in Amazon S3.
  • Choose Edit under Block Public Access settings for this account.
  • Restore Block all public access.
  • Choose Save changes.
  • Enter confirm.
  • Choose Confirm.

Your account-level public access guardrail is back in place.

  • Choose General purpose buckets in Amazon S3.
  • Select the cloud-portfolio-<six-random-digits> bucket.
  • Choose Empty.
  • Enter the exact bucket name shown by Amazon S3.
  • Choose Empty.
  • Monitor Empty bucket: Status until the process completes.

That clears every public website object from the bucket. The empty bucket remains.

  • Return to General purpose buckets.
  • Select the empty cloud-portfolio-<six-random-digits> bucket.
  • Choose Delete.
  • Enter the exact bucket name shown by Amazon S3.
  • Choose Delete bucket.
  • Search the bucket list for the deleted name.

You should see no matching bucket. Your cloud cleanup is complete.

  • Remove the Documents/s3-portfolio folder with the Windows file manager.
  • Search Documents for s3-portfolio.

You should see no matching folder. Your local project files are removed too.

Nice Work!

Nice Work!

You made it! Your portfolio now runs from an Amazon S3 website endpoint.

Your live site includes two linked pages plus a custom missing-page experience.

You learned how to:

  • Build a static portfolio from index.html and 404.html in Documents/s3-portfolio. Publish those pages through an Amazon S3 website endpoint.
  • Experience the default security barrier as 403 (Access Denied). Grant public read access with a bucket policy scoped to s3:GetObject for this bucket's objects.
  • Configure index and error documents for a static website. Verify that /missing-page.html displays your custom error page in Microsoft Edge.
  • Secret Mission: Added about.html to create a multi-page portfolio. Tested the Home and About links in both directions.

Ready to quiz yourself?