How to Create a static website using Amazon S3

​

Overview

​

Lab details

1. This lab provides a guide on how to use AWS S3 to host a static HTML website and make it accessible to the public.
2. Duration: 30 minutes
3. AWS Region: US East (N. Virginia) us-east-1

​

Introduction

​

What is a Static Website?

• These are the most basic types of websites and are the easiest to create.
• A static web page is a web page that is delivered to the user’s web browser exactly as stored.
• It holds fixed content, where each page is coded in HTML and displays the same information to every visitor.
• No web programming or database design is required when working with them.
• They are a safe bet when it comes to security, since we do not have any interaction with databases or plugins.
• They are reliable, i.e., if any attack happens on the server, a redirection to the nearest safest node happens.
• Static websites are very fast, because there is no true backend to fetch information from.
• Hosting the website is cheap due to the non-existence of any other components.
• Scaling of the website is easy, and can be done by just increasing the bandwidth.

​

Architecture diagram

​

Task details

1. Sign into the AWS Management Console.
2. Creating a S3 bucket
3. Enable Static Website hosting settings
4. Test the website
5. Test the website’s error page
6. Validation of the Lab

​

Launching the lab environment

1. To launch the lab environment, Click on the Launch lab button.
2. Please wait until the cloud environment is provisioned. It will take less than a minute to provision.
3. Once the Lab is started, you will be provided with IAM user name, Password, Access Key, and Secret Access Key.

​

Files you need

• Download Zip

​

Lab guide

​

Lab steps

​

Task 1: Sign in to AWS Management Console

1. Click on the Open console button, and you will get redirected to AWS Console in a new browser tab.
2. On the AWS sign-in page,
   • Leave the Account ID as default. Never edit/remove the 12-digit Account ID present in the AWS Console. otherwise, you cannot proceed with the lab.
   • Now copy your User Name and Password in the Lab Console to the IAM Username and Password in AWS Console and click on the Sign in button.
3. Once Signed In to the AWS Management Console, Make the default AWS Region as US East (N. Virginia) us-east-1.

​

Task 2: Creating a S3 Bucket

1. Navigate to S3 by clicking on the Services menu at the top, then click on S3 in the Storage section.
2. In the S3 dashboard, click on the Create Bucket button.
3. In the General Configuration,

• Select Bucket Type : General purpose
• Bucket name: Enter whizlabs1230
  • Note: S3 bucket name is globally unique, choose a name that is available.

4. AWS Region: Select US East (N. Virginia) us-east-1
5. Object ownership: Select ACLs disabled (recommended) option
6. In the option of Block Public Access settings for this bucket, Uncheck the option of Block all public access.
   • Check the I acknowledge that the current settings might result in this bucket and the objects within becoming public checkbox.

7. Keep everything default and click on Create Bucket button.

Kindly ignore the permission error if it appears during the process.

​

Task 3: Enable Static Website Hosting settings

1. To proceed, go to the S3 bucket name that you created and click on it. After that, navigate to the Properties tab which can be found at the top of the screen.
2. Scroll down to the Static website hosting section and click on Edit button.
3. In the Static website hosting dialog box

• Static website hosting: Select Enable
• Hosting type: Choose Host a static website
• Index document: Type index.html
• Error document: Type error.html
• Click on Save Changes.

4. Go to the Properties tab of your S3 bucket, and find the Static website hosting section. Copy the Endpoint provided in this section to your clipboard and save it for future reference.
5. The next step is to download the zip file by clicking on the link, extract it, and upload two files named index.html and error.html to the S3 bucket you created earlier.

6. To configure your S3 bucket, access the Permissions tab and make the necessary configurations.

• In the Permissions tab, Click on the Edit button beside the Bucket Policy.

• You will be able to see a Blank policy editor.
• Before creating the policy, you will need to copy the ARN (Amazon Resource Name) of your bucket.
• Copy the ARN of your bucket to the clipboard. It is displayed at the top of the policy editor. it will look like ARN:“arn:aws:s3:::your-bucket-name”.
• In the policy below, Update the bucket ARN on the Resource key value and paste the below policy code in the editor.

"Id": "Policy1",
"Version": "2012-10-17",
"Statement": [
 {
"Sid": "Stmt1",
"Action": [
"s3:GetObject"
 ],
"Effect": "Allow",
"Resource": "replace-this-string-with-your-bucket-arn/*",
"Principal": "*"
 }
 ]
}

• Click on Save changes button.

​

Task 4: Test the website

1. Now copy the static website URL (that we saved earlier) and run it in your browser. You will be able to see the index.html file’s text. A sample screenshot is attached below:

​

Task 5: Test the website’s error page

1. Copy the static website URL (which we saved earlier) , but this time, add some random characters to the end of the url to break it. When satisfied, hit [Enter]. You will be redirected to the error.html page automatically.

​

Task 6: Validation of the Lab

1. Once the lab steps are completed, please click on the Check my work button on the left side panel.
2. This will validate the resources in the AWS account and shows you whether you have completed this lab successfully or not.
3. Sample output :

​

Completion and conclusion

1. You have successfully created and launched an Amazon S3 bucket.
2. You have successfully configured the bucket to host a static website.
3. You have tested your static website to make sure it works correctly.
4. You have successfully tested the error page to make sure it works correctly.
5. You have successfully validated the lab.

​

End lab

1. Sign out of AWS Account.
2. You have successfully completed the lab.
3. Once you completed the steps, click on End lab in the IP Lab Portal and wait till the process gets completed.

​

What gets checked

• Create an AWS S3 Bucket with Policy — Check whether S3 bucket is created and bucket policy added or not
• Enable S3 Static Website Hosting — Check whether S3 Static website hosting is enabled or not