> ## Documentation Index
> Fetch the complete documentation index at: https://cloud-architect.ipoint-labs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Create a static website using Amazon S3

> Hands-on lab · 30m

Launch this lab in the IP Lab Portal, then follow the steps below in the AWS console.

<a className="ip-lab-portal-btn" href="https://labs.intellectualpoint.com/labs/how-to-create-a-static-website-using-amazon-s3" target="_blank" rel="noreferrer">
  Open IP Lab Portal
</a>

## 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

<img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/001.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=834ad1111879249ac05a72d3b151fcb8" alt="" width="1000" height="528" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/001.png" />

### 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**.

<Note>
  You can only start one lab at any given time
</Note>

## Files you need

Download these before you start — the lab cannot be completed without them.

* [Download Zip](/images/labs/downloads/how-to-create-a-static-website-using-amazon-s3/download-zip.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

In this task, we are going to create a new S3 bucket in the US East (N. Virginia) region with a unique name disabling ACLs, and allowing public access for hosting the static website.

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**

   <img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/002.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=f29a57d4619773e8a2c8ec61d1ec99bb" alt="" width="2074" height="1094" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/002.png" />
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.

<img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/003.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=5f90765b5d6e2ce98331780b014398df" alt="" width="2968" height="1038" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/003.png" />

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

<img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/004.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=cc527c1eb8702e92e6a831007e7ea818" alt="" width="1014" height="253" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/004.png" />

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

<img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/005.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=ea8b2f34c6ac061e9dab75ee0db76511" alt="" width="2978" height="1158" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/005.png" />

#### Task 3: Enable Static Website Hosting settings

In this task, we will enable static website hosting for our S3 bucket, configure it to use index.html and error.html, copy the provided endpoint, upload two files, and configure the bucket policy by copying its ARN and pasting the provided policy code.

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.

   <img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/006.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=6c549b0a291aecbb512b512f6ec2cbf7" alt="" width="1403" height="182" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/006.png" />
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**.

  <img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/007.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=dfe5bb7cdd37356a8fcc5ed1226182bc" alt="" width="1000" height="730" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/007.png" />

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](/images/labs/downloads/how-to-create-a-static-website-using-amazon-s3/download-zip.zip), extract it, and upload two files named **index.html** and **error.html** to the S3 bucket you created earlier.

<img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/008.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=92956f909993f278a3a886dbc5d317dd" alt="" width="691" height="233" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/008.png" />

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**.

<img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/009.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=88f5844212b8107503b39cd2ff5ffe21" alt="" width="1401" height="331" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/009.png" />

* 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.

\{

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

<img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/010.gif?s=7795cc985832f6700994bf579e6fc3da" alt="" width="971" height="746" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/010.gif" />

* 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:

<img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/011.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=32d1f1c04bfa9a77f6a27dfab98883d2" alt="" width="1212" height="300" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/011.png" />

#### 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.

<img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/012.png?fit=max&auto=format&n=O4tXcjEIp2L-crIL&q=85&s=f69d40a3005cf0ce5ab3bbe341184d41" alt="" width="1251" height="295" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/012.png" />

<Tip>
  **Do you know?**

  Amazon S3 provides 11 nines of durability, which means that the probability of losing a file is 0.0000000001%. The maximum size of a single file that can be uploaded to Amazon S3 is 5 terabytes (TB).
</Tip>

#### 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 :

<img src="https://mintcdn.com/ip-cloud-architect-pathway/O4tXcjEIp2L-crIL/images/labs/how-to-create-a-static-website-using-amazon-s3/013.gif?s=81063aedd7c9287c9b93a02dc900da07" alt="" width="1000" height="468" data-path="images/labs/how-to-create-a-static-website-using-amazon-s3/013.gif" />

### 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

When you press **Check my work**, the platform verifies each of these:

* **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
