Deploying a Static Website on AWS

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.

Creating the S3 bucket.
Uploading the files to the created S3 bucket.
Securing the bucket using IAM (Identity and Access Management).
Configuring the S3 bucket.
Distribute website using AWS CloudFront.
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."

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.

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.

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

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.

Step 3: Click "Upload"

You should see this page after that.

Then,

Lastly,

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

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

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

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

Step 2: Enable hosting for static websites, then provide the name of your index and error document. Next, select "Save changes."

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

Using AWS CloudFront, Distribute Website.

Step 1: In the text field labelled "Search for service, features, blogs, docs, and more", type "CloudFront."

Step 2: Click "Create a CloudFront Distribution"

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

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

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