Deploy a Website with S3 and Amplify

Build and deploy a small business landing page to AWS using S3 and Amplify.

Introduction

30 Second Summary

Every small business needs a website, but getting one live on the internet can feel like a mystery if you have never done it before.

In this project, you will build a landing page for a fictional bakery using HTML and CSS, then deploy it to the cloud using Amazon S3 and AWS Amplify Hosting so anyone on the internet can visit it.

What You'll Build

A complete small business landing page deployed to a live, public URL on AWS Amplify Hosting with HTTPS and CloudFront CDN delivery.

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

  • A professional-looking HTML/CSS landing page for a small business with a hero section, menu, and contact info.
  • An Amazon S3 bucket containing your website files, ready for deployment.
  • A live deployment on AWS Amplify Hosting with a public HTTPS URL powered by CloudFront CDN.
  • A custom 404 error page so broken links show a branded, helpful message instead of a generic error.

Are there any prerequisites?

You need an AWS account and basic familiarity with HTML and CSS. No prior AWS experience is required. If you are not sure your AWS account is set up correctly, help me check my AWS account setup.

Before We Start

Before We Start...

Set Up Your Project Files

Before you can deploy anything to the cloud, you need a website to deploy.

In this step, you'll create the project folder and two foundational files for the Golden Crust Bakery landing page: an HTML file for the page structure and a CSS file for the visual styling.

In This Step, Get Ready To:
  • Create a project folder with the base HTML file for the landing page.
  • Create a CSS file with a warm bakery color scheme.
  • Verify your project structure loads correctly in the browser.
Create the Project Folder and HTML File

Every website starts with an index.html file. This is the file that browsers look for by default when someone visits your site.

  • Create a new folder on your computer called golden-crust-bakery.
  • Open this folder in your text editor (VS Code or any code editor you prefer).
  • Create a new file inside the folder called index.html.
  • Paste the following HTML into index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Golden Crust Bakery</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

</body>
</html>

What does this code do?

This is the base structure every HTML page needs. The <!DOCTYPE html> declaration tells the browser this is a modern HTML5 page. The <head> section contains metadata like the page title and a link to the CSS stylesheet. The <body> is where all the visible content will go.

Create the CSS File

The CSS file controls how your website looks. You'll set up a warm, bakery-themed color palette and some base styles that apply to the entire page.

  • Create a new file in the same golden-crust-bakery folder called styles.css.
  • Paste the following CSS into styles.css:
/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', serif;
    color: #3e2723;
    background-color: #fdf6e3;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

What does this CSS do?

The * selector is a CSS reset. It removes default browser spacing so your design looks consistent across different browsers.

The color values create the bakery theme: #3e2723 is a rich dark brown for text, and #fdf6e3 is a warm cream for the background. You'll add the gold accent color #d4a017 in the next step when you build the page content.

Verify Your Project Structure

Before moving on, confirm everything is wired up correctly. Your folder should contain exactly two files.

  • Check that your golden-crust-bakery folder contains both index.html and styles.css.
  • Open index.html in your browser by double-clicking the file or dragging it into a browser window.

What should I see?

You should see a blank page with a warm cream background color. The browser tab should display "Golden Crust Bakery" as the page title. If the background is plain white instead of cream, double-check that your styles.css file is saved and that the <link> tag in your HTML points to styles.css (not a different filename).

Your project skeleton is ready. Next up, you'll fill in the landing page with a hero section, a menu, and a contact section to bring the bakery to life.

Build the Landing Page Content

Your project files are set up and your blank page loads in the browser. Now it's time to fill that page with real content that looks like a professional small business website. You'll build three sections: a hero banner, a menu showcase, and a contact section.

In This Step, Get Ready To:
  • Build a hero section with a heading, tagline, and call-to-action button.
  • Create a menu section with three specialty cards laid out side by side.
  • Add a contact section and footer to complete the landing page.
Add the Hero Section

The hero section is the first thing visitors see when they land on the page. It needs to communicate who the business is and what they do in just a few seconds.

  • Open index.html in your text editor.
  • Inside the <body> tags, add the following hero section:
<header class="hero">
  <h1>Golden Crust Bakery</h1>
  <p>Freshly baked goodness since 2020</p>
  <a href="#menu" class="cta-button">View Our Menu</a>
</header>

What does this code do?

The <header> element wraps the hero banner. The <h1> is the bakery name, the <p> is a tagline, and the <a> link acts as a call-to-action button. The href="#menu" makes the button scroll down to the menu section when clicked.

  • Open styles.css and add the following styles for the hero section:
/* Hero section */
.hero {
  background-color: #4e342e;
  color: #fdf6e3;
  text-align: center;
  padding: 80px 20px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.cta-button {
  display: inline-block;
  padding: 12px 30px;
  background-color: #d4a017;
  color: #3e2723;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  font-size: 1rem;
}

.cta-button:hover {
  background-color: #b8860b;
}

What does this styling do?

The hero gets a dark brown background with cream-colored text, creating strong contrast. The CTA button uses the gold accent color and includes a hover effect so visitors know it's clickable. The generous padding: 80px gives the hero section visual weight and breathing room.

  • Save both files and refresh your browser.

You should see a dark brown banner with the bakery name, tagline, and a gold button.

Add the Menu Section

The menu section showcases the bakery's specialties. You'll create three cards laid out side by side using CSS flexbox.

  • In index.html, add the following section directly below the closing </header> tag:
<section id="menu">
  <h2>Our Specialties</h2>
  <div class="menu-cards">
    <div class="card">
      <h3>Sourdough Bread</h3>
      <p>Slow-fermented with a crispy crust and soft, tangy interior. Our most popular loaf.</p>
    </div>
    <div class="card">
      <h3>Croissants</h3>
      <p>Buttery, flaky layers baked to golden perfection every morning.</p>
    </div>
    <div class="card">
      <h3>Custom Cakes</h3>
      <p>Handcrafted cakes for birthdays, weddings, and every celebration in between.</p>
    </div>
  </div>
</section>

What does this code do?

The id="menu" attribute connects this section to the hero's CTA button. When a visitor clicks "View Our Menu," the browser scrolls directly to this section. The three <div class="card"> elements will become side-by-side cards once you add the CSS.

  • Add the following styles to styles.css:
/* Menu section */
#menu {
  padding: 60px 20px;
  text-align: center;
  background-color: #fdf6e3;
}

#menu h2 {
  font-size: 2rem;
  color: #3e2723;
  margin-bottom: 40px;
}

.menu-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.card {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 30px;
  width: 280px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card h3 {
  color: #d4a017;
  margin-bottom: 10px;
}

.card p {
  color: #5d4037;
  line-height: 1.6;
}

What is flexbox?

Flexbox is a CSS layout system that arranges elements in a row or column. The display: flex property on .menu-cards places the three cards side by side. The flex-wrap: wrap property makes the cards stack vertically on smaller screens, keeping the page responsive.

  • Save both files and refresh your browser.

Three white cards should appear below the hero, each with a gold heading and a description.

Add the Contact Section and Footer

Every business website needs contact information. This final section tells visitors where to find the bakery and when it's open.

  • In index.html, add the following sections below the closing </section> tag of the menu:
<section id="contact">
  <h2>Visit Us</h2>
  <p>123 Baker Street, Springfield, IL 62701</p>
  <p>Phone: (555) 123-4567</p>
  <p>Open Monday - Saturday, 7:00 AM - 6:00 PM</p>
</section>

<footer>
  <p>&copy; 2025 Golden Crust Bakery. All rights reserved.</p>
</footer>
  • Add the following styles to styles.css:
/* Contact section */
#contact {
  padding: 60px 20px;
  text-align: center;
  background-color: #efebe9;
  color: #3e2723;
}

#contact h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

#contact p {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

/* Footer */
footer {
  background-color: #3e2723;
  color: #fdf6e3;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}
  • Save both files and refresh your browser.

Your complete landing page should now display all four sections: the hero banner, the three specialty cards, the contact information, and the footer. Scroll through the entire page to confirm everything looks right.

Pro tip: test the button

Click the "View Our Menu" button in the hero section. The page should smoothly scroll down to the menu section. If it jumps instead of scrolling, you can add html { scroll-behavior: smooth; } to the top of your CSS file for a polished effect.

Your landing page is complete. Next up, you'll upload these files to Amazon S3 and get them ready for deployment to the cloud.

Create an S3 Bucket and Upload Your Website

Your landing page looks great locally, but right now only you can see it. To make it accessible on the internet, you need to store your files somewhere in the cloud. Amazon S3 is AWS's storage service, and it's where your website files will live before they get deployed to the world.

In This Step, Get Ready To:
  • Create an S3 bucket to store your website files in the cloud.
  • Upload your index.html and styles.css files to the bucket.
  • Verify that both files are stored correctly and ready for deployment.
Create an S3 Bucket

An S3 bucket is a container in AWS where you store files (called "objects"). Think of it as a folder in the cloud with a unique name that nobody else in the world can use.

  • Sign in to the AWS Management Console.
  • Open the Amazon S3 console at https://console.aws.amazon.com/s3/.
  • Click Create bucket.
  • For Bucket name, enter golden-crust-bakery-your-name.
  • For AWS Region, select US East (N. Virginia) us-east-1.
  • Leave all other settings at their defaults.
  • Scroll to the bottom and click Create bucket.

Why do I have to enter my name in the bucket name?

S3 bucket names must be globally unique across all AWS accounts worldwide. Adding your name ensures your bucket name doesn't collide with someone else's. Bucket names must also be 3-63 characters, using only lowercase letters, numbers, and hyphens.

Why US East (N. Virginia)?

AWS Amplify Hosting is not available in every AWS Region. Your S3 bucket must be in a region where Amplify is available. us-east-1 is a safe default that supports Amplify and most other AWS services.

Getting a "Bucket name already exists" error?

This means someone else already has a bucket with that exact name. Try adding extra characters to make it unique, like golden-crust-bakery-jsmith-2025. If you're still stuck, help me fix this bucket naming error.

Upload Your Website Files

Now that your bucket exists, you need to put your website files inside it. S3 stores files as "objects" within buckets.

  • Click on your newly created bucket name to open it.
  • Click Upload.
  • Click Add files.
  • Select both index.html and styles.css from your golden-crust-bakery folder.
  • Click Upload.

You should see a green "Upload succeeded" banner at the top of the page. Both files now appear in your bucket's object list.

Verify Your Bucket Contents

Before moving on to deployment, it's worth confirming that everything uploaded correctly.

  • Click on index.html in the bucket to view its details.
  • Confirm the file size looks correct (it should be a few kilobytes).
  • Navigate back to the bucket and confirm styles.css is also listed.

Your website files are now stored in the cloud. In the next step, you'll connect this S3 bucket to AWS Amplify Hosting to make your site live on the internet with a public URL.

Deploy to Amplify Hosting from S3

Your website files are sitting in an S3 bucket, but nobody can visit them yet. Raw S3 website endpoints don't support HTTPS, which means browsers would flag your site as insecure. AWS Amplify Hosting solves this by wrapping your S3 files with a managed CDN powered by CloudFront, giving you HTTPS, global delivery, and a public URL in just a few clicks.

In This Step, Get Ready To:
  • Launch an Amplify app directly from the S3 console.
  • Configure and deploy your website through Amplify Hosting.
  • Verify your live website is publicly accessible with HTTPS.
Launch Amplify from the S3 Console

AWS provides a shortcut to create an Amplify app directly from your S3 bucket's settings. This pre-selects your bucket so you don't have to configure the connection manually.

  • Navigate back to your S3 bucket in the AWS console.
  • Select the Properties tab.
  • Scroll down to the Static website hosting section.
  • Click Create Amplify app.

This redirects you to the Amplify console with your bucket already pre-selected as the source.

Why Amplify Hosting Instead of Raw S3 Hosting?

You might wonder why you can't just host directly from S3. S3 does have a static website hosting feature, but it only serves content over HTTP, not HTTPS. Modern browsers warn users about insecure sites, which would scare away visitors.

Amplify Hosting bundles S3 storage with CloudFront CDN, giving you HTTPS, global edge caching, and managed deployment in one service. AWS themselves recommend this as the preferred approach for static website hosting.

Configure the Amplify App

The Amplify console needs a few details to set up your deployment. You'll give your app a name, a branch label, and confirm the S3 source location.

  • On the Deploy with S3 page, enter Golden Crust Bakery in the App name field.
  • Enter main in the Branch name field.
  • Confirm that the S3 location of objects to host points to the root of your bucket. If it doesn't, click Browse S3 to select your bucket.
  • Click Save and deploy.

What is a Branch Name?

In Git-based workflows, branches represent different versions of your code. Since you're deploying from S3 instead of a Git repository, the branch name is just a label. Using main is a common convention that signals this is your primary, production version.

Verify Your Live Website

Amplify takes a minute or two to deploy your files across its CDN. Once it's done, you'll have a live public URL.

  • Wait for the deployment status to show as complete (usually 1-2 minutes).
  • Find the URL displayed by Amplify. It ends in .amplifyapp.com.
  • Click the URL to open your live website in a new browser tab.
  • Confirm your landing page displays correctly with all three sections: the hero, the menu, and the contact section.
  • Check the browser address bar to verify the URL starts with https://.

What Should I See?

Your Golden Crust Bakery landing page should look exactly like it did when you previewed it locally. The hero section, menu cards, and contact section should all render with the warm color scheme you defined in styles.css. The key difference is that this page is now live on the internet. Anyone with the URL can visit it.

Page Looks Unstyled or Broken?

If your page loads but the styles are missing, make sure you uploaded both index.html and styles.css to the root of your S3 bucket (not inside a subfolder). Also check that the <link> tag in your HTML references styles.css with the exact filename. Help me troubleshoot my Amplify deployment.

Your bakery website is live and accessible to anyone on the internet. Next up, you'll learn how to update your site and redeploy changes so you can keep it fresh.

Update Your Site and Redeploy

Your website is live, but websites are never truly "done." A real small business owner updates their site regularly with new products, seasonal hours, or fresh taglines. In this step, you'll walk through the update-and-redeploy workflow that you'd use to maintain a live site on AWS Amplify Hosting.

In This Step, Get Ready To:
  • Edit your website's HTML content locally.
  • Upload the updated file to your S3 bucket to overwrite the previous version.
  • Manually trigger a redeployment in Amplify and verify the changes are live.
Make a Change to Your Website

To test the update workflow, you'll make a visible change to your landing page. Changing the hero tagline is a quick way to confirm the redeployment worked.

  • Open index.html in your text editor.
  • Find the <p> tagline inside the hero section.
  • Change the text to something new, like "Artisan breads and pastries, baked fresh daily."
  • Save the file.

You can preview the change by opening index.html in your browser locally. The updated tagline should appear in the hero section.

Upload the Updated File to S3

Your live site still shows the old tagline because the file in your S3 bucket hasn't changed yet. You need to upload the new version to replace it.

  • Go back to the Amazon S3 console at https://console.aws.amazon.com/s3/.
  • Click on your bucket name to open it.
  • Click Upload.
  • Click Add files and select your updated index.html.
  • Click Upload.

S3 overwrites the previous version of index.html with your new file. You should see a success banner confirming the upload completed.

Why isn't my live site updated yet?

Amplify Hosting does not automatically detect changes in your S3 bucket. Even though the file in S3 is updated, your live site still serves the old version. You need to manually trigger a redeployment from the Amplify console.

Redeploy From Amplify
  • Open the AWS Amplify console at https://console.aws.amazon.com/amplify/apps.
  • Click on your Golden Crust Bakery app.
  • Find and click the option to redeploy your app.
  • Wait for the deployment to complete. This usually takes 1-2 minutes.

Once the deployment status shows as complete, your updated content is live.

  • Click your Amplify URL (the one ending in .amplifyapp.com) to open your live site.
  • Confirm the updated tagline appears in the hero section.

Pro tip: hard refresh

If you still see the old tagline, your browser may be showing a cached version. Press Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows) to do a hard refresh that bypasses the cache.

What Is This Workflow in Practice?

This three-step cycle of edit locally, upload to S3, and redeploy from Amplify is the workflow you'd use to maintain any static site hosted this way. For a small business, this means updating menus, hours, or promotions without needing a developer or a complex deployment pipeline.

Secret mission

Build a Custom 404 Error Page

Right now, if someone visits a broken link on your site, they get a generic error page with no branding and no way back. In this mission, you'll create a custom 404 page that matches your bakery's style and configure Amplify's rewrite rules to serve it automatically.

Before you go

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project uses AWS Amplify Hosting and S3, which are free tier eligible but can incur charges if you exceed the free tier limits.

Cost warning

Amplify Hosting's free tier includes 5 GB storage and 15 GB data transfer out per month. Beyond that, charges are $0.023/GB stored and $0.15/GB served. S3 storage costs $0.023/GB/month after the free tier. For a small site like this, costs are minimal, but deleting the resources when you're done ensures you won't be charged at all.

Resources you used:

  • An Amazon S3 bucket containing your website files.
  • An AWS Amplify Hosting app serving your website via CloudFront CDN.

Keep everything running

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

  • Your site will remain live at the Amplify URL.
  • As long as you stay within the free tier limits (5 GB storage, 15 GB data transfer/month), there will be no charges.
  • Monitor your usage in the AWS Billing console to make sure you stay within the free tier.

Pause - I'll come back to this later

There is no pause option for Amplify Hosting. The app remains deployed until deleted.

  • If you want to stop serving the site, you will need to delete the Amplify app entirely (see the Delete tab).
  • You can keep your S3 bucket with the website files so you can redeploy later without rebuilding.
  • S3 storage costs are minimal for a few small files, but monitor your billing dashboard to be safe.

Delete - I don't want to use this again

Remove all project resources to avoid any ongoing charges.

  • Delete the Amplify app first. Open the Amplify console, select your Golden Crust Bakery app, then go to App settings > General settings > Delete app.
  • Delete the S3 bucket. Open the S3 console, select your bucket, and choose Delete. You must empty the bucket before deleting it.
  • Optionally, delete the local golden-crust-bakery folder from your computer if you no longer need it.

Mission accomplished

That's a Wrap!

Nice work! You just built a professional small business website from scratch and deployed it live to the internet using AWS.

You learned how to:

  • Create an Amazon S3 bucket and upload website files to AWS cloud storage.
  • Deploy a static website to AWS Amplify Hosting with a live, public HTTPS URL powered by CloudFront CDN.
  • Update and redeploy a live site by uploading new files to S3 and triggering a redeployment in Amplify.
  • Build a custom 404 error page and configure Amplify rewrite rules to serve it for broken links.

Ready to quiz yourself?