Host a Cafe Website on AWS S3

Deploy a static cafe website to AWS S3 and configure public access.

Introduction

30 Second Summary

Every cafe, bakery, or side project deserves its own spot on the internet. Getting a website online used to mean renting and managing a server, but today you can host one for practically nothing using cloud storage.

In this project, you will build a polished single-page cafe website and deploy it live on the internet using Amazon S3. You will end up with a real URL you can paste into any browser and share with anyone.

What You'll Build

Picture pasting a URL into any browser and watching a sleek cafe website load with a full-screen hero, a three-column drink menu, and a warm coffee-house design that looks just as good on your phone.

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

  • A responsive cafe website built with HTML and CSS, featuring a hero section, three-column menu, about section, and footer with a warm coffee-house aesthetic.
  • A working understanding of S3's security model from hitting a 403 Forbidden error and fixing it yourself.
  • A live website URL powered by S3's website endpoint that you can paste into any browser to show your site to anyone on the internet.
  • Secret Mission: Add a custom-branded 404 error page so visitors who hit a bad URL see your cafe branding instead of an ugly XML error.

Are there any prerequisites?

You'll need VS Code installed on your computer and an AWS account. No prior experience with AWS or web development is required.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters.

Create an S3 Bucket and Upload Your Site

Your cafe website is built and looking great on your local machine. Now it's time to move those files to the cloud so anyone with a browser can visit your site.

Amazon S3 is a cloud storage service that can hold any type of file. In this step, you'll create a storage container called an S3 bucket and upload your two website files into it.

In this step, get ready to:
  • Create a new S3 bucket with a globally unique name.
  • Upload your website files to the bucket.
Create a new S3 bucket

Before you can upload anything, you need a place to put it. An S3 bucket is that place.

  • Open your web browser and navigate to the S3 console at https://console.aws.amazon.com/s3/.
  • If prompted, sign in with your AWS account credentials.

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.

Right now, you're using it as simple cloud storage. In the next steps, you'll configure it to actually serve those files as a website.

  • Click Create bucket.
  • In the Bucket name field, enter a globally unique name such as daily-grind-cafe-yourname, replacing yourname with your own name or a random string.
  • Leave all other settings at their defaults.
  • Scroll to the bottom and click Create bucket.

Why does my bucket name need to be unique?

S3 bucket names must be unique across all of AWS, not just your account. If someone else in the world already has a bucket called daily-grind-cafe, you can't use that name.

Bucket names can only contain lowercase letters, numbers, and hyphens. They must be between 3 and 63 characters long.

You should see your new bucket appear in the bucket list on the S3 console.

  • Record your bucket name here: daily-grind-cafe-yourname

Seeing a "Bucket name already exists" error?

Someone else in the world already has a bucket with that name. Try adding more characters to make it unique, like your initials and a number.

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

Help me fix my S3 bucket name

Upload your website files

Your bucket is created but empty. Time to fill it with your cafe website files.

  • Click on your bucket's name in the bucket list to open it.
  • Click Upload.
  • Click Add files.
  • Navigate to the daily-grind-cafe folder on your Desktop.
  • Select both index.html and style.css, then click Open.
  • You should see both files listed in the upload staging area. Click Upload at the bottom of the page.

Before you check the result, what do you expect to see inside your bucket after the upload completes?

  • Once you see a green Upload succeeded banner, click Close.

You should now see both index.html and style.css listed under the Objects tab inside your bucket. Your website files are in the cloud.

Don't see both files?

Make sure you selected both index.html and style.css during the upload. If you only see one file, click Upload again and add the missing file.

If you see zero files, make sure you clicked the Upload button at the bottom of the upload page. Adding files to the staging area does not upload them until you confirm.

Help me upload files to my S3 bucket

Your website files are safely stored in the cloud. Next up, you'll tell S3 to actually serve those files as a website through a dedicated URL.

Enable Static Website Hosting

Your website files are uploaded and sitting in your S3 bucket. Right now, though, the bucket is just storage. Having files in S3 doesn't automatically make them a website.

To turn your bucket into a web host, you need to enable static website hosting. This tells S3 to serve your files as web pages and gives you a dedicated URL that anyone can visit.

In this step, get ready to:
  • Enable static website hosting on your S3 bucket.
  • Test the website endpoint URL in your browser.
Turn on static website hosting

S3 can serve files as web pages, but this feature is turned off by default. You need to enable it and tell S3 which file to load when someone visits your site.

  • Return to your bucket in the S3 console. Click the Properties tab.
  • Scroll down to the Static website hosting section and click Edit.
  • Select Enable.
  • Under Hosting type, select Host a static website.
  • In the Index document field, enter index.html.
  • Click Save changes.

What is static website hosting?

Without this setting, your S3 bucket is just a container for files. Enabling static website hosting tells S3 to act like a web server, responding to browser requests with the contents of your files.

The index document is the page S3 loads when someone visits the root URL of your site. This name is case-sensitive and must exactly match your uploaded file name.

After saving, you should see the Static website hosting section now shows Enabled and displays a new Endpoint URL.

Don't see the Static website hosting section?

Make sure you are on the Properties tab, not the Permissions or Objects tab. The Static website hosting section is near the bottom of the Properties page, so you may need to scroll down.

Help me find the Static website hosting setting in my S3 bucket.

Find your website endpoint and try to visit it
  • Back on the Properties tab, scroll down to the Static website hosting section.
  • You should see an Endpoint URL. Copy it and record it here: http://your-bucket-name.s3-website-region.amazonaws.com

What is this endpoint URL?

This is the public web address for your site. When someone visits this URL, S3 serves your index.html file as a web page instead of a raw file download. The URL format includes your bucket name and the AWS region you chose.

Before you open this URL, what do you think you'll see? Your beautiful cafe website, or something else?

  • Paste the Endpoint URL into a new browser tab and press Enter.

You see a 403 Forbidden error. Your cafe website is nowhere in sight.

This is not a mistake. This is S3 doing exactly what it's designed to do.

Why am I seeing a 403 Forbidden error?

S3 follows a security-first design. Every bucket has a feature called Block Public Access that is turned on by default. This prevents anyone on the internet from reading your files, even after you enable static website hosting.

Enabling hosting gave you a URL, but Block Public Access is still blocking every request. You need to explicitly allow public access before your site will load.

Seeing a different error or a blank page?

Make sure you copied the full Endpoint URL from the Static website hosting section, not the bucket's ARN or the Object URL for a single file. The endpoint URL starts with http:// and contains s3-website in it.

Also check that you entered index.html exactly (lowercase, no spaces) as the Index document. This name is case-sensitive and must match your uploaded file.

Help me troubleshoot my S3 website endpoint.

The 403 error is the clue you needed. Your hosting is set up, your endpoint URL is ready, but S3 is locking the door. In the next step, you'll open that door by configuring the right permissions to make your cafe website visible to the world.

Make Your Website Public

You enabled static website hosting and got a website endpoint URL. But when you opened it, S3 blocked you with a 403 Forbidden error.

That 403 is not a bug. S3 follows a security-first design where nothing is public unless you explicitly allow it. In this step, you will remove the Block Public Access guard and add a bucket policy that grants read access to everyone on the internet.

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

S3 has a safety feature called Block Public Access that prevents any public access policy from taking effect. You need to turn it off before your bucket policy can work.

  • Return to your bucket in the S3 console.
  • Click the Permissions tab.
  • Scroll down to the Block public access (bucket settings) section and click Edit.
  • Uncheck all four checkboxes.
  • Click Save changes.
  • A confirmation dialog appears. Type confirm in the text field.
  • Click Confirm.

The page now shows all four Block Public Access settings as Off. Your bucket now allows public access policies to take effect.

Why does S3 ask me to type 'confirm'?

Making an S3 bucket publicly accessible is a big deal. The confirmation dialog is a safety measure that prevents you from accidentally exposing private data with a stray click.

For this project, public access is exactly what you want. Your cafe website needs to be readable by anyone on the internet.

Don't see the confirmation dialog?

Make sure you clicked Save changes after unchecking the four boxes. The confirmation dialog only appears after you attempt to save.

Help me disable Block Public Access on my S3 bucket.

Add a bucket policy for public read access

Disabling Block Public Access removes the guardrail, but your files are still not public. You need a bucket policy that explicitly grants read permission to everyone.

  • Still 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?

  • "Principal": "*" means anyone on the internet, not just your AWS account.
  • "Action": ["s3:GetObject"] grants read-only access. Visitors can view your files but cannot upload, edit, or delete anything.
  • "Resource" with the /* suffix applies the permission to every object inside the bucket.
  • Click Save changes.

Before you refresh your website, what do you expect to see this time? Will you get another 403 Forbidden, or something different?

  • Switch to the browser tab where you had the 403 Forbidden error from the previous step.
  • Refresh the page.

Your cafe website is live on the internet. You should see the full-viewport hero section with the brown-to-gold gradient, the three-column menu with Coffee, Pastries, and Specialty Drinks, the dark brown about section, and the footer with location and hours.

What is a bucket policy?

A bucket policy is a JSON document attached to an S3 bucket that defines who can do what with the objects inside it. Think of Block Public Access as a deadbolt on the front door and the bucket policy as the guest list. You had to unlock the deadbolt first, then write a guest list that says "everyone can read."

Still seeing 403 Forbidden?

  • Check that all four Block Public Access checkboxes are unchecked. Even one checked box can block the policy.
  • Open your bucket policy and confirm the bucket name in the Resource line matches your actual bucket name exactly. A single typo will break it.
  • Make sure you are using the website endpoint URL from the Properties tab (starts with http://), not the S3 object URL from the Objects tab.

Help me fix my 403 Forbidden error on my S3 static website.

Secret mission

Add a Custom 404 Error Page

Right now, visiting a page that doesn't exist on your cafe website shows an ugly XML error that looks completely broken. In this mission, you'll create a branded 404 page that keeps visitors in the cafe experience and gives them a way back to the 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 uses a single S3 bucket storing a few small files. Storage costs are fractions of a cent per month, even outside the AWS Free Tier.

Resources you used:

  • One S3 bucket (daily-grind-cafe-yourname) with static website hosting enabled, a public-read bucket policy, and three objects: index.html, style.css, and 404.html.
  • A local daily-grind-cafe folder on your Desktop containing index.html, style.css, and 404.html.

Keep everything running

No action needed. Choose this if you're still actively building or want to keep your cafe website live.

  • Your site stays accessible at the S3 website endpoint URL.
  • Storage costs for three small HTML/CSS files are fractions of a cent per month, even outside the AWS Free Tier.
  • Your local daily-grind-cafe folder remains on your Desktop.

Pause - I'll come back to this later

Take your site offline while keeping all files intact so you can resume later.

  • Open the S3 console at https://console.aws.amazon.com/s3/.
  • Click into your bucket.
  • Go to the Permissions tab.
  • Under Block public access (bucket settings), click Edit.
  • Check all four checkboxes to re-enable Block Public Access.
  • Click Save changes.
  • Type confirm in the confirmation dialog and click Confirm.

Your website endpoint now returns a 403 Forbidden error, but all your files and settings remain in the bucket. To bring the site back online, disable Block Public Access again.

Delete - I don't want to use this again

Remove all project resources and start fresh. This cannot be undone.

Delete the S3 bucket:

  • Open the S3 console at https://console.aws.amazon.com/s3/.
  • In the General purpose buckets list, select the option button next to your bucket.
  • Click Empty.
  • On the Empty bucket page, type permanently delete in the confirmation field and click Empty.
  • Once the empty operation completes, go back to the General purpose buckets list.
  • Select your bucket again and click Delete.
  • On the Delete bucket page, type your bucket name to confirm and click Delete bucket.

Delete the local project folder:

On macOS or Linux, run this in your terminal:

rm -rf ~/Desktop/daily-grind-cafe

On Windows, run this in PowerShell:

Remove-Item -Recurse -Force "$HOME\Desktop\daily-grind-cafe"

That's a Wrap!

That's a Wrap!

Nice work! You just built a cafe website from scratch and deployed it live on the internet using AWS S3. Anyone with your endpoint URL can visit The Daily Grind right now.

You've learned how to:

  • Build a responsive single-page website with HTML and CSS, featuring a full-viewport hero, a three-column menu with pricing, an about section, and a contact footer.
  • Create an S3 bucket, upload static files, and enable static website hosting with an index document to serve your site through a dedicated website endpoint.
  • Resolve a 403 Forbidden error by understanding S3's security-first design, disabling Block Public Access, and attaching a bucket policy to make your site publicly accessible.
  • Secret Mission: Added a custom-branded 404 error page so visitors who hit a bad URL see your cafe branding instead of a raw XML error.

Ready to quiz yourself?