# Mastering Static Website Hosting and Management with Amazon S3

### What is a Static Website

A static website is a site that delivers pages using a set number of pre-built files crafted from HTML, CSS, and JavaScript. A static website lacks backend server-side processing and a database. Any 'dynamic' functionality linked with the static site is carried out on the client side.

### Navigating the Build

1. Deploy Your S3 Bucket
    
2. Enable Static Website on Your Bucket
    
3. Allow Public Access
    
4. Apply the Bucket Policy
    
5. Set Up Your Index File
    
6. Set Up Your Error File
    
7. Testing
    
8. Clean Up
    

### Deploy S3 bucket

Connect to the Amazon S3 Console and navigate to the *Create bucket* and click it.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705761335750/de23b998-5bc9-4943-b373-ef67860a5116.png align="center")

\-> Select your region  
\-> Enter your bucket name  
\-> Scroll down to the end of the page  
\-> Click *Create bucket* button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705761721374/5c93021a-b217-483a-85d8-961933c3aa20.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705762121991/7515eac7-f712-401b-8877-4dab8007875a.png align="center")

### Enable Static Website on Your Bucket

\-> Click on your bucket  
\-> Select the properties tab  
\-> Scroll down the end of the properties tab page

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705763571454/15caaea7-a5b9-4fe5-9d0f-d82587665197.png align="center")

\-> Select *Edit* button on the **Static website hosting** form.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705763824292/b35fdf17-4347-4079-9164-5cce02d86987.png align="center")

In the Static website hosting settings page:  
\-> **Enable** the static web hosting  
\-> Select the radio button for "*Use the bucket endpoint as the web address*".  
\-> In Index document text box enter the file name of the index document. eg: index.html  
\-> In error document text box, enter the file name of the error document. eg: error.html  
\-> Scroll down and click on **save changes**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705765468690/e0b014f8-d4d2-4780-966b-08b956e929a1.png align="center")

### Allow Public Access

By default, Amazon blocks all public access to S3 buckets. To host the static website on an S3 bucket, we need to edit the block public access settings and allow it.  
\-> Select and click on the bucket name  
\-> Select the permission tab  
\-> Click **Edit**, under **Block public access (bucket settings)**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705766869548/1e9ace3d-cd89-4012-a85a-0051e166a614.png align="center")

\-> Clear **Block *all* public access**  
\-> Select **Save changes**  
**\->** Type "confirm" in the pop up screen and select "confirm"

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705766992872/324f702a-8a8b-4a0c-8283-fb6bd12d9e97.png align="center")

### Apply the Bucket Policy

Due to the enabled public access, it is necessary to secure our bucket with a bucket policy. The policy will grant only public read access to our bucket, allowing anyone on the internet to access it.

\-> Select the bucket and choose the permission tab  
\-> Select **Edit** under **Bucket Policy**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705768665263/25ef4f14-0202-46a0-9d71-341b631b6342.png align="center")

\-> Add the required policy in policy editor  
\-> Make confirm the ARN of the bucket.  
\-> Scroll down and select **Save Changes**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705769012620/97d0635e-cfd1-43d6-88b3-a430d4ba2524.png align="center")

### Set Up Your Index File

Now the time to upload your index file to the S3 bucket. File name should be the exact name that you provider earlier in the index document file name section.  
\-> Select your bucket  
\-> Select Object tab  
\-> Upload the file by clicking the upload button or drag and drop the file to console

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705771628447/a6f08849-e7e1-4d4c-9514-d00772b8a1be.png align="center")

\-> Verify your file  
\-> Select upload button in down of the page

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705771838838/59cfac1f-b896-4cfe-93da-6f7a2098659a.png align="center")

\-> Select he **close** button on the upload status page

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705771987119/cc9a720b-8061-43f7-8efd-a467fecdfebc.png align="center")

### Set Up Your Error File

Upload your error document to the bucket the same way you uploaded the index document.  
\-> Now you can see both the index and error document in the bucket

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705772406433/6b3413ad-9721-4a07-8bc0-75eb6befc058.png align="center")

### Testing

\-> Select your bucket properites  
\-> Scroll down and slect your **Bucket website endpoint** under **Static website hosting** section

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705772937558/58c1b138-0304-4d62-8218-aa1f7d680dc1.png align="center")

\-> Use a new browser window and open the endpoint website  
\-> It will open your index document

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705773144628/a76258d1-1635-4893-a402-6a19245e6940.png align="center")

### Clean up

As this is a testing environment, you may not need to retain the AWS resources used for creating this static website. Therefore, delete the AWS resources you allocated to avoid incurring further charges.  
**Note:** After deleting these resources, your website will no longer be available.