Create S3 Static Website using Custom Domain [Step-by-Step]

Hello learners, today we will be learning how we can easily create a free S3 Static website with AWS and redirect it to our own custom domain. Websites being the prime source of information is the most important element of the Internet in the times we are living now and having a free website of our own is always a perk.

Here are the brief steps we will follow to create S3 static website using Custom Domain

1. Purchase a domain
2. Create S3 Bucket to host our files
3. Configure custom domain using Route53
4. Request SSL Certificate for the custom domain
5. Create Cloudfront distribution
6. Connect Clodfront distribution to Route53
7. Access your S3 static  website using custom doamin

Overview on S3 Bucket

Amazon S3 Bucket is a publicly available cloud storage service which enables users to store any amount of data at any time or place giving developers high scalability, reliability and inexpensive data storage. S3 also provides very easy management features to organise data for websites , mobile apps , backups etc.. There are various storage classes of S3 designed for various purposes , so the users can select any storage class they need and pay the cost according to the respective class.

Overview on ACM

AWS Certificate Manager is a service that lets you easily provision, manage, and deploy public and private Secure Sockets Layer/Transport Layer Security (SSL/TLS) certificates for use with AWS services and your internal connected resources. SSL certificates are used to secure network communications and establish the identity of websites over the Internet as well as resources on private networks. AWS Certificate Manager removes the time-consuming manual process of purchasing, uploading, and renewing SSL/TLS certificates.

AWS Certificate Manager can quickly request a certificate, deploy it on any ACM-integrated AWS resources, such as Elastic Load Balancers, Amazon CloudFront distributions, and APIs on API Gateway, and let AWS Certificate Manager handle certificate renewals.

Overview on Route53

Amazon Route 53 is basically a highly available DNS Service that deals with resolving domain names and subdomains to Numeric IP addresses. Custom domains can be easily configured to Route53 and the users can also buy the domains directly from Route53 for their own use.The Price is reasonable and is depended on the number of Hosted Zones , Aliases , Traffic Flow to www and others..

Requirements

• A custom domain from any domain provider
• AWS Account (Free Tier can be used)
• S3 bucket for hosting the website content
• SSL Certificate from AWS Certificate Manager
• Have little knowledge about DNS records.

With that in mind , let's jump right in to create our free S3 Static Website using AWS.

Step 1 : Buy Domain from Freenom

1. First , go to www.freenom.com
2. Enter the domain name you need in the availability bar but always remember to use TLD’s such as .ml, .tk and .ga since they are free of cost. Select the domain and click on Checkout. We have selected testingfree.ga domain
3. Provide the term for which you would like to use the domain. Since I am creating
4. Enter your email address in the email address field and click on the link you receive in your email to verify the email address and create an account in freenom with your first name , last name and all the profile details.
5. After you have completed filling all the required details during the verification of email address , you will be given an Order Confirmation and you can from now login to your freenom account to view your domain you bought . You can navigate to the below link to see the domain you have bought

https://my.freenom.com/clientarea.php?action=domains 

Step 2 : Create an S3 bucket

1. Go to your AWS Management Console and go to Amazon S3 and click on Create bucket

2. Now, enter the bucket details

• Bucket name : Domain name you have bought from Freenom
• AWS Region  : Select an AWS region located near to you for better latency.

3. Allow Public access for the bucket because we want our bucket to display the website content. We can do that by going to the Permissions tab and editing the Access Control List (ACL). Click on the acknowledge checkbox and click on Create Bucket.

4. Now Go to Permissions tab and add the below Bucket Policy :

  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::testingfree.ga/*"]
    }
  ]
}

Remember to update the domain in the Resource with your domain. 

5. After adding the Bucket Policy , Go to the Properties tab and and enable Host a static website inside Static Website Hosting section. Enter the homepage of your domain in the Index Document field and you can also enter an error page in the Error Document field if you feel like it. I am planning to add a single index.html file as the Index document so I have updated the same.

6. Now go to Objects where you can upload all the files of your S3 static website, so click on Upload to upload all the website files to the S3 bucket.

Here is my sample index.html file

<h2>Hello World</h2>

7. Next get the Object URL which you can use to access your S3 static website.

8. Since the objects have been uploaded successfully , you can now visit the bucket endpoint to see the website running . The next part will tell you how to configure custom domain to S3 bucket.

Step 3 : Configuring Custom Domain using Route53

1. Go to Route53 in AWS and Click on Create Hosted Zone

2. In the Hosted zone configuration section, Enter the domain name you have bought in the “Domain Name” and select the type as Public Hosted Zone since we want the traffic routed through the Internet.

3. Two DNS records will get created in the Hosted Zone. Click on the NS Record and copy all the 4 DNS Servers.

4. Now go to Freenom and under the domain , click on Nameservers and paste the nameservers from the DNS record there.

5. We have successfully configured the Custom Domain to Route53 and we now need an SSL Certificate to enable HTTPS for our S3 static website.

Step 4 : Request SSL Certificate from AWS Certificate Manager (ACM)

1. Go to AWS Certificate Manager and click on Request a Certificate.

2. In the next page enter your domain in the Fully Qualified Domain Name field. Select DNS validation since it's faster and an easier option and click on Request

3. Here we can see our request is in "Pending validation".

4. Next click on the certificate and click on Create records in Route 53

5. While the request is in progress , Click on Create records in Route53

6. After creating the record in Route53 ,wait a few minutes for the DNS validation to be done.

7. We can now see that the SSL Certificate is issued and we can now use it but in order for us to use it , we need to connect the SSL Cert to a CloudFront Distribution.

Step 5 : Creating CloudFront Distribution with SSL Certificate

1. Go to the CloudFront Dashboard using Search bar and click on Create Distribution.

2. Choose the Origin Domain as the Amazon S3 bucket and change the Viewer Protocol Policy to Redirect HTTP to HTTPS.

3. Enter your domain name in the Alternate Domain Name field and choose the Custom SSL Certificate and select the SSL Certificate issued previously and click on Create Distribution.

4. The CloudFront distribution was created successfully and we have received a cloudfront endpoint now. You can collect the same as shown below, we will have to use this in our next steps:

Step 6 : Connecting the CloudFront Distribution to Route53

1. Go to the Route53 dashboard and select your domain’s hosted zone.

2. Click on Create record and add the following information

• Record Type should be A record
• Route traffic should be Alias to Cloudfront distribution
• Provide the Cloudfront distribution domain name from previous step
• Click Create records

3. Next verify the status of your newly added records are synced

4. Now we are all set enter the domain you have bought in a new tab. You can see that the website gets displayed with an HTTPS Secure Connection.

Conclusion

In this post , we have learned how we can use AWS S3 , AWS ACM , AWS CloudFront distribution to create a free S3 static website for our own use. If you are just getting started with Cloud , then please checkout our in-depth articles on our website. If you encounter any problems in any of the steps above, please let us know in the comments below.