Host a Static Website Using Amazon S3

In this article, you will learn how to host a Static Website using Amazon S3 bucket in detailed.

Objectives

  1. ►Create an S3 Bucket
  2. ►Register Custom Domain
  3. ►Configure Custom Domain using Route 53
  4. ►Request an SSL Certificate
  5. ►Create CloudFront Distribution with SSL certificate
  6. ►Connect the CloudFront Distribution to Route 53

Create an S3 Bucket

►Login to your AWS Management Console and navigate to Amazon S3 and click on create bucket.

Create S3 Bucket
Create S3 Bucket

►Enter the details of the bucket.

Allow Public Access
Allow Public Access

►Allow Public Access for the bucket.

S3 Bucket
S3 Bucket

►Go to Permissions and edit the Access Control List (ACL) to make the bucket public.

Edit Access Control List
Edit Access Control List

►And also, add the Bucket policy.

  • {
  •     “Version”: “2012-10-17”,
  •     “Statement”: [
  •         {
  •             “Sid”: “AddPerm”,
  •             “Effect”: “Allow”,
  •             “Principal”: “*”,
  •             “Action”: “s3:GetObject”,
  •             “Resource”: “arn:aws:s3:::hardrockcafe.tk/*”
  •         }
  •     ]
  • }
Edit Bucket Policy
Edit Bucket Policy

►Go to Properties and enable Static Website Hosting. Enter the homepage of the website in Index document and save the changes.

Enable Static Website Hosting
Enable Static Website Hosting

►Once it gets enabled, copy the bucket website endpoint.

►Go to Objects and Click on Upload. Upload all the files of the website.

Upload Objects
Upload Objects

►Grant Public access to the Objects and click on upload.

Edit Object Permissions
Edit Object Permissions

► The Objects got uploaded successfully.

S3 Objects
S3 Objects

►Open the Browser and paste the bucket website endpoint. The website will be displayed.

Static Website
Static Website

Register Custom Domain

► Go to www.freenom.com [Domain registrar] and register for an account.

►Please enter a domain you want but remember to use the TLD such as .tk .ml as they are free of cost.

Select Domain name
Select Domain name

►Select the domain and click on Checkout. Finally, click on complete order.

►Now go to https://my.freenom.com/clientarea.php?action=domains to see the domain you have just bought for free.

Configure Custom Domain using Route 53

Navigate to Route 53 and click on Create Hosted zone.

Route 53 Dashboard
Route 53 Dashboard

►Enter the domain name and select the public-hosted zone. Click on create.

Create Hosted Zone
Create Hosted Zone

►Two records get created in the hosted zone. Click on the one with four nameservers and copy all four of them.

Route 53 Records
Route 53 Records

►Go back to Freenom and under the domain, click on Nameservers and paste the nameservers from the record here.

Change the Nameservers
Change the Nameservers

►We now need an SSL Certificate as a part of enabling HTTPS for our website.

Request an SSL Certificate

Navigate to AWS Certificate Manager and Click on Request a certificate.

►Add the domain name and click on Next.

Request SSL Certificate
Request SSL Certificate

►Select the DNS validation method.

Select Validation method
Select Validation method

►Review and click on Confirm and Request.

Review the Request
Review the Request

►While the Request is in Progress, Click on Create record in Route 53.

Create record for the Certificate
Create record for the Certificate

►Click on Create.

Create Record
Create Record

►Now, click on continue.

Record got created
Record got created

►The SSL certificate gets issued. To make it in use, we need to connect it to CloudFront Distribution.

SSL Certificate issued
SSL Certificate issued

Create CloudFront Distribution with SSL certificate

 Navigate to the CloudFront dashboard and click on Create Distribution.

Amazon CloudFront
Amazon CloudFront

► Click on Get Started.

Select Delivery method
Select Delivery method

►Enter the origin domain as the name in the Static Website Hosting and change the Viewer Protocol Policy to Redirect HTTP to HTTPS.

Create Distribution
Create Distribution

►Give the domain name in the Alternate Domain name. Choose the Custom SSL Certificate and select the SSL Certificate issued before and click on Create.

Create Distribution
Create Distribution

►The CloudFront Distribution got created successfully. Copy the Domain name.

CloudFront Distributions
CloudFront Distributions

►Paste the Domain name in the Browser. The website will be displayed.

Static Website
Static Website

Connect the CloudFront Distribution to Route 53

►Go to Route 53 dashboard and click on Create record.

►Select the record type as A. Choose Alias, route the traffic to CloudFront Distribution, and select the domain name. Finally, click on Create records.

Create Record
Create Record

►Now, enter the domain name which was bought before for the website.

►The website will be displayed with a secure connection.

Secured Static Website
Secured Static Website

I also run a small youtube channel on some exciting topics, do look into it. 🙂 

https://www.youtube.com/channel/UCBO2LHhj4-SYejcaE3YfuNg

Leave a Reply

%d bloggers like this: