Host a Website on Amazon S3

Deploy a personal profile page to the cloud using AWS S3.

Introduction

30 Second Summary

Every website needs a home on the internet. Cloud storage services let you host a website without managing any servers, making it one of the fastest ways to get a site live.

In this project, you will deploy a personal profile page to Amazon S3 and make it accessible to anyone on the internet via a public URL.

What You'll Build

A personal profile website hosted on Amazon S3's static website hosting feature, accessible to anyone via a public URL.

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

  • An AWS account configured for the free tier.
  • An S3 bucket configured for static website hosting with a public bucket policy granting read access.
  • A live personal profile page accessible via a public URL you can share with anyone.
  • Secret Mission: Add a custom error page that displays when someone visits a page that does not exist on your site.

Are there any prerequisites?

None. This project includes full setup instructions for everything you need, including creating an AWS account. All you need is a web browser and a text editor.

Set Up Your AWS Account

To host your website on the cloud, you need an AWS account. AWS gives you access to services like S3 (where your website files will live) through a web dashboard called the AWS Management Console.

In this step, you will create a free AWS account, sign in to the console, and set your region. This takes about five minutes and does not require any payment.

In this step, get ready to:
  • Create an AWS account on the Free plan.
  • Sign in to the AWS Management Console.
  • Set your region to US East (N. Virginia).
Create an AWS account

AWS offers a Free plan that gives you credits to explore services at no cost for up to 6 months. You will not be charged for anything in this project.

  • Open your web browser and go to https://aws.amazon.com/free/.
  • Click Create a Free Account.
  • Enter your email address and choose an AWS account name.
  • Check your email for a verification code and enter it on the next screen.
  • Create a root user password and confirm it.
  • Add your contact information and accept the AWS Customer Agreement.
  • Enter a payment method (credit or debit card).
  • Verify your phone number using the code AWS sends you.
  • On the Support plan page, select Basic support - Free.
  • When asked to choose a plan, select Free.

Why do I need a credit card if it's free?

AWS requires a payment method on file to verify your identity. You will not be charged for this project because everything falls within the Free plan credits.

New AWS customers receive $100 USD in credits at sign-up, with up to $100 more available as you explore services. A small static website uses only a fraction of a cent in storage.

Account activation taking a while?

Most accounts activate within a few minutes, but the process can take up to 24 hours. If you cannot sign in right away, wait a few minutes and try again.

help me troubleshoot my AWS account activation

Sign in to the AWS Management Console

Once your account is active, you can sign in and start using AWS services.

  • Go to https://console.aws.amazon.com/.
  • Select Root user.
  • Enter the email address you used to create your account.
  • Click Next, then enter your password and click Sign in.

You should land on the Console Home dashboard. This is your central hub for accessing all AWS services.

Set your region

AWS operates data centers in regions around the world. You need to select a region where your S3 bucket and website files will be stored.

  • In the top-right corner of the console, find the region dropdown (it shows a region name like Ohio or N. Virginia).
  • Click the dropdown.
  • Select US East (N. Virginia) us-east-1.

You should now see N. Virginia displayed in the top-right corner of the console.

Why us-east-1?

US East (N. Virginia) has the broadest service availability of any AWS region. It is also the default region used in AWS documentation and tutorials, so following along with guides is easier.

Your AWS account is ready to go. Next up, you will create an S3 bucket to store your website files.

Create an S3 Bucket

Your AWS account is ready and your region is set. Now you need a place in the cloud to store your website files.

Amazon S3 (Simple Storage Service) is AWS's storage service. You'll create an S3 bucket, which is the container that will hold your website's HTML and CSS files.

In this step, get ready to:
  • Navigate to the S3 service in the AWS console.
  • Create a new bucket with a globally unique name.
  • Verify the bucket was created successfully.
Navigate to S3
  • In the AWS Management Console, click the search bar at the top of the page.
  • Type S3 and press Enter.
  • Click S3 in the search results to open the S3 dashboard.

What is S3?

S3 stands for Simple Storage Service. It stores files (called objects) inside containers (called buckets).

A bucket is like a top-level folder in the cloud that can hold any type of file. You'll create one bucket to hold your entire website.

Create your bucket
  • Click Create bucket.
  • Under General configuration, keep General purpose selected as the bucket type.
  • In the Bucket name field, enter a globally unique name for your bucket (for example, your-name-portfolio-site).
  • Leave all other settings at their defaults.
  • Scroll to the bottom of the page and click Create bucket.

Why does my bucket name need to be globally unique?

Every S3 bucket name must be unique across all AWS accounts worldwide. No two buckets can share the same name, regardless of who owns them.

Try including your name and a keyword like portfolio or site to make it unique. If your first choice is taken, add a number to the end.

Seeing a BucketAlreadyExists error?

This means someone else already owns a bucket with that name. Try a different combination. For example, add your full name, a date, or a random number to the end.

Help me pick a unique S3 bucket name

Verify your bucket was created

After creating the bucket, you should see it listed in the S3 Buckets list.

  • Click on your bucket name to open it.

Your bucket is currently empty and ready for your website files.

Your bucket is created and waiting for content. Next up, you'll build your website files and upload them into this bucket.

Build and Upload Your Website

Your S3 bucket is created and ready to hold files. Now you need something to put in it.

In this step, you will build a simple personal profile page using HTML and CSS, then upload it to your S3 bucket. These two files are all you need for a static website.

In this step, get ready to:
  • Create a local folder with an HTML and CSS file for your profile page.
  • Upload both files to your S3 bucket.
  • Verify the uploaded objects appear in your bucket.
Create your website files

Before you can host anything on S3, you need the actual website files on your computer. You will create a folder to keep them organized, then write a short profile page.

  • Right-click on your Desktop and select New Folder (macOS: right-click, then New Folder).
  • Name the folder my-website.
  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type VS Code (or TextEdit on macOS, Notepad on Windows) and press Enter to open your text editor.

VS Code makes this easier

If you have VS Code installed, use it for this project. It color-codes your HTML and CSS, making typos easier to spot. TextEdit or Notepad work fine too.

  • Create a new file by clicking File in the top menu, then New File.
  • Copy the following code into your 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 Profile</title>
    <!-- Link to our stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <!-- Your name and tagline -->
            <h1>Hi, I'm Alex</h1>
            <p class="subtitle">Cloud learner and aspiring engineer</p>
        </header>
        <main>
            <section class="about">
                <h2>About Me</h2>
                <p>I'm learning cloud computing and building projects to grow my skills. This website is hosted on AWS S3, my first cloud project!</p>
            </section>
            <section class="skills">
                <h2>What I'm Learning</h2>
                <ul>
                    <li>AWS Cloud Services</li>
                    <li>HTML and CSS</li>
                    <li>Cloud Security and Permissions</li>
                </ul>
            </section>
        </main>
        <footer>
            <p>Hosted on Amazon S3</p>
        </footer>
    </div>
</body>
</html>

What does this code do?

This is a complete HTML page with three sections: a header with your name, a main area with an about section and a skills list, and a footer.

The <link rel="stylesheet" href="style.css"> line connects this page to the CSS file you will create next. That is what makes the page look styled instead of plain.

  • Save this file as index.html inside your my-website folder on your Desktop.
  • In VS Code, click File then Save As, navigate to your my-website folder, and name the file index.html.

You will not see the styled result yet. The next file adds the visual design.

File saved as .txt instead of .html?

Some editors (especially TextEdit on macOS) save files as .txt by default. In TextEdit, click Format then Make Plain Text before saving. Make sure the file name ends in .html, not .html.txt.

help me save my file as .html instead of .txt

✔️ Awesome, I've got everything!

Great. Make sure you have saved index.html in your my-website folder before moving on.

ⓧ I'd like to double check the full code

Here is the complete index.html file. Compare yours against it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Profile</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Hi, I'm Alex</h1>
            <p class="subtitle">Cloud learner and aspiring engineer</p>
        </header>
        <main>
            <section class="about">
                <h2>About Me</h2>
                <p>I'm learning cloud computing and building projects to grow my skills. This website is hosted on AWS S3, my first cloud project!</p>
            </section>
            <section class="skills">
                <h2>What I'm Learning</h2>
                <ul>
                    <li>AWS Cloud Services</li>
                    <li>HTML and CSS</li>
                    <li>Cloud Security and Permissions</li>
                </ul>
            </section>
        </main>
        <footer>
            <p>Hosted on Amazon S3</p>
        </footer>
    </div>
</body>
</html>
  • Create another new file in your text editor by clicking File then New File.
  • Copy the following CSS code into the new file:
/* Reset default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Page background and font */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    padding: 2rem;
}

/* White card that holds all content */
.container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Centered name and tagline area */
header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

h1 {
    font-size: 2rem;
    color: #1a1a1a;
}

.subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

h2 {
    font-size: 1.3rem;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
}

section {
    margin-bottom: 1.5rem;
}

/* Custom bullet list with no default dots */
ul {
    list-style: none;
    padding: 0;
}

ul li {
    padding: 0.4rem 0;
    padding-left: 1.2rem;
    position: relative;
}

/* Blue arrow before each list item */
ul li::before {
    content: "\25B8";
    position: absolute;
    left: 0;
    color: #0073bb;
}

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

What does this code do?

This stylesheet gives your profile page a clean, modern look. It resets default browser spacing, centers a white card on a gray background, and styles your text and skills list.

The ul li::before rule replaces default bullet points with blue arrow characters. The .container class creates the rounded white card with a subtle shadow.

  • Save this file as style.css in the same my-website folder on your Desktop.
  • Open your my-website folder and double-click index.html to open it in your web browser.

You should see a white card centered on a gray background, with your name at the top, a skills list with blue arrow bullets, and a small footer at the bottom.

Page looks unstyled or plain?

Make sure style.css is saved in the same folder as index.html. The HTML file looks for style.css right next to it. Also check that the file is named exactly style.css (not style.css.txt or styles.css).

help me figure out why my CSS is not showing up

✔️ Awesome, I've got everything!

Great. Make sure both index.html and style.css are saved in your my-website folder.

ⓧ I'd like to double check the full code

Here is the complete style.css file. Compare yours against it:

* {
    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;
    background-color: #f5f5f5;
    padding: 2rem;
}

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

header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

h1 {
    font-size: 2rem;
    color: #1a1a1a;
}

.subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

h2 {
    font-size: 1.3rem;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
}

section {
    margin-bottom: 1.5rem;
}

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

ul li {
    padding: 0.4rem 0;
    padding-left: 1.2rem;
    position: relative;
}

ul li::before {
    content: "\25B8";
    position: absolute;
    left: 0;
    color: #0073bb;
}

footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 0.85rem;
}
Upload your files to S3

Your website files are ready on your computer. Now you need to get them into your S3 bucket so AWS can serve them to the internet.

  • Go back to your browser tab with the AWS Console open.
  • You should be inside your S3 bucket on the Objects tab.
  • Click Upload.
  • Click Add files.
  • Navigate to your my-website folder on your Desktop.
  • Select both index.html and style.css, then click Open.
  • Click Upload at the bottom of the page.
  • Wait for the green success banner to appear at the top of the page.
  • Click Close to return to your bucket.

You should now see both index.html and style.css listed as objects in your bucket.

Don't see your files listed?

Make sure you clicked the final Upload button (not just Add files). Adding files stages them, but the upload does not start until you confirm. If the upload failed, check that each file is under 5 GB (yours should be tiny).

help me upload files to my S3 bucket

Your website files are now stored in the cloud. Next up, you will turn this bucket into an actual website by enabling static website hosting.

Enable Static Website Hosting

Your files are uploaded to S3, but right now S3 is treating them as plain storage objects. If you tried to view them in a browser, you would just download the files instead of seeing a web page.

To serve your files as a website, you need to tell S3 that this bucket should behave like a web server. In this step, you'll enable static website hosting and get a public URL for your site.

In this step, get ready to:
  • Enable static website hosting on your S3 bucket.
  • Set index.html as the default page for your site.
  • Get your bucket's website endpoint URL.
Open bucket properties

The static website hosting setting lives in the Properties tab of your bucket. You should currently be on the Objects tab where your uploaded files are listed.

  • Click on the Properties tab at the top of your bucket page.
  • Scroll all the way down to the Static website hosting section at the bottom of the page.

You should see the Static website hosting section showing a status of Disabled.

Enable hosting and set your index document

Every website needs a default page that loads when someone visits the URL without specifying a file. This is called the index document.

  • Click Edit in the Static website hosting section.
  • Select Enable.
  • In the Index document field, type index.html.
  • Leave the Error document field blank.
  • Click Save changes.

Why is the index document name case sensitive?

The index document name must exactly match the file name you uploaded to the bucket. If you type Index.html but your file is called index.html, S3 will not find it.

Copy your website endpoint URL

Now that hosting is enabled, S3 has generated a public URL for your website. This is the address people will use to visit your site.

  • Back in the Static website hosting section, you should now see a Bucket website endpoint URL.
  • Copy this URL and save it somewhere (a sticky note or text file works).
  • Click the URL to open it in a new tab.

You should see a 403 Forbidden error. This is expected. Your bucket is still private by default, so S3 is blocking anyone from viewing your files.

Why does S3 block access by default?

S3 blocks public access to protect your data. Most buckets store private files (database backups, application logs, user uploads) that should never be visible to the internet.

Since you are hosting a public website, you will need to explicitly grant read access in the next step. This extra step ensures nobody accidentally exposes private data.

Why is the URL HTTP instead of HTTPS?

Amazon S3 does not support HTTPS access to the website endpoint. If you want to use HTTPS, you can use Amazon CloudFront. For a learning project, HTTP is perfectly fine.

Don't see the Bucket website endpoint?

Make sure you clicked Save changes after enabling hosting. If the section still shows Disabled, repeat the edit steps and confirm you selected Enable before saving.

help me find the bucket website endpoint URL

Your bucket now knows it should serve files as a website. The missing piece is permission. In the next step, you'll make your bucket public so anyone can actually view your site.

Make Your Website Public

In the previous step, you enabled static website hosting and grabbed your endpoint URL. But visiting that URL gives a 403 Forbidden error because S3 buckets are private by default.

In this step, you'll open up your bucket's permissions so anyone on the internet can view your website. This involves two changes: disabling the Block Public Access safety net, then adding a bucket policy that explicitly grants read access to everyone.

In this step, get ready to:
  • Disable Block Public Access on your bucket.
  • Add a bucket policy granting public read access.
  • Test your live website at the endpoint URL.
Disable Block Public Access

AWS enables Block Public Access on every new bucket as a safety measure. You need to turn it off before any public access policy can take effect.

  • Click on the Permissions tab at the top of your bucket page.
  • Scroll down to the Block public access (bucket settings) section.
  • Click Edit.
  • Uncheck Block all public access.
  • Click Save changes.
  • A confirmation dialog appears. Type confirm in the text field and click Confirm.

Why does Block Public Access exist?

Block Public Access is a safety layer that prevents accidental exposure of your data. Even if someone adds a public bucket policy, Block Public Access overrides it and keeps the bucket private.

For static website hosting, you intentionally want public access, so you need to disable it. In production, you would typically keep it enabled and use CloudFront instead.

Add a bucket policy

A bucket policy is a JSON document that tells AWS who is allowed to access your bucket and what actions they can perform. You'll add one that grants read access to everyone.

  • Stay on the Permissions tab.
  • Scroll down to the Bucket policy section.
  • Click Edit.
  • Paste the following policy into the editor, replacing the bucket name with your actual bucket name:
{
    "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?

  • "Effect": "Allow" grants permission (as opposed to denying it).
  • "Principal": "*" means anyone on the internet. The asterisk is a wildcard for all users.
  • "Action": "s3:GetObject" allows reading (downloading) objects. It does not allow writing or deleting.
  • "Resource" targets every object inside your bucket. The /* at the end means all files.
  • Click Save changes.

Seeing an error when saving?

  • If you see a "Policy has invalid resource" error, double-check that the bucket name in the Resource line matches your actual bucket name exactly.
  • If the policy won't save at all, go back to Block Public Access settings and confirm all checkboxes are unchecked.

Help me troubleshoot my bucket policy error.

Test your live website
  • Click on the Properties tab.
  • Scroll down to the Static website hosting section at the bottom.
  • Click your Bucket website endpoint URL.

Your personal profile page should now load in the browser. This page is live on the internet and accessible to anyone with the URL.

Still seeing a 403 Forbidden error?

  • Make sure you saved the bucket policy after pasting it. Go to Permissions and check that the policy text appears under Bucket policy.
  • Verify the bucket name in your policy's Resource line matches your actual bucket name character for character.
  • Confirm Block Public Access is fully disabled. All four checkboxes under Block public access (bucket settings) should be unchecked.

Help me troubleshoot why my S3 website is still showing a 403 error.

Secret mission

Add a Custom Error Page

Your site is live, but what happens when someone visits a URL that does not exist? Right now they get an ugly XML error message. In this secret mission, you will create a custom 404 page that matches your site's design and guides lost 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. The storage cost for a small HTML/CSS site on S3 is negligible and fully covered by your free tier credits.

Resources you used:

  • 1 S3 bucket with static website hosting enabled.
  • Website files (index.html and style.css) stored as objects in your bucket.

Keep everything running

No action needed. Choose this if you want your site to stay live at the S3 website endpoint URL.

  • Your website will remain publicly accessible at your bucket website endpoint.
  • The storage cost for a few small HTML and CSS files is negligible and covered by your AWS free tier credits.
  • New AWS accounts receive $100 in credits at signup, and S3 Standard includes 5 GB of free storage for 12 months.

Pause - I'll come back to this later

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

  • In your S3 bucket, click the Permissions tab.
  • Under Block public access (bucket settings), click Edit.
  • Check Block all public access and click Save changes.
  • Type confirm in the confirmation dialog and click Confirm.
  • Your site is now offline. Your files and bucket remain intact for when you want to re-enable public access.

Delete - I don't want to use this again

Remove all project resources and start fresh. This permanently deletes your bucket and files.

  • In the AWS console search bar, type S3 and click S3 to open the S3 service.
  • Click on your bucket name to open it.
  • Select all objects (index.html and style.css) by checking the box next to each file.
  • Click Delete. Type permanently delete in the confirmation field and click Delete objects.
  • Navigate back to the S3 buckets list by clicking Buckets in the left sidebar.
  • Select your bucket by checking the box next to its name.
  • Click Delete. Type your bucket name in the confirmation field and click Delete bucket.
  • Your bucket and all stored files are now permanently removed. No further charges will apply.

That's a Wrap!

That's a Wrap!

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

You've learned how to:

  • Created and configured an S3 bucket for static website hosting, turning cloud storage into a live web server.
  • Wrote a bucket policy to grant public read access, learning how IAM permissions control who can see your content.
  • Published a live website with a public URL that anyone on the internet can visit.
  • Added a custom 404 error page for a polished user experience when visitors hit a missing page.

Ready to quiz yourself?