- read

How to host your website with S3, Cloudfront and Route 53 along with ssl certificate under 15…

Marishwaran 65

Hello Guyz, Today we are going to see how to host your website on AWS S3, Cloudfront, and Route 53. Also, we will redirect traffic to HTTPS by installing a public SSL certificate provided by AWS for free. I will show a practical guide by hosting my portfolio website portfolio.marishwaran.tech
Let’s start the countdown of 15 mins and get started.

Step 1 — S3 Setup

  • Open your AWS Account and navigate to S3. Create a new bucket with the name same as the domain name, I want a domain name to be portfolio.marishwaran.tech then my bucket name will be portfolio.marishwaran.tech and specify a region (I selected a region closest to me).
  • Fill the rest with default settings, I will block all public access because I will be using CloudFront Origin Access Identity so that traffic to S3 will be routed only from CloudFront. Just an extra layer of security 🔐
  • Upload the code files to the bucket
  • Under the Properties tab, scroll to the bottom and click on edit under the “Static Website Hosting” section and update the settings as below, and mention your home page path, I have my home page as an index.html placed in the root path
  • After enabling it would be shown as below under the properties tab, note down the bucket website endpoint URL.

Step 2 — Route 53 and ACM Setup

  • Navigate to Route 53 and Create a new hosted zone with your domain name and type as “Public hosted zone”
  • A New Hosted zone will be created, if you have a domain name bought from other than Route 53 then you need to copy the nameservers displayed in the hosted zone details and paste them to the name servers in your domain name provider
  • Navigate to “Certificate Manager” and click on Request Certificate, select Certificate type as “Request a public certificate” and click on “Next”
  • Specify the domain name and select validation method as DNS validation and click on the “Request” button. Now Under the Domains section click on “Create records in Route 53”, on the next page select this record and click “Create Records”. Once added status will change to “Issued”.

Step 3 — CloudFront Setup

  • Now navigate to CloudFront and create a Distribution. Select your origin domain name as your s3 bucket website endpoint, if the suggestion didn’t come up then paste your bucket website endpoint.
  • Specify a origin name and select “Yes use OAI” and under Origin Access Identity, “Create New OAI” and select “Yes, update the bucket policy”
  • Set “Viewer protocol policy” under Default Cache Behaviour section to “Redirect HTTP to HTTPS” Next, you need to add an alternate domain name which would be your domain URL because by default CloudFront will provide a domain URL such as *.cloudfront.net. Select your custom SSL certificate, if you don’t see the certificate make sure the certificate is in issued success state Mention index.html as a Default root object and then click Create Distribution
  • Wait for the Cloudfront to deploy and status will change to “Enabled” once deployed and you will also see a “Distribution Domain Name” if you open that in your browser it should see your website.

Step 4 — Final Setup

  • Navigate to Route 53 and Open that hosted zone which you had created earlier
  • Create a new record with the record name, record type as A check on Alias and in “route traffic to” select “Alias to Cloudfront distribution” and then paste your cloudfront url if suggestion didn’t come up and Click on create record.
  • That’s it, Now your website will be live under your domain name

Please visit this post at:

For more blogs please visit:

https://blogs.marishwaran.tech/