Host Your Portfolio on Amazon S3

Deploy a personal portfolio website using Amazon S3 static website hosting.

Introduction

30 Second Summary

Every internship application asks the same thing: show us what you can build. Having a live website you can link to instantly proves you can ship real work to the cloud.

In this project, you will build a personal portfolio page and deploy it to Amazon S3 so that anyone with the URL can view it in their browser.

What You'll Build

A personal portfolio website hosted on S3 with static website hosting, public access configured through a bucket policy.

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

  • A configured S3 bucket with static website hosting enabled.
  • A portfolio page (HTML + CSS) uploaded and publicly accessible.
  • A bucket policy granting public read access to your files.
  • A live website endpoint URL you can share with anyone.
  • Secret Mission: Add a custom 404 error page so visitors who hit a broken link see a styled message instead of an ugly XML error.

Are there any prerequisites?

You need an AWS account with Free Tier credits. New AWS accounts receive up to $200 in credits, which more than covers the negligible cost of hosting a few HTML files on S3.

You also need a text editor (Notepad on Windows or any code editor like VS Code) and a web browser. No coding frameworks or command-line tools are required.

Create Your S3 Bucket

Your portfolio needs a home on the internet. Right now you have nothing deployed, so there is no URL anyone can visit to see your work.

In this step, you will create an S3 bucket and configure it to serve web pages. By the end, you will have a live website endpoint URL ready for your portfolio files.

In this step, get ready to:
  • Create a new S3 bucket with a globally unique name.
  • Enable static website hosting so the bucket can serve web pages.
  • Disable Block Public Access so visitors can view your site.
Navigate to S3 and create a new bucket
  • Sign in to the AWS Management Console at console.aws.amazon.com.
  • In the search bar at the top, type S3 and select S3 from the results.
  • In the left navigation pane, choose General purpose buckets.
  • Click Create bucket.
  • In the Bucket name field, enter a globally unique name such as yourname-portfolio-2026.
  • For AWS Region, select the region closest to you.
  • Leave all other settings as defaults and click Create bucket at the bottom of the page.

What is an S3 bucket?

An S3 bucket is a container for storing files (called "objects") in Amazon's cloud. Each bucket has a globally unique name that acts as its address. You will upload your HTML and CSS files into this bucket.

The name must be unique across all AWS accounts worldwide. That is why adding your name and year (like jane-portfolio-2026) helps avoid conflicts with other people's buckets.

Seeing a bucket name error?

If AWS says the name is already taken, try adding extra numbers or your middle initial. Bucket names must be 3 to 63 characters, use only lowercase letters, numbers, and hyphens, and start and end with a letter or number.

Help me pick a valid S3 bucket name.

Enable static website hosting

Your bucket exists, but it does not know it should behave like a website yet. You need to turn on static website hosting so S3 knows to serve your files as web pages.

  • Click on your new bucket name to open it.
  • Go to the Properties tab.
  • Scroll down to Static website hosting and click Edit.
  • Select Enable.
  • Under Hosting type, choose Host a static website.
  • In the Index document field, enter index.html.
  • Leave the Error document field blank.
  • Click Save changes.

After saving, you will see a Bucket website endpoint URL displayed in the Static website hosting section. This is your live website URL.

  • Copy or note down this endpoint URL. You will need it later to test your site.

What is static website hosting?

Static website hosting tells S3 to serve your files like a web server. When someone visits your endpoint URL, S3 automatically returns your index.html file instead of showing a raw file listing.

The index document name is case-sensitive. It must exactly match the filename you upload later.

Why does the endpoint use HTTP, not HTTPS?

S3 website endpoints do not support HTTPS. For a learning project this is perfectly fine. If you want HTTPS in the future, you would add CloudFront in front of your bucket.

Disable Block Public Access

By default, S3 blocks all public access to protect your data. For a public website, you need to remove this restriction so anyone can view your pages.

  • Go to the Permissions tab.
  • Under Block public access (bucket settings), click Edit.
  • Uncheck Block all public access.
  • Click Save changes.
  • A confirmation dialog appears. Type confirm in the text field and click Confirm.

Why disable Block Public Access?

Block Public Access is a safety feature that prevents accidental exposure of private files. For a public portfolio website, you intentionally want the world to read your files. Disabling this setting at the bucket level is required before you can add a public access policy in the next step.

Save button greyed out?

Make sure you unchecked the top-level Block all public access checkbox. The individual checkboxes below it will uncheck automatically.

Help me disable Block Public Access on my S3 bucket.

Verify your setup by going back to the Properties tab and scrolling to Static website hosting. You should see your endpoint URL displayed there.

Your bucket is ready to host a website. Next up, you will build the HTML and CSS files for your portfolio page.

Build Your Portfolio Page

Your S3 bucket is configured, hosting is enabled, and public access is unlocked. Now you need actual files to host.

In this step, you'll create your portfolio page using HTML for structure and CSS for styling. You'll preview it locally on your computer before uploading anything to S3.

In this step, get ready to:
  • Create your portfolio's HTML page.
  • Style it with a CSS file.
  • Preview and customize your portfolio locally in a browser.
Create your index.html file

Every website starts with an HTML file that defines its structure. Your index.html file will contain sections for your name, bio, skills, projects, and contact information.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Notepad (Windows) or TextEdit (macOS) and press Enter to open it. You can also use VS Code if you have it installed.
  • Create a new folder on your Desktop called portfolio. This is where you'll save both files.
  • Create a new file and build your portfolio's HTML structure by copying this code into it:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Portfolio</title>
    <!-- Link to external stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Navigation bar -->
    <header>
        <nav>
            <a href="#about">About</a>
            <a href="#skills">Skills</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <!-- Hero section with your name and tagline -->
    <section id="hero">
        <h1>Hi, I'm Your Name</h1>
        <p>Computer Science student building cloud skills for the future.</p>
    </section>

    <!-- About section -->
    <section id="about">
        <h2>About Me</h2>
        <p>I'm a 3rd year Computer Science student passionate about cloud computing and web development. I'm currently building my skills in AWS and looking for internship opportunities to apply what I've learned.</p>
    </section>

    <!-- Skills section -->
    <section id="skills">
        <h2>Skills</h2>
        <ul>
            <li>HTML &amp; CSS</li>
            <li>AWS (S3, Cloud Fundamentals)</li>
            <li>Problem Solving</li>
            <li>Git &amp; GitHub</li>
        </ul>
    </section>

    <!-- Projects section -->
    <section id="projects">
        <h2>Projects</h2>
        <div class="project-card">
            <h3>Portfolio Website on AWS S3</h3>
            <p>Deployed a static portfolio site using Amazon S3 static website hosting. Configured bucket policies, public access controls, and custom error handling.</p>
        </div>
        <div class="project-card">
            <h3>More projects coming soon...</h3>
            <p>Stay tuned as I build more cloud and development projects.</p>
        </div>
    </section>

    <!-- Contact section -->
    <section id="contact">
        <h2>Contact</h2>
        <p>Email: your.email@example.com</p>
        <p>LinkedIn: linkedin.com/in/yourprofile</p>
        <p>GitHub: github.com/yourusername</p>
    </section>

    <footer>
        <p>Hosted on Amazon S3</p>
    </footer>
</body>
</html>

What does this code do?

This HTML creates the skeleton of your portfolio page. Each <section> represents a distinct part of your portfolio that visitors can navigate to.

  • The <nav> links at the top let visitors jump to any section.
  • The hero section is the first thing people see. It has your name and a short tagline.
  • The <link rel="stylesheet" href="style.css"> line connects this page to the CSS file you'll create next.
  • Save this file as index.html inside your portfolio folder on the Desktop.
  • Open your portfolio folder in Finder (macOS) or File Explorer (Windows). You should see index.html listed.

Don't see index.html in the folder?

  • Make sure you used Save As (not just Save) and chose the portfolio folder as the destination.
  • In Notepad on Windows, change the Save as type dropdown from "Text Documents (*.txt)" to "All Files (*.*)". Otherwise it may save as index.html.txt instead.
  • The filename must be exactly index.html in lowercase. S3 is case-sensitive and will not find your file otherwise.

Help me save my HTML file correctly.

✔️ Awesome, I've got everything!

Great. Make sure you've saved the 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>Your Name - Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="#about">About</a>
            <a href="#skills">Skills</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <section id="hero">
        <h1>Hi, I'm Your Name</h1>
        <p>Computer Science student building cloud skills for the future.</p>
    </section>

    <section id="about">
        <h2>About Me</h2>
        <p>I'm a 3rd year Computer Science student passionate about cloud computing and web development. I'm currently building my skills in AWS and looking for internship opportunities to apply what I've learned.</p>
    </section>

    <section id="skills">
        <h2>Skills</h2>
        <ul>
            <li>HTML &amp; CSS</li>
            <li>AWS (S3, Cloud Fundamentals)</li>
            <li>Problem Solving</li>
            <li>Git &amp; GitHub</li>
        </ul>
    </section>

    <section id="projects">
        <h2>Projects</h2>
        <div class="project-card">
            <h3>Portfolio Website on AWS S3</h3>
            <p>Deployed a static portfolio site using Amazon S3 static website hosting. Configured bucket policies, public access controls, and custom error handling.</p>
        </div>
        <div class="project-card">
            <h3>More projects coming soon...</h3>
            <p>Stay tuned as I build more cloud and development projects.</p>
        </div>
    </section>

    <section id="contact">
        <h2>Contact</h2>
        <p>Email: your.email@example.com</p>
        <p>LinkedIn: linkedin.com/in/yourprofile</p>
        <p>GitHub: github.com/yourusername</p>
    </section>

    <footer>
        <p>Hosted on Amazon S3</p>
    </footer>
</body>
</html>
Create your style.css file

Without CSS, your page would display as plain black text on a white background. The stylesheet adds layout, spacing, colors, and responsive behaviour so your portfolio looks professional.

  • Create a new file in your text editor.
  • Add all of your portfolio styles by copying this code into the file:
/* Reset default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base body styles - centered layout with readable width */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Header with bottom border */
header {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}

/* Navigation links in a row */
nav {
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: #0066cc;
    font-weight: 500;
}

nav a:hover {
    text-decoration: underline;
}

/* Hero section - large centered intro */
#hero {
    padding: 60px 0;
    text-align: center;
}

#hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #1a1a1a;
}

#hero p {
    font-size: 1.2rem;
    color: #666;
}

/* Shared section spacing */
section {
    padding: 40px 0;
}

h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #1a1a1a;
}

/* Skills displayed as pill-shaped tags */
#skills ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#skills li {
    background: #f0f7ff;
    border: 1px solid #cce0ff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #0066cc;
}

/* Project cards with subtle background */
.project-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}

.project-card h3 {
    margin-bottom: 8px;
    color: #1a1a1a;
}

.project-card p {
    color: #666;
}

#contact p {
    margin-bottom: 8px;
}

/* Footer with top border */
footer {
    margin-top: 60px;
    padding: 20px 0;
    border-top: 1px solid #eee;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}

/* Mobile-friendly adjustments */
@media (max-width: 600px) {
    #hero h1 {
        font-size: 1.8rem;
    }

    nav {
        flex-wrap: wrap;
        gap: 12px;
    }

    #skills ul {
        flex-direction: column;
    }
}

What does this stylesheet do?

  • The * reset at the top removes all default browser spacing so you start from a clean slate.
  • The max-width: 800px on the body keeps text at a comfortable reading width and centers it on the page.
  • Skills are displayed as rounded "pill" tags using border-radius: 20px.
  • The @media block at the bottom makes the layout adapt for phone screens.
  • Save this file as style.css in the same portfolio folder where you saved index.html.
  • Check your portfolio folder. You should now see both index.html and style.css listed side by side.

Only see one file in the folder?

  • Confirm you saved style.css to the exact same folder as index.html. If they are in different folders, the HTML page will not find the stylesheet.
  • On Windows with Notepad, remember to change Save as type to "All Files (*.*)" so it does not add a hidden .txt extension.

Help me get both files saved in the same folder.

✔️ Awesome, I've got everything!

Great. Make sure both files are saved 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;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}

nav {
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: #0066cc;
    font-weight: 500;
}

nav a:hover {
    text-decoration: underline;
}

#hero {
    padding: 60px 0;
    text-align: center;
}

#hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #1a1a1a;
}

#hero p {
    font-size: 1.2rem;
    color: #666;
}

section {
    padding: 40px 0;
}

h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #1a1a1a;
}

#skills ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#skills li {
    background: #f0f7ff;
    border: 1px solid #cce0ff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #0066cc;
}

.project-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}

.project-card h3 {
    margin-bottom: 8px;
    color: #1a1a1a;
}

.project-card p {
    color: #666;
}

#contact p {
    margin-bottom: 8px;
}

footer {
    margin-top: 60px;
    padding: 20px 0;
    border-top: 1px solid #eee;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    #hero h1 {
        font-size: 1.8rem;
    }

    nav {
        flex-wrap: wrap;
        gap: 12px;
    }

    #skills ul {
        flex-direction: column;
    }
}
Preview and customize your portfolio

Before uploading to S3, you should preview the page locally to make sure everything looks right. This way you can fix typos or layout issues without re-uploading files.

  • Open your portfolio folder on your Desktop.
  • Double-click index.html to open it in your web browser.

You should see a styled portfolio page with a navigation bar at the top, your name in large text, and sections for About, Skills, Projects, and Contact.

What should I see?

The page should have blue navigation links across the top, a centered heading with your name, pill-shaped skill tags in light blue, and grey project cards. If you see plain unstyled text instead, the browser is not finding your style.css file.

  • Now customize the page with your real information. Open index.html in your text editor.
  • Replace "Your Name" with your actual name.
  • Update the bio paragraph in the About Me section to describe yourself.
  • Edit the skills list to match your own skills.
  • Replace the placeholder contact details with your real email, LinkedIn, and GitHub links.
  • Save index.html and refresh the page in your browser to see your changes.

Make it yours

This portfolio will be public on the internet. Take a moment to write something you would be comfortable sharing with a future employer.

Page looks unstyled or broken?

  • Confirm that index.html and style.css are in the exact same folder. The HTML references style.css by name, so they must be side by side.
  • Check that your CSS file is named exactly style.css (not style.css.txt or styles.css). The filename must match what the HTML expects.
  • Try a hard refresh in your browser: Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows). Browsers sometimes cache the old version.

My portfolio page isn't displaying styles correctly.

Your portfolio is looking good locally. Next up, you'll upload these files to S3 and configure the bucket policy so anyone on the internet can view your page.

Upload Files and Set a Bucket Policy

Your portfolio files are ready on your computer. Now it's time to put them on the internet.

In this step, you'll upload your files to S3 and configure a bucket policy that allows anyone with the URL to view your portfolio.

In this step, get ready to:
  • Upload your portfolio files to the S3 bucket.
  • Add a bucket policy granting public read access.
Upload your files to S3

Your bucket is configured and ready to receive files. Uploading through the console is like dragging files into a cloud folder.

  • Switch back to your S3 bucket in the AWS Console.
  • Click the Objects tab.
  • Click Upload.
  • Click Add files.
  • Select both index.html and style.css from the folder where you saved them.
  • Click Upload.
  • Once you see the green "Upload succeeded" banner, click Close.

You should now see index.html and style.css listed under the Objects tab in your bucket.

Don't see your files listed?

Make sure you clicked the final Upload button on the upload page (not just Add files). If the upload failed, check that both files are under 5 MB (they should be just a few KB).

help me troubleshoot why my S3 file upload failed

Add a bucket policy for public read access

Your files are in the bucket, but nobody can view them yet. By default, S3 objects are private. A bucket policy is a JSON document that defines who can access the objects in your bucket and what they can do.

  • Click the Permissions tab.
  • Scroll down to Bucket policy and click Edit.
  • Paste the following policy into the editor:
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::[[BUCKET_NAME="your-bucket-name"]]/*"
    }
  ]
}
  • Replace the bucket name placeholder with your actual bucket name (e.g., yourname-portfolio-2026).
  • Click Save changes.

What does this policy do?

  • "Principal": "*" means anyone on the internet (no authentication required).
  • "Action": "s3:GetObject" means they can only read (download) objects. They cannot upload, delete, or modify anything.
  • "Resource": "arn:aws:s3:::your-bucket/*" means the permission applies to every object inside your bucket.

After saving, you should see the policy displayed under the Bucket policy section on the Permissions tab.

Seeing an "Access Denied" error when saving?

This happens when Block Public Access is still enabled. Return to the Permissions tab, scroll up to Block public access (bucket settings), click Edit, and make sure all checkboxes are unchecked.

Also double-check that the bucket name in your policy's Resource field matches your actual bucket name exactly.

help me fix a bucket policy error

Your files are uploaded and the world has permission to read them. Next up, you'll visit the live URL and see your portfolio on the internet.

Test Your Live Website

Your files are uploaded and the bucket policy is in place. Everything is configured for your portfolio to be publicly accessible.

Now it's time to visit the live URL and confirm the world can see your site. You'll also verify it works in an incognito window to prove it's truly public.

In this step, get ready to:
  • Visit your website endpoint URL.
  • Troubleshoot any access errors.
  • Share and confirm your live portfolio link.
Visit your website endpoint

Your S3 bucket has a website endpoint URL that acts as your site's public address. This is the link you'll share with anyone who wants to see your portfolio.

  • Return to your S3 bucket in the AWS Console.
  • Click the Properties tab.
  • Scroll down to the Static website hosting section.
  • Click the Bucket website endpoint URL. This opens your live site in a new tab.

What does the endpoint URL look like?

Your endpoint URL follows a format like http://your-bucket-name.s3-website-region.amazonaws.com. The exact format depends on your AWS region.

Notice it uses HTTP, not HTTPS. Amazon S3 website endpoints do not support HTTPS. This is fine for a learning project.

✔️ I see my portfolio page

Your portfolio is live. Anyone with this URL can now see your site. Move on to the next substep to confirm it works for other people too.

ⓧ I see 403 Forbidden

A 403 error means S3 is blocking public access to your files. Check both of these:

  • Go to the Permissions tab and confirm Block all public access is unchecked. If it's still checked, choose Edit, uncheck it, save, and type confirm in the dialog.
  • Scroll down to Bucket policy on the same Permissions tab. Confirm the policy is saved and visible. If it's empty, add the bucket policy again from the previous step.

After fixing either issue, refresh your endpoint URL.

ⓧ I see 404 Not Found

A 404 error means S3 cannot find your index document. Check both of these:

  • Go to the Objects tab and confirm your file is named exactly index.html. The name is case-sensitive. A file called Index.html or INDEX.HTML will not work.
  • Confirm the file is in the root of the bucket, not inside a folder. If you see a folder name before index.html in the Objects list, delete the file and re-upload it directly to the bucket.

After fixing either issue, refresh your endpoint URL.

Share your URL

Seeing your portfolio load proves the configuration works for you. Testing in an incognito window proves it works for everyone else too.

  • Copy the endpoint URL from your browser's address bar.
  • Open an incognito or private browser window by pressing Cmd+Shift+N (macOS) or Ctrl+Shift+N (Windows).
  • Paste the endpoint URL into the incognito window's address bar and press Enter.

Your portfolio should load exactly as it did before. The incognito window has no saved credentials, so this confirms that anyone with the link can view your site.

  • Bookmark this URL in your regular browser. You'll add it to your resume and LinkedIn profile.

Why does this URL use HTTP instead of HTTPS?

Amazon S3 website endpoints do not support HTTPS. For a portfolio project, HTTP is perfectly fine.

If you later want HTTPS for a custom domain, you would add CloudFront (AWS's content delivery network) in front of your S3 bucket. That's a great follow-on project.

Site still not loading in incognito?

If the site loaded in your normal browser but not in incognito, your bucket policy may not be saved correctly. Return to the Permissions tab and confirm the bucket policy is visible and shows your bucket name in the Resource field.

help me troubleshoot why my S3 website loads in a normal browser but not in incognito mode

Secret mission

Add a Custom 404 Error Page

Right now, if someone visits a broken link on your portfolio, they see an ugly default XML error from S3. In this secret mission, you'll create a custom 404 error page that matches your portfolio's style and guides visitors back to your homepage.

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 costs essentially $0. A few kilobytes of storage and occasional page views cost fractions of a cent per month, well within your Free Tier credits.

Resources you used:

  • 1 S3 bucket with static website hosting enabled.
  • 3 files uploaded to the bucket (index.html, style.css, error.html).
  • Local copies of your HTML and CSS files on your computer.

Keep everything running

No action needed. Choose this if you plan to keep updating your portfolio over time.

  • Your website stays live at the bucket website endpoint URL.
  • Update your portfolio any time by uploading new files to the bucket.
  • Cost is negligible. Your Free Tier credits cover this indefinitely.

Keep building on this

This is your first live project. Keep it running as the foundation of your portfolio. Upload new project cards to your index.html whenever you finish another project.

Pause - I'll come back to this later

Make your site inaccessible to the public while keeping all your files stored in the bucket. You can reverse this whenever you want to go live again.

  • Open your S3 bucket in the AWS Console.
  • Go to the Permissions tab.
  • Under Block public access (bucket settings), choose Edit.
  • Check Block all public access.
  • Choose Save changes and type confirm in the dialog.

Your files remain in the bucket, but the website endpoint will return a 403 error to visitors. To go live again, uncheck Block Public Access.

Delete - I don't want to use this again

Remove all project resources completely. You will not be charged anything after deletion.

  • Open your S3 bucket in the AWS Console.
  • Go to the Objects tab.
  • Select all objects (index.html, style.css, error.html).
  • Choose Delete, type permanently delete to confirm, and choose Delete objects.
  • Go back to the S3 bucket list (click Buckets in the left sidebar).
  • Select your bucket by checking its checkbox.
  • Choose Delete.
  • Type your bucket name to confirm and choose Delete bucket.

To delete the local files, delete the index.html, style.css, and error.html files from wherever you saved them on your computer.

Nice Work!

Nice Work!

You just deployed a live portfolio website on AWS. Anyone with your endpoint URL can now see your work in their browser.

You've learned how to:

  • Created and configured an S3 bucket with static website hosting enabled.
  • Built a personal portfolio page with HTML and CSS and deployed it to the cloud.
  • Configured a bucket policy to grant public read access, making your site available to anyone with the URL.
  • Secret Mission: Configured a custom 404 error page for a polished user experience when visitors hit a broken link.

Ready to quiz yourself?