Host a Website on Amazon S3

Let's host your very own website on Amazon S3!

Introduction

⚡️ 30 second Summary

You can use Amazon S3 to store and retrieve any amount of data at any time from anywhere on the web.

In today's project, we'll be creating an S3 bucket to store pictures and files needed in your very own website.

You'll be using Amazon S3 (which stands for Amazon Simple Storage Service) to host a website.

Note

Websites are run by pictures and files. You'll be hosting (which basically means make public on the Internet) a website on Amazon S3 by uploading website content into S3 and then making it publicly accessible.

The Beginners Challenge

This project is project ONE of our AWS Beginners Challenge! In this challenge, you'll get started with AWS and take on a series of hands-on projects that helps you kickstart a portfolio. Zero experience required, and designed for absolute beginners just getting started with cloud.

If you would like to watch a complete demo of how to do this project, check out our 🎬 walkthrough with Natasha 🎬

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project.

Go to end

Before we start...

It's always good to understand exactly what you're here to do.

Create a bucket in Amazon S3

Alright! Let's start by opening up an iconic AWS service called Amazon S3 🪣. This is where you'll store the files that make up your website.

In this step, get ready to:

  • Open Amazon S3.
  • Create a storage space for your website files.
  • Log in to the AWS console.
  • In the AWS Management Console, search for S3.
  • Select the AWS Region closest to you. You can find this at the top right corner of your AWS Management console, right next to your name.
  • Choose Create bucket.
  • For Bucket name, enter
nextwork-website-project-[[YOURNAME="enter your name"]]
  • Make sure to replace enter your name with your name.

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

An S3 bucket name is globally unique. After you create a bucket, no other AWS account in the entire world can use your bucket's name (unless you delete the bucket).

This also means that when you create your bucket, you need to make sure the bucket's name is unique too.

  • For Object Ownership, choose ACLs enabled.

Ooo what are ACLs (Access Control Lists)?

An ACL = a set of rules that decides who can get access to a resource.

Enabling ACLs in this S3 setup lets you control who can access and do things with the objects (i.e. website files) you upload into your bucket.

With ACLs, different AWS accounts can own and control different files in your bucket.

💡 What is the yellow pop up saying?

A yellow warning banner will pop up when you enable ACLs. This banner tells you that it's simpler to use another tool called bucket policies.

It's true that bucket policies make it really easy to control access for an entire bucket (e.g. making the entire bucket and everything inside public), but ACLs are the way to go if you want to manage access for each object in your bucket individually.

In this project, we're using ACLs to show you how they work.

  • Choose Bucket owner preferred.
  • For Block Public Access settings for this bucket, clear the check box for Block all public access.

A yellow banner has popped up!

This banner is telling us that the bucket and its objects might become public if we untick the checkbox. This is what we want to host a public website!

  • Check the box that says “I acknowledge that the current settings might result in this bucket and the objects within becoming public.”
  • For Bucket Versioning, choose Enable.
  • Choose Create bucket.

Upload website content to your bucket

Phew, that's your S3 bucket all created.

Time to get those website's files inside your bucket! 📑 ➡ 🪣

In this step, get ready to:

  • Download an HTML file that sets up your website.
  • Download a zip file of images for your website.
  • Upload both files into your S3 bucket.
  • In the Buckets section, choose the name of your new bucket.
  • Download these files to your computer so we can add them into your bucket (right click on each link, and select Save link as...):

What is HTML?

HTML (HyperText Markup Language) is used to create and design web pages. It's your way of telling the website where you want to display your text, images, videos and more. Think of HTML as the blueprint that shapes what you see when you visit a website.

  • Open the Downloads folder in your local computer.
  • Unzip the .zip file you've downloaded.

Hot tip: If you're a Windows/Linux user

  1. Click into the unzipped folder
  2. Check whether there's a subfolder inside with the same name.
  3. Upload that subfolder in the next step!
  • Return to the Amazon S3 console with your bucket page open. Choose the Objects tab Objects.
  • Choose Upload.
  • Choose Add files.
  • Choose index.html.
  • Choose Add folder.
  • Choose the unzipped folder - NOT the zip file itself!
  • You might get a popup that tells you that all files in that folder will be uploaded ("Do you want to upload 44 files?"). Select Upload if you need to!
  • Choose Upload in your AWS console.
  • S3 will get to work right away!
  • While we wait for your files to upload...
  • Choose Close underneath the green Upload succeeded banner.
  • Woohoo! Great succcess.

Configure a static website on Amazon S3

S3 bucket? Created ✅

Website files? Uploaded ✅

Next up, let's make your website available on the internet by setting up static website hosting!

In this step, get ready to:

  • Configure your S3 bucket for static website hosting
  • Visit your public website link.

What does website hosting mean?

Website hosting is what makes your website public on the internet.

Even if you perfect an HTML file, no one else can see it when it's stored as a local file on your computer! Website hosting = storing your HTML file (and the other files for your website) on a web server, so it's accessible online.

By configuring your S3 bucket for hosting, we're telling this bucket: "please create a URL that will take anyone to a page that displays the HTML file I just uploaded."

  • Make sure you're back in your bucket's page. If you're not sure, choose General purpose bucckets on the left hand side navigation bar, and then choose the bucket you created for this project.
  • Choose the Properties tab.
  • Scroll allllllllll the way down to the Static website hosting panel.
  • Choose Edit.
  • Configure the following settings:
    • Static web hosting: Choose Enable.
    • Hosting type: Choose Host a static website.
    • Index document: Enter index.html
  • Choose Save changes.
  • In the Static website hosting panel, click on the URL under Bucket website endpoint.

What's a bucket website endpoint?

A bucket website endpoint is just like a regular website URL. It lets people visit your S3 bucket's files as a website.

  • An error! 👀

Why did I get this error?

Objects (in this case, the HTML and images files you uploaded) are private by default. This default setting helps keep your account's data secure.

The error message you're seeing is telling you that your static website is being hosted by S3, but the actual HTML/image files you've uploaded are still private. It's kind of like having a bucket on display, so everyone can see the bucket - but the contents are covered up, preventing anyone from seeing what's inside.

To solve this error, we need to set the permission of the objects to public - this is why we enabled ACLs in Task 1!

Make objects in your S3 bucket public

Ooof, we're sooo close to making your website available online.

The only missing ingredient is to make your website files publicly accessible, so everyone has permission to view your website.

In this step, get ready to:

  • Make your website files in S3 publicly accessible.
  • See your website live on the internet!
  • Keep the error message tab open and switch back to the Amazon S3 console tab.
  • Do you still remember how to view your S3 bucket's objects? Try finding your bucket's Objects page and making your objects public using ACLs.

.... feeling a little stuck?

I'll give it a go! 💪

  • Nice work! Challenging yourself like this is how real learning starts.

Maybe a little help...

  • No worries! If you're stuck, scroll all the way up to the top of the page.
  • Select the Objects tab.
  • Select the checkboxes next to your index.html file and the folder of website assets.
  • In the Actions dropdown, choose Make public using ACL ACL.
  • Choose Make public.
  • Once the green banner pops up, choose Close.
  • Return to the web browser tab that has the 403 Forbidden message.
  • Refresh the tab.

Seeing this page? Don't freak out!

This means there's been an error! And that's totally okay 😇

Some students see this page instead, which is also an error:

Solve your error here: NextWork community post: Troubleshooting index.html

  • You'll know it's working when you see an awesome website like the one below.

Fun fact

This website is one of the original NextWork designs from when we first launched! Can you spot the difference? New logo, new colours, new look... we've come so far. 🫶

Secret mission

Welcome to your 🤫 exclusive 🤫 secret mission!

Your mission, should you choose to accept it, is to use bucket policies to control access to index.html.

💎 In this secret mission, get ready to:

  • Set up a bucket policy that stops people from deleting your index.html file.
  • Test your policy.
  • Showcase your secret mission in your project documentation.

Bucket Policies

Delete your resources

Delete your resources

Make sure you delete all your resources to avoid getting charged. This is a super important task for every single project you set up.

We challenge you to try to give this a go yourself 💪

Do you think you can delete the resources you've created today?

  • S3 objects
  • S3 bucket

Yep, all done.

Fantastic! It's the home stretch!

I know, but also, I don't...

If you're feeling stuck (we've all been there!), here's a little guide:

  • To delete an S3 object, head back to your browser tab with the AWS Management Console.
  • Select the Objects tab.
  • Select the checkboxes next to the three objects in your bucket, and choose Delete.
  • Type delete to confirm.
  • Select Delete objects.

Did you run into an error with deleting index.html?

  • Head back to the Permissions tab and select Delete in the Bucket policy panel.
  • Delete index.html again!
  • Now, head back to the Buckets page (it's on the left-hand navigation panel).
  • Select your bucket, and choose Delete.
  • Type your bucket's name to confirm the deletion
nextwork-website-project-[[YOURNAME="enter your name"]]
  • Click Delete bucket.

WOAH! Did you just complete an AWS project?

WOAH! Did you just complete an AWS project?

Woohooooo!! You are an absolute legend and should be very proud of yourself. That was not easy work but you gave it a go, did your best, and absolutely crushed it.

Let's recap what you've achieved today:

In this lab, you created a personalised, publicly accessible static website. You...

  • Created an S3 bucket.
  • Uploaded HTML and image files to an S3 bucket.
  • Hosted a static website on an S3 bucket.
  • Turned on public access for your bucket's objects for the 🌏 whole world 🌏 to see your website.

High five! We'll see you in the next project. 🙌

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

  1. Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
  2. Search for the text Return to later.
  3. Jump straight to your incomplete tasks!
  4. 🙋‍♀️ Still stuck? Ask the community!