Host a Website on Amazon S3

Deploy a portfolio site to the cloud using Amazon S3 static website hosting.

Introduction

30 Second Summary

Every website needs a home on the internet. The cloud makes it possible to put your site online without buying a physical server or paying for traditional web hosting.

In this project, you will build a personal landing page and deploy it to the internet using Amazon S3, a cloud storage service from AWS.

What You'll Build

A portfolio-style landing page hosted on Amazon S3 and accessible to anyone via a public URL.

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

  • An AWS account configured and ready for use.
  • An S3 bucket configured for static website hosting with a public URL.
  • A simple HTML/CSS portfolio page uploaded to S3 and live on the internet.
  • A bucket policy granting public read access so anyone can view your site.
  • Secret Mission: Add a custom error page and multi-page navigation to your site.

Are there any prerequisites?

None. This project includes setup instructions for every tool you need, including your AWS account and text editor. All you need is a computer with a web browser.

Set Up Your AWS Account

Before building your website, you need an AWS account and a text editor. Your AWS account gives you access to cloud services like Amazon S3, where your site will live.

In this step, you'll create your AWS account and install VS Code as your text editor. You'll also sign in to the AWS Management Console to confirm everything is working.

In this step, get ready to:
  • Create or sign in to your AWS account.
  • Install VS Code as your text editor.
  • Sign in to the AWS Management Console.
Create your AWS account

You need an AWS account to use any AWS service. If you already have one, you can skip ahead to the next substep.

✔️ I already have an AWS account

You're all set. Skip ahead to the next substep where you'll install VS Code.

ⓧ I need to create one

  • Open https://aws.amazon.com in your browser.
  • Click Create an AWS Account in the top right corner.
  • Enter your email address and choose an account name.
  • Choose the Free account plan when prompted to select a plan.
  • Add your contact information and payment method when prompted.
  • Verify your phone number using the code AWS sends you.
  • Choose a support plan (the free Basic plan is fine for this project).

Will I be charged?

No. New AWS customers get the Free account plan, which gives you up to 6 months of free usage. This project's storage costs are negligible and well within free tier limits. You will not be charged.

How long does activation take?

Accounts usually activate within a few minutes. In rare cases it can take up to 24 hours. You'll receive a confirmation email when your account is ready.

Install VS Code

VS Code is a free text editor that works on macOS, Windows, and Linux. You'll use it to write the HTML and CSS files for your website.

✔️ I already have VS Code installed

You're good to go. Skip ahead to the next substep.

ⓧ I need to install it

  • Open https://code.visualstudio.com in your browser.
  • Click the download button for your operating system (macOS or Windows).
  • On macOS: open the downloaded .dmg file and drag Visual Studio Code.app to the Applications folder.
  • On Windows: run the downloaded installer and follow the prompts to complete the installation.

VS Code is a small download

The installer is under 200 MB and takes just a few minutes to download and install.

  • Open VS Code by pressing Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Visual Studio Code and press Enter to open it.
  • Confirm VS Code launches and you see the Welcome tab or an empty editor window.

VS Code not appearing in search?

On macOS, make sure you dragged the app into your Applications folder. On Windows, restart your computer after installation so the app registers in your search index.

Help me troubleshoot opening VS Code on my computer.

Sign in to the AWS Management Console

The AWS Management Console is where you'll create and manage all your cloud resources. Let's confirm you can access it.

  • Open https://console.aws.amazon.com in your browser.
  • Sign in with the email address and password you used to create your AWS account.
  • Select Root user as the sign-in type.
  • Verify you can see the Console Home page with the search bar at the top.

What is the Console Home page?

The Console Home page is your starting dashboard in AWS. It has a search bar at the top where you can find any AWS service. You'll use this search bar in the next step to navigate to S3.

Can't sign in to the console?

If you just created your account, it may still be activating. Wait a few minutes and try again. Check your email for a confirmation message from AWS.

Make sure you selected Root user (not IAM user) and entered the email address you signed up with.

Help me sign in to the AWS Management Console.

Your environment is ready. Next up, you'll create your first S3 bucket to store your website files.

Create an S3 Bucket

Your AWS account is ready to go. Now it's time to create the storage space where your website files will live.

In AWS, files are stored in containers called S3 buckets. Think of a bucket as a folder in the cloud that can hold your HTML, CSS, images, and any other files you want to serve on the web.

In this step, get ready to:
  • Navigate to the S3 dashboard in the AWS Console.
  • Create a new S3 bucket with a globally unique name.
  • Verify the bucket appears in your bucket list.
Navigate to the S3 dashboard
  • In the AWS Management Console, click the search bar at the top of the page.
  • Type S3 and select S3 from the results that appear.
  • On the S3 dashboard, click Create bucket.

What is an S3 bucket?

Amazon S3 (Simple Storage Service) is AWS's object storage service. It stores files as "objects" inside containers called "buckets".

Each bucket has a unique name and acts as the top-level address for everything you store inside it. For static website hosting, your bucket holds the HTML, CSS, and image files that make up your site.

Name your bucket and choose a region

Every S3 bucket needs a globally unique name. This means no other AWS account in the world can have the same bucket name as yours.

  • In the Bucket name field, enter a unique name like my-portfolio-site-2026.
  • Under AWS Region, select your preferred region (e.g., US East (N. Virginia) us-east-1).

Why does my bucket name need to be globally unique?

Your bucket name becomes part of the public URL for your website. Since every S3 bucket shares the same global namespace, AWS needs each name to be one-of-a-kind.

Bucket names must use lowercase letters, numbers, and hyphens only. Try appending the year or a random number to make yours unique.

What is an AWS region?

An AWS region is a physical location in the world where AWS operates data centers. Picking a region close to you (or your audience) means faster load times for your website.

Create the bucket and verify it appears
  • Leave all other settings at their defaults. You will configure permissions and hosting in later steps.
  • Scroll to the bottom of the page and click Create bucket.

You should be taken back to the S3 bucket list. Your new bucket should now appear in the list with the name you chose.

Seeing a "Bucket name already exists" error?

This means someone else on AWS already has that bucket name. Try adding extra numbers or a different suffix to make it unique (e.g., append your initials or today's date).

Also double-check that your name only contains lowercase letters, numbers, and hyphens. No uppercase letters, spaces, or special characters are allowed.

help me fix my S3 bucket name error

Your S3 bucket is created and ready. Next up, you'll build the HTML and CSS files that will become your portfolio website.

Build Your Website Files

Your S3 bucket is created and waiting for files. Now you need the actual website that will live inside it.

Every website needs at least two things: an HTML file for page structure and a CSS file for visual styling. You'll create both files on your computer first, then upload them to S3 in a later step.

In this step, get ready to:
  • Create a project folder and build your HTML portfolio page.
  • Add CSS styling to make the page look polished.
  • Preview the site locally in your browser to confirm it works.
Create your project folder and HTML file

Your website files need a home on your computer. You'll create a dedicated folder, then build the HTML page that forms the structure of your portfolio site.

  • Open your terminal by pressing Cmd+Space (macOS) or the Windows key (Windows), typing Terminal, and pressing Enter.
  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder by running this command:
mkdir my-s3-website
  • Confirm the folder was created by running:
ls

You should see my-s3-website listed in the output.

  • Open VS Code by pressing Cmd+Space (macOS) or the Windows key (Windows), typing VS Code, and pressing Enter.
  • Click File in the top menu bar.
  • Click Open Folder.
  • Navigate to your Desktop, select the my-s3-website folder, and click Open.

You should see my-s3-website appear in the Explorer sidebar on the left side of VS Code.

  • Hover over the MY-S3-WEBSITE heading in the Explorer sidebar.
  • Click the New File... icon that appears.
  • Type index.html and press Enter.
  • Paste the following HTML code into the new 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>
    <div class="container">
        <h1>Hi, I'm [[YOURNAME="Your Name"]]</h1>
        <p class="tagline">Aspiring cloud engineer learning AWS</p>
        <div class="about">
            <h2>About Me</h2>
            <p>I'm learning cloud computing and building projects to grow my skills. This site is hosted entirely on Amazon S3!</p>
        </div>
        <div class="skills">
            <h2>What I'm Learning</h2>
            <ul>
                <li>Amazon Web Services (AWS)</li>
                <li>Cloud Storage with S3</li>
                <li>HTML &amp; CSS</li>
                <li>Infrastructure &amp; Deployment</li>
            </ul>
        </div>
        <footer>
            <p>Hosted on Amazon S3 | Built as a NextWork project</p>
        </footer>
    </div>
</body>
</html>

What does this code do?

The <head> section sets up the page title and links to your CSS stylesheet. The <link rel="stylesheet" href="style.css"> tag tells the browser to load your styling from a separate file.

The <body> contains all the visible content: a heading with your name, a tagline, an about section, a skills list, and a footer. Everything is wrapped in a <div class="container"> so the CSS can style the whole card at once.

  • Replace the placeholder with your own name in the <h1> tag.
  • Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).

You should see index.html listed under my-s3-website in the Explorer sidebar. The dot on the file tab disappears after saving, confirming the file is saved.

Don't see the file in the Explorer?

Make sure you opened the my-s3-website folder (not your entire Desktop) in VS Code. If you see too many files, go to File > Open Folder and select only the my-s3-website folder.

Help me find my project folder in VS Code

✔️ Awesome, I've got everything!

Great. Double check you've saved your file before moving on.

ⓧ 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 Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Hi, I'm [[YOURNAME="Your Name"]]</h1>
        <p class="tagline">Aspiring cloud engineer learning AWS</p>
        <div class="about">
            <h2>About Me</h2>
            <p>I'm learning cloud computing and building projects to grow my skills. This site is hosted entirely on Amazon S3!</p>
        </div>
        <div class="skills">
            <h2>What I'm Learning</h2>
            <ul>
                <li>Amazon Web Services (AWS)</li>
                <li>Cloud Storage with S3</li>
                <li>HTML &amp; CSS</li>
                <li>Infrastructure &amp; Deployment</li>
            </ul>
        </div>
        <footer>
            <p>Hosted on Amazon S3 | Built as a NextWork project</p>
        </footer>
    </div>
</body>
</html>
Add styling with CSS

Your HTML page has structure, but it looks plain without any visual styling. A CSS file controls how everything looks: colors, spacing, fonts, and layout.

  • Hover over the MY-S3-WEBSITE heading in the Explorer sidebar again.
  • Click the New File... icon.
  • Type style.css and press Enter.
  • Paste the following base styles into the new file:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f0f4f8;
    color: #2d3748;
    line-height: 1.6;
    padding: 2rem;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

What do these styles do?

The * selector resets all default margins and padding so every browser starts from the same baseline.

The body rule sets a light gray background and a clean sans-serif font. The .container class creates a centered white card with rounded corners and a subtle shadow.

  • Save style.css.

You should see style.css appear below index.html in the Explorer sidebar.

  • Add the content styles below your existing code in style.css by pasting this:
h1 {
    font-size: 2rem;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.tagline {
    font-size: 1.1rem;
    color: #718096;
    margin-bottom: 2rem;
}

h2 {
    font-size: 1.3rem;
    color: #2d3748;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.about p {
    color: #4a5568;
}

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

.skills li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
}

.skills li:last-child {
    border-bottom: none;
}

footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

footer p {
    font-size: 0.85rem;
    color: #a0aec0;
    text-align: center;
}

What do these styles do?

The h1 and h2 rules set heading sizes and spacing. The .tagline class makes the subtitle smaller and gray to create visual hierarchy.

The .skills li styles remove default bullet points and add subtle divider lines between each item. The footer gets a top border and centered, muted text to sit quietly at the bottom.

  • Save style.css.

You'll see the full styled result when you preview the site in the next substep.

Seeing a typo warning or red underline in VS Code?

CSS property names must be lowercase with hyphens (like box-sizing), not camelCase. Check that every opening { has a matching closing }.

Help me fix a CSS syntax error in my style.css file

✔️ Awesome, I've got everything!

Great. Double check you've saved style.css before moving on.

ⓧ I'd like to double check the full code

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f0f4f8;
    color: #2d3748;
    line-height: 1.6;
    padding: 2rem;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 2rem;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.tagline {
    font-size: 1.1rem;
    color: #718096;
    margin-bottom: 2rem;
}

h2 {
    font-size: 1.3rem;
    color: #2d3748;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.about p {
    color: #4a5568;
}

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

.skills li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
}

.skills li:last-child {
    border-bottom: none;
}

footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

footer p {
    font-size: 0.85rem;
    color: #a0aec0;
    text-align: center;
}
Preview your site in the browser

Before uploading anything to S3, you want to confirm your page looks right locally. Opening the HTML file directly in a browser simulates what visitors will see.

  • Open the my-s3-website folder on your Desktop in Finder (macOS) or File Explorer (Windows).
  • Double-click index.html to open it in your default browser.

You should see a centered white card on a light gray background. The card shows your name as a large heading, a gray tagline, an about section, a skills list with subtle dividers, and a small footer at the bottom.

Page looks unstyled or plain?

If you see plain text without any styling, make sure style.css is saved in the same folder as index.html. Both files must be directly inside my-s3-website (not in a subfolder).

Also confirm the filename is exactly style.css (all lowercase, no spaces). The HTML file references this exact filename, so any mismatch means the browser cannot find it.

Help me figure out why my CSS is not loading

Your website files are ready to go. Next up, you'll configure your S3 bucket to actually serve these files as a live website.

Enable Static Website Hosting

Your S3 bucket exists, but right now it is just a storage container. It does not know how to serve files to a web browser.

In this step, you will turn on static website hosting. This tells S3 to behave like a web server and respond to browser requests with your HTML files.

In this step, get ready to:
  • Open the Properties tab of your S3 bucket.
  • Enable static website hosting with index.html as the index document.
  • Note your bucket website endpoint URL.
Open your bucket's Properties tab
  • In the S3 console, find your bucket in the bucket list and click on its name to open it.
  • Click the Properties tab near the top of the page.

You should see several configuration sections listed vertically, including Bucket Versioning, Tags, and Static website hosting.

Enable static website hosting

The Static website hosting section is near the bottom of the Properties page. By default it shows a status of Disabled.

  • Scroll down to Static website hosting and click Edit.
  • Under Static website hosting, select Enable.
  • For Hosting type, select Host a static website.
  • In the Index document field, type index.html.
  • Click Save changes.

The Static website hosting section now shows a status of Enabled. You should also see a Bucket website endpoint URL displayed below it.

What is static website hosting?

When you enable static website hosting, S3 starts acting like a web server. Instead of just storing files, it responds to browser requests by serving your HTML pages.

The index document is the default page S3 serves when someone visits your site URL. This name is case-sensitive and must exactly match the filename you upload later.

Don't see the Static website hosting section?

Make sure you are on the Properties tab, not the Permissions or Objects tab. The section is near the bottom of the page, so scroll all the way down.

help me find the Static website hosting setting in my S3 bucket

Note your bucket website endpoint URL

After saving, S3 generates a public URL for your website. This is the address people will type into their browser to visit your site.

  • On the Properties tab, scroll down to the Static website hosting section.
  • Find the Bucket website endpoint URL displayed there.
  • Copy this URL and save it somewhere you can find it later (a note, a text file, or just keep the tab open).

Your endpoint URL follows this format: http://your-bucket-name.s3-website-us-east-1.amazonaws.com.

Why does the URL use HTTP instead of HTTPS?

S3 website endpoints only support HTTP. For HTTPS, you would need to add Amazon CloudFront in front of your bucket. For this project, HTTP is perfectly fine.

If you try visiting this URL right now, you will get an error. That is expected. The bucket still blocks public access, so no one can read your files yet. You will fix that in the next step.

Your bucket is now configured to host a website. Next up, you will configure permissions so that the world can actually see your pages.

Configure Public Access and Bucket Policy

Your S3 bucket has static website hosting enabled, but visitors still can't access your files.

AWS blocks all public access to S3 buckets by default as a security measure. In this step, you'll remove that restriction and add a bucket policy that tells AWS exactly who can read your website files.

In this step, get ready to:
  • Disable Block Public Access on your bucket.
  • Add a bucket policy granting public read access.
  • Verify the publicly accessible banner appears.
Disable Block Public Access

AWS protects every S3 bucket with a feature called Block Public Access. This overrides any policies you add to the bucket, preventing public access regardless of what your bucket policy says. You need to turn this off before your website can be reached by visitors.

  • In the S3 console, click on your bucket name to open it.
  • Go to the Permissions tab.
  • Scroll to Block public access (bucket settings) and click Edit.
  • Uncheck Block all public access.
  • Click Save changes.

AWS asks you to confirm this change because making a bucket publicly accessible is a significant security decision.

  • Type confirm in the confirmation field.
  • Click Confirm.

Why do I have to type confirm?

AWS uses this as a safeguard. Accidentally making a bucket public could expose sensitive data, so this extra step makes sure you're intentional about the change.

You should see all the checkboxes under Block public access now cleared.

Don't see the Edit button?

Make sure you're on the Permissions tab of your specific bucket, not the main S3 dashboard. Click your bucket name first, then select Permissions from the tab bar.

Help me find the Block Public Access settings

Add a bucket policy for public read access

A bucket policy is a JSON document that defines who can access your bucket and what actions they can perform. You'll add a policy that allows anyone on the internet to read the files in your bucket.

  • Still on the Permissions tab, scroll down to Bucket policy.
  • Click Edit.
  • Paste the following bucket policy into the policy editor:
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[[BUCKET_NAME="your-bucket-name"]]/*"
        }
    ]
}

What does this policy do?

  • "Principal": "*" means anyone on the internet (all users, no authentication required).
  • "Action": "s3:GetObject" grants permission to read (download) objects. It does not allow deleting or uploading.
  • "Resource" specifies which objects the policy applies to. The /* at the end means all objects inside your bucket.
Save the policy and verify public access
  • Click Save changes.

You should see a Publicly accessible warning banner appear on your bucket. This confirms your bucket policy is active and visitors can now read your files.

Why does AWS show a warning?

The warning is a visual reminder that this bucket's contents are accessible to the public internet. For a website, this is exactly what you want. For buckets storing private data, this banner helps you catch accidental misconfigurations.

Don't see the Publicly accessible banner?

Make sure you replaced the bucket name in the policy's Resource field with your actual bucket name. The ARN must match exactly.

Double-check that you disabled Block Public Access in the previous substep. If Block Public Access is still on, your bucket policy is overridden and won't take effect.

Help me troubleshoot my bucket policy

Your bucket is now open for business. Next up, you'll upload your website files and see your portfolio page live on the internet.

Upload Your Website and Go Live

Your bucket is fully configured with public access and a bucket policy. All the permissions are in place for anyone on the internet to view your content.

Now it's time for the most rewarding part of the project. You'll upload your website files to S3 and see your portfolio page go live at a real URL that anyone in the world can visit.

In this step, get ready to:
  • Upload your HTML and CSS files to your S3 bucket.
  • Visit your live website at the S3 endpoint URL.
  • Verify your site works from any device.
Upload your files to S3

When you upload a file to Amazon S3, it becomes an object stored inside your bucket. Your two files will become two objects that S3 serves to anyone who requests them.

  • In the S3 console, click on your bucket name to open it.
  • Go to the Objects tab.
  • Click Upload.
  • Click Add files.
  • Navigate to your my-s3-website folder and select both index.html and style.css.
  • Click Open to confirm your selection.
  • You should see both files listed in the upload window. Click Upload at the bottom of the page.

You should see a green success banner on the Upload status page confirming both files uploaded successfully.

What is an S3 object?

In S3, every file you upload becomes an object. An object consists of the file data plus metadata that describes it (like the file name, size, and content type).

Your bucket can hold an unlimited number of objects. Because you enabled static website hosting and set a public bucket policy, S3 will serve these objects as web pages to anyone who visits your endpoint URL.

Upload failed or files not appearing?

Make sure you selected Add files (not Add folder). Uploading the folder itself would nest your files inside a subfolder prefix, and S3 would not find index.html at the bucket root.

Also confirm the file names are exactly index.html and style.css. The index document setting is case-sensitive and must match your uploaded file name exactly.

Help me troubleshoot my S3 file upload. I clicked Upload but my files are not appearing in the bucket objects list.

Visit your live website

Your files are uploaded, your permissions are set, and static website hosting is enabled. Everything is in place for your site to be live on the internet.

  • Navigate back to the Properties tab of your bucket.
  • Scroll down to the Static website hosting section.
  • Click on your Bucket website endpoint URL. It opens in a new browser tab.

Your portfolio page should now be live and visible in the browser. You should see your name, bio, skills list, and styled layout exactly as you previewed locally.

What does my endpoint URL look like?

Your S3 website endpoint follows this format: http://<bucket-name>.s3-website-<region>.amazonaws.com.

S3 website endpoints only support HTTP, not HTTPS. For HTTPS you would need CloudFront, but HTTP is perfectly fine for a learning project.

Seeing a 403 Forbidden or 404 Not Found?

A 403 error means your bucket policy or Block Public Access settings are not configured correctly. Go back to the Permissions tab and confirm Block Public Access is fully disabled and your bucket policy is saved.

A 404 error means S3 cannot find your index document. Confirm that your uploaded file is named exactly index.html (lowercase, no extra spaces) and that you uploaded it to the bucket root, not inside a subfolder.

Help me debug why my S3 website endpoint is returning an error instead of showing my page.

Verify from another device

Your website is publicly accessible, which means anyone with the URL can see it. Let's confirm that by testing from a different device.

  • Copy your Bucket website endpoint URL from the browser address bar.
  • Open the URL on your phone, or send it to a friend and ask them to open it.
  • Confirm your portfolio page displays correctly on the other device.

If you can see your page from a different device or network, your website is fully live on AWS. Congratulations.

Bookmark your URL

Save your S3 website endpoint URL somewhere handy. You'll need it whenever you want to show off your site or check updates after uploading new files.

Your website is live on the internet, hosted entirely on Amazon S3. Next up is an optional Secret Mission where you can add a custom error page and multi-page navigation to level up your site.

Secret mission

Add an Error Page and Multi-Page Navigation

Your site currently shows a generic error when someone visits a URL that doesn't exist. In this mission, you'll create a custom 404 page and add a second page with navigation links between them.

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 a single S3 bucket with a few small files. For new AWS accounts with Free Tier credits, this costs nothing. For existing accounts, storage and request costs for a small static site are fractions of a penny per month.

Cost warning

While the cost of keeping a small S3 static site running is negligible (under $0.01/month), the bucket is publicly accessible. If you no longer need the site live, delete the bucket to stop all charges and remove public access.

Resources you used:

  • 1 S3 bucket with static website hosting enabled.
  • HTML/CSS files stored as S3 objects.
  • Local my-s3-website folder on your computer.

Keep everything running

No action needed. Choose this if you are still actively building or want to keep your portfolio site live.

  • Your site stays live at the S3 website endpoint URL.
  • Storage costs for a few KB of HTML and CSS are negligible.
  • Your bucket remains publicly accessible.

Pause - I'll come back to this later

Make your site inaccessible without deleting anything. This lets you come back and re-enable it later.

  • In the S3 console, click on your bucket name.
  • Go to the Permissions tab.
  • Under Block public access (bucket settings), click Edit.
  • Check Block all public access and save changes.
  • Your files remain in the bucket, but the website endpoint will no longer serve them publicly.

To resume later, uncheck Block all public access again and your site goes back online immediately.

Delete - I don't want to use this again

Remove all project resources and stop all charges immediately.

  • Open the S3 console at https://console.aws.amazon.com/s3/.
  • Select the checkbox next to your bucket name.
  • Click Empty to delete all objects inside the bucket. Confirm the deletion when prompted.
  • After the bucket is empty, select it again and click Delete. Confirm by entering your bucket name when prompted.

To delete your local project files, run the appropriate command for your operating system.

macOS

rm -rf ~/Desktop/my-s3-website

Windows

rmdir /s /q %USERPROFILE%\Desktop\my-s3-website

That's a Wrap!

That's a Wrap!

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

You've learned how to:

  • Created and configured an S3 bucket with static website hosting enabled, turning cloud storage into a live web server.
  • Built a portfolio-style landing page with HTML and CSS, then uploaded it to S3 as objects.
  • Wrote a bucket policy granting public read access, giving you hands-on experience with AWS permissions.
  • Secret Mission: Added a custom 404 error page and multi-page navigation with links between pages.

Ready to quiz yourself?