Host a static website on AWS
Published: 2022-10-09 13:19:06

---
title: Host a static website on AWS
published: true
date: 2022-10-09 12:43:38 UTC
tags: 
canonical_url: https://palak-bhawsar.hashnode.dev/host-a-static-website-on-aws
---

> Hey there! I am Palak, a cloud and DevOps Enthusiast 👩💻I believe learning is super fun and a lot easier when it is shared with people around you. So here I am with some AWS & DevOps content that I'm learning.

**Amazon S3** stands for Simple Storage Service, an object storage service that offers scalability, data availability, security, and performance at a very low cost as compared to the on-premises data center. It can scale to an enormous size and can store objects up to 5GB each and provides 99.999999999% durability and 99.99% availability for objects over a given year. In S3 we store objects in containers called buckets.

The most common use case of Amazon S3 are :

- **Backup and storage**

- **Media hosting**

- **Software Delivery**

- **Data lakes**

- **Static websites and static content**

_Let's get started with hosting a static website on Amazon S3._

## **1. Create an AWS account and search for S3 in AWS Services**

Navigate to the Services in the AWS account and search for S3. For deeper understanding read about S3 and watch the video by AWS on how S3 works.

![tempsnip.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665242055685/sh5ReFtxM.png)

## **2. Create an S3 bucket**

Select **Create bucket** , the bucket name should be globally unique and bucket names must be between 3 to 63 characters long. Bucket names can consist only of lowercase letters, numbers, dots (.), and hyphens (-). Decides in which region you want your bucket to reside. **Select the region** from the dropdown.

![tempsnip.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665243989744/4I5g6XIMo.png)

In order to make your website available to the public, **Uncheck the box "Block all public access"**. Otherwise, your website will not be reachable to end users. After this, a section will appear to **acknowledge the S3 bucket** and its content is made public. Check the box to acknowledge it. Leave other settings default and click the **Create bucket** button at the bottom right corner. If the bucket name is not unique, you will get an error.

![tempsnip.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665244450386/bpBoXBGvq.png)

## **3. Upload your website content to the newly created bucket**

Click on your bucket name, click the **Upload** button and upload all your website contents (index.html, CSS, Images). If you have any folders then click **Add folder** otherwise **Add files**. After selecting all the files and folders from your local, click Upload at the bottom right corner.

This is how your bucket will look after uploading all the contents.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665245918436/Za-eVUgRs.png)

## **4. Enable Web Hosting in S3 bucket**

In order to allow Static Hosting, go to the **Properties** in your bucket menu.

![tempsnip.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665246299304/75fba6n3Z.png)

Scroll to the end and click **edit** and enable the **Static website hosting**

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665246754321/oMp8D-1Hs.png)

After enabling Static Website Hosting, enter the name of the index file of your project i.e. index.html in my project. Error document is an option to specify the error file name in case you have an error file. Scroll to the end and click **Save changes** at the bottom right corner.

![tempsnip.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665246983370/7duDYrxnV.png)

We have created the bucket, uploaded the content, enabled the Static Website Hosting, and made it publicly accessible. However, we are still missing something. In order to access the website, we need a URL that AWS itself provides. Go to the Static Website Hosting section and copy the URL and search in the browser.

![tempsnip.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665247508409/WD6SW7lXC.png)

**Oops, our website is still not accessible! What could be the possible reason?🤔🤔**

Think Think Think

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665247642869/K8fP2Bp8q.png)

Don't worry, I've figured it out! We have made our Bucket accessible to the public but objects inside the Bucket are not public yet, and for that, we need to create the bucket policies.

**Amazon S3 bucket policies** are defined in a JSON format which specifies what actions are allowed or denied on the bucket. Let's create a bucket policy for our bucket.

## **5. Create bucket policies**

Go to **Permissions** in your bucket menu. Click on edit under **Bucket Policy**

![tempsnip.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665248059323/I1sjolJ8p.png)

Copy and paste the following JSON in the editor to allow the public to read files from the bucket. Make sure to replace "your-bucket-name" with your S3 Bucket Name. You can find the Bucket ARN above the editor.

```
 {
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadObject",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":"your-bucket-name/*"
}]
}

```

Ensures not to remove **/\*** after the bucket name in JSON policy. It makes sure that all the objects in the bucket are selected to make it public. Lastly, click on the Save changes option at the end.

![tempsnip.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665248795396/u-5qOOREr.png)

## **6. Access your website through URL**

Tada!!! You have made it. Your website is ready to be accessed by anyone from anywhere.

Take the URL from Static Hosting Section and access your hosted website.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665249551269/nZu8CBRch.png)

> Thank you for reading my blog. I hope you find it useful. Let me know your feedback in the comment section below.