Hosting a Static Website using AWS

Services used –

Amazon S3
AWS Cloud Front
Route 53

Creating the bucket –

Login to AWS account in the AWS Management console – https://aws.amazon.com/console/
Sign in using the valid credentials if you already have an account, else you can create a free tier account by signing up.
Once logged in to the account, you can locate Amazon S3 in the services listed out, Or you can search Amazon S3 using the Search option in the left top corner of the AWS Management console.

Once the Amazon S3 opens, click “Create Bucket” on the top right side of the page.
Enter the “Bucket Name”, Bucket name should be globally unique. I have given the name as “cloudopsbootcamp”
Select the closest AWS region in the “AWS Region”, I have selected “Asia Pacific (Mumbai) ap-south-1, which is the closest region to me since I am trying to host the website from India.
Keeping the default settings and create the bucket by clicking “create bucket”.

Enabling the Static Website Hosting –

After creating the bucket, select the bucket name which was created and open it.
Select “Properties” tab.
Scroll down to the bottom of the page, and select “Static Website Hosting”, and click “edit”.
“Enable” the “static website hosting”.
In the Index document – select the name of the html file where the default page or home page of the website.
Scroll down and click “Save changes”.

After the changes are saved, at the bottom of the page we can find the “Bucket website endpoint”, the endpoint of our bucket website is – http://cloudopsbootcamp.s3-website.ap-south-1.amazonaws.com

Remove the block public access setting –

Select the bucket, and click “Permissions” tab.
Under “Block Public Access” setting, click edit.
Uncheck the “Block all public access” and “save changes”.

Adding the bucket policy which makes our bucket content publicly available –

Choose the bucket already created,
Select permissions, under permissions, select the “Bucket Policy”, choose edit.
To grant the public read access to our website, copy and paste the below bucket policy and paste it in the “Bucket Policy Editor”.

{

“Version”: “2012-10-17”,

“Statement”: [

{

“Sid”: “PublicReadGetObject”,

“Effect”: “Allow”,

“Principal”: “*”,

“Action”: [

“s3:GetObject”

“Resource”: [

“arn:aws:s3:::cloudopsbootcamp /*”

]

}

]

}

“cloudopsbootcamp” is the bucket name added in the above code.
Click “Save Changes”.

Configure the Index Document –

Creating the index file.

Open a notepad and create a .html file. I have used the below script.

<head>

<title>My Website Home Page</title>

</head>

<body>

<h1>Welcome to my website</h1>

<p>Hi, this is Vishak M U Srivatsa creating the page for Boot Camp</p>

<p>Now hosted on Amazon S3!</p>

</body>

</html>

Once the html file is created, save the file locally and upload it to the S3 bucket.
Click, “Upload”, select the file.
Once the file is added, scroll down and click “Upload” again so that file gets uploaded to the bucket.

After uploading the .html document, open the bucket, go to “Permissions”, scroll down the page, and in the “Static website hosting”, copy the link from “Bucket website endpoint”.

And paste it in the address bar of a browser to check if the website works. You should get the desired result.

Speeding up the website with Amazon CloudFront

Creating the CloudFront Distribution –

Type “CloudFront” in the AWS Web Console, open the CloudFront service.
Click on the “Create a CloudFront distribution”.
Copy the Website Endpoint to “Origin Domain”.
Origin ID (name) is auto filled.
For the “default cache behavior” settings, keep the default settings.
For the distribution settings, select “Use all edge locations”.
For the Alternate domain name use the website name, www.cloudopsbootcamp.com.
Set the “Standard Logging” on.
For S3 bucket – Choose the bucket which has been created.
Click on the “Create Distribution” to create the distribution.
Record the value of Distribution Domain Name shown in the CloudFront console, for example, http://d22220ccjzmz5.cloudfront.net/.

And paste it in the address bar of a browser to check if the website works. You should get the desired result.

Update the record sets for the domain and subdomain

Open the Route 53 from the search option in AWS Management Console.
In the left navigation window, select “Hosted Zones”
In the left navigation, choose Hosted zones.
On the “Hosted Zones” page, choose the hosted zone that you created for your subdomain, for example, www.cloudopsbootcamp.com
Under “Records”, select the A record that you created for your subdomain.
Under “Record details”, choose Edit record.
Under “Route traffic to”, choose Alias to CloudFront distribution.
Under “Choose distribution”, choose the CloudFront distribution.
Choose Save.

Note – To add the DNS records and to create domains, sub domains, we need to purchase the domain.

Once the task is completed, make sure to disable and delete all the resources.

Hosting a Static Website using AWS