Host portfolio site on GitHub pages and add custom domain
Tags: github, html, tutorial, webdev
Published: 2019-11-21 11:41:27

I have my personal [portfolio site](https://nabendu82.github.io/) hosted on Github pages for sometime now. But i didn’t updated it for more then 1.5 years now. I need to put some additional side projects which i had worked in the past 2–3 years and also have to update my current job.

My personal portfolio site is on [https://nabendu82.github.io/](https://nabendu82.github.io/) which was provided by GitHub. I am also planning to add a custom domain, which i had recently purchased.

Hosting a static site is very easy through GitHub pages and you can find the instructions in this awesome video which i found on youtube.

<center><iframe width="560" height="315" src="https://www.youtube.com/embed/8hrJ4oN1u_8" frameborder="0" allowfullscreen></iframe></center>

Now, i already have my portfolio site on github [here](https://github.com/nabendu82/nabendu82.github.io). I will clone the same in local to start updating the site.

![Cloning](https://cdn-images-1.medium.com/max/2000/1*uRd9UT_r8PGZQlMUW1IJjQ.png)*Cloning*

I will then open the code in my code editor i.e. VS Code. I have a nice plugin there called **Live Server**, which allows you to change anything in your html files and show it instantaneously. Without this plugin you have to open your html file in a browser and refresh it, every-time you make a change in the code.

So, i am right-clicking inside my **index.html** and clicking on **Open with Live Server** option.

![](https://cdn-images-1.medium.com/max/2880/1*7YPETq2osyI5ZnQesgzmVQ.png)

This will open my local site on [http://127.0.0.1:5500/index.html](http://127.0.0.1:5500/index.html)

![Local site](https://cdn-images-1.medium.com/max/2880/1*qvf5M_1xiUwuYuBA9grB6g.png)*Local site*

I added details about my new job and also changed the side project. I commited and pushed to my github. It changed by site instantaneously.

![Updated Site](https://cdn-images-1.medium.com/max/2880/1*px_Vbg2ccUTFEH7Ji7TXFA.png)*Updated Site*

Now, it’s time to add custom domain. For this i found another great YouTube video.

<center><iframe width="560" height="315" src="https://www.youtube.com/embed/mPGi1IHQxFM" frameborder="0" allowfullscreen></iframe></center>

I have purchased my domain from namecheap. So, i will head to it’s dashboard and click on **Manage**.

![Manage](https://cdn-images-1.medium.com/max/2880/1*QLj0lPFAl6w7BJfM8TJIRg.png)*Manage*

Then we will go to the Advanced DNS tab. These will be the default values.

![Defaults](https://cdn-images-1.medium.com/max/2880/1*1dSxRv_E6uZA4f-aJuZEdQ.png)*Defaults*

Now, edit the CNAME Record and give the github website. For me it is **nabendu82.github.io**

After that click on the small green check.

![Github CNAME](https://cdn-images-1.medium.com/max/2880/1*CgFUUe4jGYpmDA3KBQ59NA.png)*Github CNAME*

Next, we need to add four **A Record** for github custom domains. Below are the IPs.

185.199.108.153 
185.199.109.153 
185.199.110.153 
185.199.111.153

![A Record](https://cdn-images-1.medium.com/max/2880/1*vQjzvZea-lMMc9znzB931g.png)*A Record*

Next, go tho your github project settings and add the custom domain.

![Custom domain](https://cdn-images-1.medium.com/max/2880/1*VOuW_S5r8Kgix6NG5l5Yqw.png)*Custom domain*

Now, if you go back to the code you will find a **CNAME** file been added by github. For me it is [https://github.com/nabendu82/nabendu82.github.io](https://github.com/nabendu82/nabendu82.github.io)

![CNAME](https://cdn-images-1.medium.com/max/2880/1*VgPHCAvs-zwbWSsi4him8Q.png)*CNAME*

If it is not created, you have to create one manually. And then add your custom domain name in it. For me it was done automatically.

![Custom domain](https://cdn-images-1.medium.com/max/2880/1*25Vq57osN1qn8KCDprlx4g.png)*Custom domain*

Now, it time to check my domain [nabendu.me](http://nabendu.me/) . When i visit it gives me a big Not Secure warning in the browser.

![Not Secure](https://cdn-images-1.medium.com/max/2880/1*nQQMv2pJ9rQJCCs__8f67Q.png)*Not Secure*

We got the above warning as the site is not yet https. So, i need to go to my Settings again and tick the checkbox to make it secure.

![Secure HTTPS](https://cdn-images-1.medium.com/max/2880/1*crkmnxmzOi3ObM3UDL7RMQ.png)*Secure HTTPS*

Now when i visit [https://nabendu.me/](https://nabendu.me/) i will be taken to the Secure site with no warnings.

![No error](https://cdn-images-1.medium.com/max/2880/1*0SbqpDY0ATMpa9uTnyE8bw.png)*No error*

Hope you liked my [Portfolio Site](https://nabendu.me/). So, do visit it and use this article to host your awesome portfolio sites.