Build a Static Website with Simple Storage Service (S3)

VIRTUAL
PRIVATE
NETWOR
K

README

BEFORE GETTING
STARTED
Here's some important
information to know before
starting this hands-on
activity.
Requirements: You must
have an AWS Educate
account.

Your company, BitBeat, is ready to share information with Activity Time: 60 minutes
prospective customers. They will be launching their product,
BitBanger, in a few months. Right now, they want to setup a static
Getting Help: If you
experience any issues as you
website where customers can learn about their product.
complete this activity, please
ask your instructor for
Amazon Simple Storage Service (Amazon S3) can host static
assistance.
websites without a need for a web server. The website is highly
performant and scalable at a fraction of the cost of a traditional web
server.

To host a static website, you configure an Amazon S3 bucket for

website hosting and then upload your website content to the bucket.
Amazon S3 is storage provides you with secure, durable, highly
scalable object storage. A simple web services interface allows you to store and retrieve any amount
of data from anywhere on the web.

Academic Gateway to the Hearts and Minds of the Next Generation of IT Professionals
© Amazon Web Services 2019
1
Build a Static Website with Simple Storage Service (S3)
VIRTUAL
PRIVATE
NETWOR
K

Task Overview
In this hands-on activity, you are going to configure an S3 bucket to host
a static website for BitBeat. You will need to enable the S3 bucket for
website hosting, and you will need to set permissions to allow the general
public to view the website.

Here is a list of tasks you will complete:

1. Create an S3 bucket
2. Enable S3 bucket static web hosting
3. Upload website files to the S3 bucket
4. Set public access permissions
5. Add a bucket policy
6. Test and troubleshoot public access to the S3 bucket

Learning Outcomes
After completing this activity, you should be able host a static website for an organization using S3
by:
1. Creating an S3 bucket with most restrictive permissions
2. Enabling static website hosting for an S3 bucket
3. Defining the index document for the static website
4. Set permissions require public permissions for website access
5. Uploading object for a static website to S3
6. Add a bucket policy to make objects in the S3 bucket readable

Let’s Get Started!

Academic Gateway to the Hearts and Minds of the Next Generation of IT Professionals
© Amazon Web Services 2019
2
Build a Static Website with Simple Storage Service (S3)
VIRTUAL
PRIVATE
NETWOR
K

DID YOU KNOW?

A bucket is owned by the AWS account that created it. By default, you can
create up to 100 buckets in each of your AWS accounts. After you create a
bucket, you can't change its Region. Buckets are not transferable.

Before you can upload data to Amazon S3, you must create a bucket in one of the AWS Regions to
store your data in. After you create a bucket, you can upload an unlimited number of data objects to the
bucket.

Create S3 Bucket
1. In the AWS Management Console Find and select S3
2. In the S3 console, click .
3. Enter a name for your bucket.
Note: Your bucket name must be unique across all existing bucket
names in Amazon S3. You cannot change a buckets name after the
buckets has been created. (read more Bucket Restrictions and
Limitations:

https://docs.aws.amazon.com/AmazonS3/latest/dev/BucketRestrictions.html)
4. Review default General Configuration and Advanced settings. Click the external link icon

to access and read AWS documentation. Then, scroll down the page and click

Your new bucket will appear in your S3 dashboard.

Will someone be able to access your bucket from the internet? Why or why not?

________________________________________________________________________

Academic Gateway to the Hearts and Minds of the Next Generation of IT Professionals
© Amazon Web Services 2019
3
Build a Static Website with Simple Storage Service (S3)
VIRTUAL
PRIVATE
NETWOR
K

Enable S3 bucket website hosting

Now that you have created an S3 buckets, you need to configure the
DID
bucket to host a static website.
YOU
Enable website hosting KNOW?
1. Ensure you have your bucket selected, then select the On a static website,
Properties tab. individual webpages are
2. Select Static Website Hosting. fixed and do not change.
Note: the endpoint URL for your bucket is displayed on It may also have client-
side scripts are used for
the card. You will use this endpoint to access your
page navigation, data
website, so be sure to copy and paste the URL to a text validation, and
file or Word document for later use. formatting. By contrast, a
3. On the Static Website Hosting card, select Use this bucket to dynamic website relies
host a website on server-side
4. Enter the name of the Index document and then click Save. processing, including
For this exercise the index document name is index.html. server-side scripts such
as PHP, JSP, or
You will not create a custom error document for this
ASP.NET. Amazon S3
activity or add any redirection rules, however, this is an does not support server-
option when creating a static website. side scripting.
Upload website files to the S3 bucket

Now that you have create the S3 bucket and configured it for website
hosting, you are ready to upload the BitBeat website files to the bucket. For this task you need to
download the static website files we have created for you. Go to http://tinyurl.com/s3static and
download and save these two files to your desktop: index.html and bitbangers.png.

Upload Objects
1. After you download the website files to your desktop go to the S3
dashboard, click on the bucket name to open the bucket management
page.
2. Click the Upload button at the top of the screen.
3. Drag and drop the website file you previously downloaded to your
desktop to the bucket upload screen and then click Next
4. Accept the defaults on the Manage User page and click Next
5. Select the Standard storage class and click Next
6. Review the upload data and then click Upload

Your uploaded file appears as an object on the S3 bucket Overview tab.

Academic Gateway to the Hearts and Minds of the Next Generation of IT Professionals
© Amazon Web Services 2019
4
Build a Static Website with Simple Storage Service (S3)
VIRTUAL
PRIVATE
NETWOR
K

DID YOU KNOW?

Amazon S3 applies the most restrictive combination of the bucket-level and

account-level block public access settings. For example, if you allow public
access for a bucket but block all public access at the account level, Amazon
S3 will continue to block public access to the bucket. In this scenario, you
would have to edit your bucket-level and account-level block public access
settings.

Set public access permissions

It’s time to make your bucket accessible to anyone who wants to view your static website. When you
configure a bucket as a website, you must grant public read access to the bucket so that people can
access the website. To make your bucket publicly readable, you must disable block public access
settings for the bucket and write a bucket policy.

Let’s begin by disabling the block public access settings

1. Select Bucket you just configured to host a static website
2. Select the Permissions tab and select Block public access
3. Select Edit in the bucket settings, uncheck the box next to Block all public access,
and then click Save
4. In the Edit block permission access window, type confirm in the text field and the
click confirm.

Add a bucket policy

Now that you’ve opened the S3 buck up to be readable by the public. To make the objects in your
bucket publicly readable, you must write a bucket policy that grants everyone s3:GetObject permission.

1. Choose the bucket that you have configured as a static website

2. Choose Permissions
3. Choose Bucket Policy
4. In the Bucket policy editor, add a bucket policy (use policy provided below)
Sample bucket policy
Copy and paste the bucket policy below. This sample bucket policy grants everyone access
to the objects in the specified folder. You will need to change the Resource to match your
bucket, this means that you need to copy your bucket ARN (Amazon Resource Name)
found on the Bucket policy editor (i.e. arn:aws:s3:::example-bucket/)

{
"Version":"2012-10-17",

Academic Gateway to the Hearts and Minds of the Next Generation of IT Professionals
© Amazon Web Services 2019
5
Build a Static Website with Simple Storage Service (S3)
VIRTUAL
PRIVATE
NETWOR
K

"Statement":[{
"Sid":"PublicReadGetObject",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::example-bucket/*"
]
}
]
}

5. And click Save

Test and troubleshoot public access to the S3 bucket

Now it’s time to test the BitBeat website to ensure it accessible.

Enter the following URL in the browser, replacing example-bucket with the name of your bucket

and website-region with the name of the AWS Region where you deployed your bucket:

http://example-bucket.s3-website-region.amazonaws.com

Does your index.html page display in the web browser?

____________________________________________________________________

Academic Gateway to the Hearts and Minds of the Next Generation of IT Professionals
© Amazon Web Services 2019
6
Build a Static Website with Simple Storage Service (S3)
VIRTUAL
PRIVATE
NETWOR
K

GREAT JOB!

You have successfully hosted BitBeat’s static website

Let’s Review
You were able to setup a static website hosted on Amazon S3. This website is available at the Amazon
S3 website endpoint. Here are the tasks you successfully completed:

1. Create an S3 bucket
2. Enable S3 bucket static web hosting
3. Upload website files to the S3 bucket
4. Set public access permissions
5. Add a bucket policy
6. Test and troubleshoot public access to the S3 bucket

Test Your Knowledge

c What is your S3 bucket URL? __________________________________________________

c What is your S3 bucket ARN?___________________________________________________

c What is the default permission of an S3 bucket?__________________________________

Resources
1. How to create an S3 bucket - https://docs.aws.amazon.com/AmazonS3/latest/user-
guide/create-bucket.html
2. Permissions required for website access -
https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html
3. Working with an S3 bucket -
https://docs.aws.amazon.com/AmazonS3/latest/dev/UsingBucket.html#bucket-config-options-
intro
4. Bucket Restrictions and Limitations -
https://docs.aws.amazon.com/AmazonS3/latest/dev/BucketRestrictions.html

Academic Gateway to the Hearts and Minds of the Next Generation of IT Professionals
© Amazon Web Services 2019
7