Creating Amazon S3 Static Websites

Hands-On Lab

 

Photo of Christophe Limpalair

Christophe Limpalair

VP of Growth in Marketing

Length

00:30:00

Difficulty

Beginner

You can host a static website on Amazon S3. On a static website, individual web pages include static content and they might also contain client-side scripts. By contrast, a dynamic website relies on server-side processing, including server-side scripts such as PHP, JSP, or ASP.NET. Amazon S3 does not support server-side scripting. This activity covers the process of using S3 to host a static website. We will start by creating a few sample files to serve as our example site.

What are Hands-On Labs?

Hands-On Labs are scenario-based learning environments where learners can practice without consequences. Don't compromise a system or waste money on expensive downloads. Practice real-world skills without the real-world risk, no assembly required.

Introduction

This lab covers the process of using S3 to host a static website. We will start by creating a few sample files to serve as our example site.

Create sample files

Begin by creating three sample files that we will soon upload to an S3 bucket:

index.html:

Welcome! This is my sample home page. 

page.html:

This is a standard page example.

error.html:

Error!

Preparing the bucket

Navigate to the S3 Management Console and create a bucket that hosts our files. After creating it, upload the three sample files you created.

Create a bucket

First, create the bucket.

  • Click the Create Bucket button.
  • Name the bucket appropriately. Bucket names are required to be unique across all of AWS. The name you choose here will end up as part of the URL that lets us access the website. If you plan on using a custom domain name, your bucket name needs to match (e.g. example.com). For this lab, just choose any unique name, such as my-static-website-12345.
  • Use the Create button at the bottom left to finish creating the bucket.

Upload the sample files

Next, upload the sample files you created earlier.

  • Click the name of the bucket to navigate inside of it.
  • Use the Upload and Add Files buttons to select your files.
  • Click the Next button and expand Manage public permissions. Grant everyone Read permissions for Objects.
  • Navigate through the rest of the steps and upload the files.

Configure the static website

We will now enable and configure the feature to use an S3 bucket as a static website.

  • Navigate to the Properties tab for the current bucket.
  • Click the the Static Website Hosting section and select the Use this bucket to host a website option.
  • Set the Index document to index.html.
  • Set the Error document to error.html.
  • Use the Save button to apply the settings.

View the website

Click to expand the Static website hosting section again and you will see the Endpoint up top. This is the URL that we can use to access the website. Click on it to open it up. You will be presented with the contents of the index document (which we set to the index.html file).

If you add /page.html to the end of the URL, you will see the contents of the respective file. This same behavior applies to any other object in the bucket. If you try to access a file that does not exist, you will be presented with the error document (which we set to error.html). Try it out by attempting to access a file that doesn't exist (e.g. /nothing.txt).