Deploying a Static Website on AWS
Published: 2022-07-10 12:56:53


Static websites have predetermined content and can be created without the use of programming languages. It is built with HTML, CSS, and JavaScript and is the simplest type of website to develop. It consists of a number of HTML files, each of which represents a certain internet page physically.

I've outlined below a step-by-step approach for deploying a static website using AWS, leveraging S3 Bucket and CloudFront.

## I'll be breaking this into six steps.

1. Creating the S3 bucket.
2. Uploading the files to the created S3 bucket.
3. Securing the bucket using IAM (Identity and Access Management).
4. Configuring the S3 bucket.
5. Distribute website using AWS CloudFront.
6. Accessing website in web browser.

## Creating the S3 Bucket

**Step 1:** In the "Find Services" box, enter "S3," click it, and then select "Create Bucket."


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmyxtluihgloc8rp3rh4.png)

**Step 2:** Your bucket name must be distinct for the name. It is suggested that you incorporate your 12-digit AWS account ID into the name of your bucket. Your bucket's name can be my-123456789012-bucket if your AWS account ID is 123456789012.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l77h1lm014zsjyyrqi4e.png)

**Step 3:** In the "Bucket options for Block Public Access section," uncheck "Block all public access." The public will be able to access the bucket objects by using the S3 object URL. Which, in my opinion, is the main goal of having a website hosted in the first place.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kolnhm6bdmogvsml9qwv.png)

**Step 4:** To create your S3 bucket, click "Next" and then "Create Bucket."

## Uploading the Files to the Newly Created S3 Bucket.

**Step 1:** Open the bucket and click on the 'Upload' button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjhk5fpj1vzflcrba4e6.png)

**Step 2:** To upload the files and folders of the website you wish to host from your local computer to the S3 bucket, click the "Add files" and "Add folder" buttons.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knw4vfirpk24izxts9c3.png)

**Step 3:** Click "Upload"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94ikjamwn7omw6r51yv2.png)

You should see this page after that.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5ak1s7vp9g9tc8oa2s5.png)

Then,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trlgevu74qg8nddy998r.png)

Lastly,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tb24x3fw7ekk5dc5bt5.png)

## Securing the bucket using IAM (Identity and Access Management).

**Step 1:** Open your S3 bucket and select the "Permissions" option.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kj8mk48211hq200p81td.png)

**Step 2:** Click "Edit" after scrolling down to "Bucket policy."

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqe5k00f1fe9p2ymgwk9.png)

**Step 3:** Enter the bucket policy listed below, which is written in the code block below. Keep in mind that you are substituting "my-123456789012-bucket" with the name of your bucket.
```
{
"Version":"2012-10-17",
"Statement":[
 {
   "Sid":"AddPerm",
   "Effect":"Allow",
   "Principal": "*",
   "Action":["s3:GetObject"],
   "Resource":["arn:aws:s3:::my-123456789012-bucket/*"]
 }
]
}
```
**Step 4:** Click "Save changes"

## Configuring the S3 Bucket.
**Step 1:** Scroll down to the "Static website hosting" section of the "Properties" tab to make changes. It was the last item on the list as of the time of this documentation. When you do, select "Edit."

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmnpr1i6e7afwdn6xmid.png)

**Step 2:** Enable hosting for static websites, then provide the name of your index and error document. Next, select "Save changes."
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqqqawypqzbg5glb5oki.png)

**Step 3:** For later usage, make a copy of the "Bucket website endpoint."

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25ntbmx5bv1zjfrep4fd.png)

## Using AWS CloudFront, Distribute Website.
**Step 1:** In the text field labelled "Search for service, features, blogs, docs, and more", type "CloudFront."

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oa1cmhxl7aletkj0kykr.png)

**Step 2:** Click "Create a CloudFront Distribution"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfcajz8lckf4b31oua9b.png)

**Step 3:** You now need to select the "Origin domain." NOTE: Don't make a selection from the drop-down menu. Instead, substitute the endpoint for hosting static websites in the format "[bucket-name].s3-website-region.amazonaws.com."

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdwqf9fur38fdrcsf6zp.png)

**Step 4:** Click "Create Distribution" after changing the "Viewer protocol policy" to "Redirect HTTP to HTTPS."

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlqvyrlje43zat2q6yp5.png)


## Accessing Website in Web Browser.

Your CloudFront domain name, S3 object URL, and bucket website-endpoint should all display the same index.html content as confirmation that you followed the correct procedure.

**1. CloudFront domain name**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvt7md8mmyjt5k42fidm.png)

**2. S3 object URL**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2cf3a3a5hix57zrucs3.png)

**3. Bucket website-endpoint**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dqzy7oa1rvncr235r5q.png)