I have my personal portfolio site 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/ 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.
Now, i already have my portfolio site on github here. I will clone the same in local to start updating the site.
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.
This will open my local site on http://127.0.0.1:5500/index.html
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
Now, it’s time to add custom domain. For this i found another great YouTube video.
I have purchased my domain from namecheap. So, i will head to it’s dashboard and click on Manage.
Manage
Then we will go to the Advanced DNS tab. These will be the default values.
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
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
Next, go tho your github project settings and add the custom domain.
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
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
Now, it time to check my domain nabendu.me . When i visit it gives me a big Not Secure warning in the browser.
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
Now when i visit https://nabendu.me/ i will be taken to the Secure site with no warnings.
No error
Hope you liked my Portfolio Site. So, do visit it and use this article to host your awesome portfolio sites.
Top comments (10)
How do you update your website if for example you want to make some changes like add new projects or change the layout perhaps?
If your site is hosted on GitHub you can just commit your changes to the repo that your site is hosted from. The commit will be built (if you're using Jekyll) and served at your domain.
What if the site is hosted on for example namecheap or similar?
Why would you host your static website on a paid web hosting if you can host it on GitHub for free? It’s a brave new world out there called JAM-stack which suddenly makes the old database-driven approach obsolete.
Hi Deni,
The site is not hosted on namecheap but on github. Namecheap is a domain registration site. Earlier my site was hosted for free on nabendu82.github.io/ . So, as you can see the cost of free is to add github.io at the end of my site.
But now i just purchased the domain nabendu.me from namecheap for $4.18 per year and just used the process in blog to change the custom domain in github.
Thanks
Thank you for explaining that to me. I wanted to know if I could have a website that's hosted on github but have the domain like abc.com for example.
Yes Deni. I did exactly the same thing.
Great looking portfolio!
Thanks Michael
Sure thing!