How did I setup my portfolio website

I thought it’s about time to have my own domain name. Instead of writing blogs in different channels, I thought I will host it on my own website. Having the domain names will also help me in my side projects. So pradheepa.com is bought. I will mention the steps below on how to configure

1. Procure a domain name in AWS Route 53.
2. Create Public Certificate using AWS Certificate Manager.
3. Create a repository in github and host the gatsby blog starter page.
4. Build and Deploy using netlify.
5. Configure custom domain in Netlify Settings.
6. Copy the record values to be configured from Netlify and Update in Route 53 hosted zone.
7. Domain is ready for use.

Route 53 Domain Name Registration

Click on domain name registration and check for the availability of the domain. E.g. pradheepa.com. Complete the purchase and proceed to check the hosted zone creation. It might take a while (5 to 10 mins) to reflect the purchase.

Create certificate in ACM

To have https connection to the domain created, we need to create public certificate in the AWS Console. There is no cost for the public certificate. I created the certificate for the domain (*.pradheepa.com) which will allow me to use for the subdomains also. Once the certificate is created, the certificate needs to verify if we are the real owner of the domain. A DNS configuration is shared at the last step which asks us to create a CNAME record in the hosted zone.

Clone gatsby starter page

Created the gatsby starter page using the command,

gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

I have uploaded my page in my github repository.

Netlify Build

I am hosting the website in Netlify because its swift and also free. I wanted to start faster and Netlify seems like a better option. AWS Amplify will also do the same but I wanted to explore Netlify. So I hosted it here. It took me a couple of minutes to connect github repository. All I have to do is confirm the default settings and Netlify took care of the build. Once the build is complete, it gave the domain name as ‘site-name.netlify.app’ similar to firebase. There is also an option to rename the sitename. Since the default name is not friendly i renamed to pradheepa.netlify.app

Domain Name Config in Netlify

Click on Domain Management in Netlify and select custom domain names. Configure the new domain name created. After configuring successfully, it will provide us with the CNAME / A Record configuration values to be updated in our AWS Route 53 hosted zone.

Route 53 Hosted Zone for the Netlify App

Create a CNAME record in pradheepa.com hosted zone in Route 53 and hence now all the requests to pradheepa.com will be rendered by the Netlify App.