Host a Website on Amazon S3

Host a live personal website on the cloud using Amazon S3.

Introduction

30 Second Summary

Every website you visit lives on a server somewhere. What if you could skip the server entirely and host your own website using nothing but cloud storage?

In this project, you will host your very own website on Amazon S3. You will write a simple HTML page, upload it to the cloud, and configure it so anyone in the world can visit it with a URL.

What You'll Build

You will create a personal webpage, upload it to an S3 bucket, and configure the bucket for static website hosting with public access.

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

  • An S3 bucket configured for static website hosting.
  • An HTML homepage and a custom error page uploaded as objects in your bucket.
  • A bucket policy granting public read access so anyone can view your site.
  • Secret Mission: Add a second page to your website and link between pages to create a multi-page site.

Are there any prerequisites?

You need an AWS account to complete this project. No coding experience is required.

This project runs entirely within the AWS Free Tier, so it costs nothing as long as your account is less than 12 months old.

Before We Start

Before We Start...

Create Your S3 Bucket

Every website needs a home on the internet. With Amazon S3, you can host a website directly from cloud storage without managing any servers.

Your first task is creating an S3 bucket to hold your website files. Once the bucket is set up, you'll have a dedicated container in the cloud ready for your HTML pages.

In this step, get ready to:
  • Sign in to the AWS Management Console.
  • Navigate to the Amazon S3 service.
  • Create a new S3 bucket with a globally unique name.
Sign in and navigate to S3

The AWS Management Console is the web-based dashboard where you manage all your AWS services. Let's sign in and find Amazon S3.

  • Open your web browser and go to https://console.aws.amazon.com/.
  • Sign in with your AWS account credentials.
  • In the search bar at the top of the console, type S3.
  • Select S3 from the search results.
  • In the left navigation pane, choose General purpose buckets.
  • Choose Create bucket.

Can't find the S3 service?

Make sure you're typing S3 in the search bar at the very top of the console page, not in a sidebar or filter field. The result should say S3 - Scalable Storage in the Cloud.

Help me find the S3 service in the AWS Console.

Configure your bucket name and region

Every S3 bucket needs a name that is unique across all of AWS. No two buckets anywhere in the world can share the same name.

  • For Bucket name, enter a unique name like my-first-website-yourname (replace yourname with your actual name).
  • For AWS Region, select a region close to you. For example, US East (N. Virginia) us-east-1.
  • Leave all other settings at their defaults.

Why does my bucket name need to be globally unique?

S3 bucket names are shared across all AWS accounts worldwide. Your bucket name becomes part of your website's URL, so it needs to be one-of-a-kind.

Bucket names must be 3-63 characters long and can only contain lowercase letters, numbers, and hyphens. Adding your name to the bucket name (like my-first-website-jane) is an easy way to make it unique.

Create the bucket and open it
  • Scroll to the bottom of the page and choose Create bucket.

You should see a green success banner and your new bucket listed on the General purpose buckets page.

  • Click on your bucket name to open it.

You should see an empty object list with the Objects tab selected. This is where your website files will live.

Seeing a 'Bucket name already exists' error?

Someone else in the world has already claimed that bucket name. Try adding extra characters like numbers or your full name to make it unique.

Also check that your bucket name only uses lowercase letters, numbers, and hyphens. Uppercase letters, spaces, and special characters are not allowed.

Help me fix my S3 bucket name error.

Your bucket is created and waiting for content. Next up, you'll write your website's HTML files and upload them.

Create and Upload Your Website Files

Your S3 bucket is created and waiting for content. Every website needs HTML files to display, and yours will have two: a homepage and a custom error page.

In this step, you will write two HTML files on your computer and upload them to your bucket. Once uploaded, these files become S3 "objects" that your bucket stores and can serve to visitors.

In this step, get ready to:
  • Create an index.html file for your personal homepage.
  • Create an error.html file for a custom 404 error page.
  • Upload both files to your S3 bucket.
Create your homepage file

Your homepage is the main page visitors see when they come to your website. You will create a simple HTML file with your name, a short bio, and some built-in styling.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type TextEdit (macOS) or Notepad (Windows) and press Enter to open it.

Using TextEdit on macOS? Switch to plain text mode first

TextEdit defaults to Rich Text mode, which adds hidden formatting that breaks HTML files. Before you type anything, click Format in the menu bar, then click Make Plain Text.

If you have a code editor like VS Code installed, feel free to use that instead. It handles plain text by default.

  • Copy the following HTML code and paste it into your text editor:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Cloud Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f0f8ff;
            color: #333;
        }
        h1 {
            color: #0066cc;
        }
        .highlight {
            background-color: #fff3cd;
            padding: 10px;
            border-radius: 5px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Hello! I'm [[YOURNAME="Your Name"]]</h1>
    <p>Welcome to my very first website, hosted on Amazon S3.</p>
    <div class="highlight">
        <strong>Fun fact:</strong> This website is running without any servers. It is hosted entirely on cloud storage!
    </div>
    <p>I'm learning cloud computing and this is my first project. I created an S3 bucket, uploaded this HTML file, and configured it for static website hosting.</p>
    <h2>About Me</h2>
    <p>Write a few sentences about yourself here. What are you interested in? What are you learning?</p>
</body>
</html>

What does this HTML do?

  • The <style> section adds colors and spacing so your page looks polished without needing a separate CSS file.
  • The <h1> tag displays your name as a large blue heading at the top of the page.
  • The .highlight div creates a yellow callout box for a fun fact about your site.
  • The <h2> "About Me" section is where you write a personal bio.
  • Update the "About Me" paragraph with a few sentences about yourself. What are you interested in? What are you learning?
  • Save the file as index.html on your Desktop.

macOS

  • Click File in the menu bar, then click Save.
  • Name the file index.html.
  • Choose Desktop as the location.
  • If TextEdit asks about using the .html extension, click Use .html.

Windows

  • Click File in the menu bar, then click Save As.
  • Change Save as type to All Files (*.*).
  • Name the file index.html.
  • Choose Desktop as the location.
  • Click Save.
  • Double-click index.html on your Desktop to open it in your web browser.

You should see a light blue page with your name in a large blue heading and a yellow callout box below it.

File saved as index.html.txt?

  • On macOS, make sure you switched to Plain Text mode before saving. If the file saved as index.html.txt or index.html.rtf, go to Format > Make Plain Text, then save the file again.
  • On Windows, make sure you changed Save as type to All Files. Notepad defaults to .txt which saves your file as index.html.txt.
  • If you see raw HTML code instead of a styled page when you open the file, the file extension is wrong.

My HTML file isn't saving with the right extension. How do I fix this?

✔️ Awesome, I've got everything!

Great. Double check that you have saved index.html on your Desktop and that it opens correctly in your browser.

ⓧ I'd like to double check the full code

Here is the complete index.html file. Compare it against yours and make sure everything matches.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Cloud Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f0f8ff;
            color: #333;
        }
        h1 {
            color: #0066cc;
        }
        .highlight {
            background-color: #fff3cd;
            padding: 10px;
            border-radius: 5px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Hello! I'm [Your Name]</h1>
    <p>Welcome to my very first website, hosted on Amazon S3.</p>
    <div class="highlight">
        <strong>Fun fact:</strong> This website is running without any servers. It is hosted entirely on cloud storage!
    </div>
    <p>I'm learning cloud computing and this is my first project. I created an S3 bucket, uploaded this HTML file, and configured it for static website hosting.</p>
    <h2>About Me</h2>
    <p>Write a few sentences about yourself here. What are you interested in? What are you learning?</p>
</body>
</html>
Create your error page

A custom error page tells visitors when they have landed on a page that does not exist. Instead of showing a generic browser error, your site will display a friendly 404 message with a link back home.

  • In your text editor, create a new file by pressing Cmd+N (macOS) or Ctrl+N (Windows).
  • If you are using TextEdit, make sure you are in Plain Text mode again (Format > Make Plain Text).
  • Copy the following HTML code and paste it 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>Page Not Found</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff0f0;
            color: #333;
            text-align: center;
        }
        h1 {
            color: #cc0000;
            font-size: 48px;
        }
        a {
            color: #0066cc;
        }
    </style>
</head>
<body>
    <h1>404</h1>
    <h2>Oops! Page not found.</h2>
    <p>The page you are looking for does not exist.</p>
    <p><a href="index.html">Go back to the homepage</a></p>
</body>
</html>

What does this HTML do?

  • The large 404 heading and "Oops! Page not found." message let visitors know the page does not exist.
  • The <a href="index.html"> link sends visitors back to your homepage so they are not stuck on a dead end.
  • The light red background (#fff0f0) makes the error page visually distinct from your homepage.
  • Save the file as error.html on your Desktop, using the same steps you followed for index.html.
  • Double-click error.html on your Desktop to open it in your browser.

You should see "404" in large red text, "Oops! Page not found." below it, and a blue link to go back to the homepage.

Seeing raw HTML code instead of a styled page?

  • Your file might have the wrong extension. Check that the file is named error.html and not error.html.txt.
  • If you are using TextEdit, confirm you are in Plain Text mode before saving.

My error.html file shows raw code in the browser instead of a styled page. What went wrong?

✔️ Awesome, I've got everything!

Great. Make sure you have both index.html and error.html saved on your Desktop.

ⓧ I'd like to double check the full code

Here is the complete error.html file. Compare it against yours and make sure everything matches.

<!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 {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff0f0;
            color: #333;
            text-align: center;
        }
        h1 {
            color: #cc0000;
            font-size: 48px;
        }
        a {
            color: #0066cc;
        }
    </style>
</head>
<body>
    <h1>404</h1>
    <h2>Oops! Page not found.</h2>
    <p>The page you are looking for does not exist.</p>
    <p><a href="index.html">Go back to the homepage</a></p>
</body>
</html>
Upload your files to S3

Both HTML files are ready on your computer. Now you need to upload them to your S3 bucket so they become objects that S3 can serve as web pages.

  • Switch back to the S3 console in your browser. You should see your bucket's object list page (it will be empty).
  • Click Upload.
  • Click Add files.
  • Navigate to your Desktop and select both index.html and error.html.
  • Click Upload.

You should see a green "Upload succeeded" banner at the top of the page.

  • Click Close to return to your bucket's object list.

Both index.html and error.html now appear as objects in your bucket.

What is an S3 object?

An object is any file stored inside an S3 bucket. Each object has a key (its name, like index.html), the file data itself, and metadata that S3 manages automatically.

Don't see both files in your bucket?

  • Click the refresh button (circular arrow icon) above the objects list.
  • Make sure you uploaded the files to the correct bucket. Check the bucket name in the breadcrumb at the top of the page.
  • If you only see one file, go back and upload the missing file by clicking Upload again.

I uploaded my files but they are not showing in my S3 bucket. What should I check?

Your website files are now stored in S3. Next up, you will enable static website hosting so S3 knows to serve these files as a website.

Enable Static Website Hosting

Your HTML files are uploaded and ready to go. Now it's time to turn your S3 bucket into an actual website.

Right now, S3 is just storing your files like any other data. Enabling static website hosting tells S3 to serve your files as web pages and gives you a dedicated URL for your website.

In this step, get ready to:
  • Enable static website hosting on your bucket.
  • Set your homepage and error page documents.
  • Get your website's URL and test it in a browser.
Open the static website hosting settings
  • In your S3 bucket, choose the Properties tab.
  • Scroll down to the Static website hosting section.
  • Choose Edit.
Enable hosting and set your documents

S3 needs to know which file to show as your homepage. It also needs to know which file to display when someone visits a page that doesn't exist.

  • Select Enable for static website hosting.
  • In the Index document field, enter index.html.
  • In the Error document field, enter error.html.
  • Choose Save changes.

What are index and error documents?

The index document is the default page S3 serves when someone visits your website URL. The error document is what S3 shows when someone requests a page that doesn't exist.

These file names are case sensitive. index.html and Index.html are treated as different files, so make sure your entries match your uploaded file names exactly.

Don't see your changes saved?

Make sure you chose Save changes at the bottom of the edit panel. If the section still shows Disabled under Static website hosting, try editing the section again and confirming that Enable is selected.

My static website hosting settings didn't save in S3.

Test your website endpoint URL

Now that hosting is enabled, S3 has generated a website URL for your bucket. Let's see if it works.

  • Scroll back down to the Static website hosting section in the Properties tab.
  • Copy the Bucket website endpoint URL.
  • Open a new browser tab and paste the URL into the address bar.

You will see a 403 Forbidden error page. This is expected.

Why am I seeing 403 Forbidden?

Your bucket's files are still private. S3 blocks public access by default through a feature called Block Public Access.

Until you update your bucket's permission settings, nobody can view the files through the website URL. You'll fix this in the next step.

Don't see the endpoint URL?

Make sure you enabled static website hosting and chose Save changes in the previous substep. The endpoint URL only appears after hosting is successfully enabled.

I can't find my S3 bucket website endpoint URL.

Your bucket now has its own website URL. In the next step, you'll update the permissions so the world can actually see your site.

Make Your Website Public

In the last step, you turned on static website hosting and got your very own website URL. But when you visited it, S3 returned a 403 Forbidden error.

That error happened because S3 locks down all content by default. In this step, you will open up your bucket's permissions so that anyone on the internet can view your website.

In this step, get ready to:
  • Disable Block Public Access on your bucket.
  • Add a bucket policy granting public read access.
  • Visit your live website URL and see your homepage.
Disable Block Public Access

Block Public Access is a safety feature that overrides any permissions you set on a bucket. Even if you add a policy that says "everyone can read my files," Block Public Access will ignore it.

  • In your S3 bucket, choose the Permissions tab.
  • Scroll down to Block public access (bucket settings) and choose Edit.
  • Uncheck Block all public access.
  • Choose Save changes.
  • A confirmation dialog appears. Type confirm in the text field and choose Confirm.

You should see the Block public access settings update to show all four options as Off.

Why does AWS make this so hard to turn off?

AWS adds these extra confirmation steps on purpose. Making a bucket public means anyone on the internet can access its contents. The confirmation dialog and the multi-step process help prevent accidental exposure of sensitive data.

For a personal website, public access is exactly what you want. For other buckets storing private data, you would leave Block Public Access turned on.

Still seeing Block public access as on?

If your AWS account has account-level Block Public Access enabled, it overrides your bucket-level settings. Look for a note under Block public access (bucket settings) that mentions account-level settings. You may need to edit your account-level Block Public Access settings as well.

Help me disable Block Public Access on my S3 bucket

Add a bucket policy for public read access

Disabling Block Public Access removed the safety lock, but it did not actually grant anyone permission to read your files. For that, you need a bucket policy.

  • Still on the Permissions tab, scroll down to Bucket policy and choose Edit.
  • Paste the following JSON policy into the editor, replacing the bucket name with your own:
{
    "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 "everyone on the internet."
  • "Action": "s3:GetObject" means they can only read (download) files. They cannot upload, edit, or delete anything.
  • "Resource" points to every object inside your specific bucket. The /* at the end means "all files."

Together, this policy says: anyone can view any file in my bucket, but nothing else.

  • Choose Save changes.

You should see the policy appear under the Bucket policy section. A Publicly accessible warning badge also appears near the top of the Permissions tab.

Seeing an Access Denied error when saving?

Double check that you disabled Block Public Access in the previous substep. The bucket policy cannot grant public access while Block Public Access is still on.

Also make sure you replaced the bucket name in the Resource line with your actual bucket name. The name must match exactly, including the /* at the end.

Help me fix my S3 bucket policy

Visit your live website

Both permission changes are in place. Time to see if your website is live.

  • Choose the Properties tab.
  • Scroll down to the Static website hosting section.
  • Click the Bucket website endpoint URL to open it in a new browser tab.

Your personal homepage should now load. You should see your name, your bio, and the highlighted fun fact box you wrote earlier.

Why is the URL HTTP instead of HTTPS?

S3 static website hosting endpoints only support HTTP. For HTTPS, you would add CloudFront (a content delivery network) in front of your bucket. For a learning project, HTTP works perfectly fine.

Still seeing 403 Forbidden?

Make sure Block Public Access is fully disabled. All four settings should show as Off on the Permissions tab.

Check that your bucket policy's Resource value uses your exact bucket name. Also confirm the file name index.html in your bucket matches what you entered as the Index document. File names are case-sensitive.

Help me debug my S3 static website

Secret mission

Build a Multi-Page Website

Your website works, but it only has one page. Real websites have multiple pages linked together with navigation. Can you add a second page to your site and connect 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 Amazon S3 with pay-per-use pricing, but costs for a simple static website are fractions of a cent per month.

Cost warning

S3 charges for storage and requests, but two small HTML files cost almost nothing. If your AWS account is less than 12 months old, S3 usage falls under the AWS Free Tier (5 GB storage, 20,000 GET requests, and 2,000 PUT requests per month).

If you are past the Free Tier period and want to avoid any charges, choose Pause or Delete below.

Resources you used:

  • 1 S3 bucket with static website hosting enabled and public read access.
  • HTML files (index.html and error.html) uploaded as S3 objects.
  • A bucket policy granting public read access to all objects.

Keep everything running

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

  • Your website remains publicly accessible at the bucket website endpoint.
  • Storage costs for two small HTML files are negligible (well under one cent per month).
  • If your account is within the 12-month Free Tier window, you will not be charged at all.

Pause - I'll come back to this later

Block public access to take your website offline while keeping all your files and settings intact.

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

Your website URL now returns a 403 error, but all files, hosting settings, and the bucket policy stay in place. To resume, uncheck Block all public access using the same steps.

Delete - I don't want to use this again

Remove all project resources permanently. You cannot undo this.

  • Open your bucket in the S3 console.
  • Select all objects by checking the top checkbox, then choose Delete.
  • Type permanently delete in the confirmation field and choose Delete objects.
  • Go back to the S3 Buckets list using the left navigation pane.
  • Select your bucket by checking its checkbox, then choose Delete.
  • Type your bucket name to confirm and choose Delete bucket.

Your bucket and all its contents are now permanently removed. Your website URL will stop working immediately.

That's a Wrap!

That's a Wrap!

Nice work! You just hosted your very first website on the cloud using Amazon S3.

You went from an empty AWS console to a live website that anyone in the world can visit with a URL.

What you learned:

  • Created an S3 bucket, uploaded HTML files as objects, and enabled static website hosting to serve a live webpage.
  • Configured Block Public Access settings and wrote a JSON bucket policy to grant public read access to your website.
  • Navigated the AWS Management Console to create, configure, and deploy a cloud resource from scratch.
  • Built a multi-page website with navigation links between pages.

Ready to quiz yourself?