DEV Community

Cover image for How to host a website on GitHub with custom domain
Mohammad Hussain
Mohammad Hussain

Posted on • Originally published at hussaincodes.in

 

How to host a website on GitHub with custom domain

In this article, we are going to learn how we can host a website on a GitHub page with a custom domain name.

I will upload my portfolio website on GitHub step by step.

First of all, we need to code your website and collect all the file and upload it to the GitHub repository.

If you don't know how to upload your code to the GitHub repository then let me know in the comment section, and I will write an article on the same.

Once the code is uploaded to the GitHub repository, Goto the same repository as shown in the below screenshot.

Image description

In the above screenshot, we can see a lot of repositories are there. I am going to upload myPortfolio website so I will click on the same.

Once we will click on the repository that we want to upload we will get to see a setting icon as shown in the below screenshot.

Image description

After clicking on the setting, we will find a section on the left side call pages. we will on that as shown in the below screenshot.

Image description

Once we click on pages, we will see a source, we need to click on the dropdown and select "Deploy from a branch" as shown in the below screenshot.

Image description

After that, we need to select the branch as the main and the folder as /(root) as shown in the below screenshot.

Image description

After selecting the branch and folder, we will save it.

Once it's saved, we will go to our GitHub account settings as shown below.

Image description

Then we will click on the pages on the left side as shown in the below screenshot.

Image description

When we click on pages, we will see a button called add a domain. we will click on that button as shown in the below screenshot.

Image description

After clicking on Add a domain button, we will see a field where we need to give the custom domain name that we would have purchased from GoDaddy or any other domain name provider.

In my case, I have purchased from GoDaddy and my custom domain name is hussaincode.in so, I have given the same name as shown in the below screenshot.

Image description

And then we can click on "Add a domain" button as shown above.

Once we will click on Add a domain button we will get some DNS TXT records as shown in the below screenshot that we need to add to our domain name provider like in my case on GoDaddy.

Image description

We will copy this hostname and TXT record value and will go to our domain name provider and find the domain name DNS record.

First, we will go to the GoDaddy website and log in through our id and click on my product as shown below.

Image description

Then we will go to the DNS of our domain name that we want to set up on the GitHub page as shown below.

Image description

Once we click on DNS, we will find all the DNS records. In that record, we need to add the TXT record as shown below.

Image description

After clicking on add, we need to select the TXT record and put the hostname and its value that we copied from the GitHub TXT record during adding a domain.

Image description

Once it's done we will save it and look for the CNAME record in the DNS if it's there we need to edit it and if it's not there we need to add the CNAME record and give the value as "hussaincode.github.io" where hussaincode is my username, you can check your username from your GitHub profile and change it accordingly.

Select all the values same as shown below just change the hussaincode with your username.

Image description

We will check all the values if it's correct we will save them and then we will look for the "A" record in the DNS and give the value from this GitHub documentation as shown below.

Image description

After that, we will save this and come back to our repository settings again and will go to the pages.

And then at last we can see the custom domain field is there, we will give our custom domain name in that field and save it as shown below.

Image description

It will show as a DNS check in progress. We will wait for some time and it will show as the DNS check is successful as shown below

Image description

Once DNS is successful, our website will go live. we can check on our custom domain our website will be up and running.

In my case, my site hussaincode.in is up and running as shown in the below screenshot.

Image description

Hurray, Our site is up and running using GitHub pages without and hosting coast.

If you have any doubt or get stuck at any point, comment it and I will try to help as much as possible.

Thank you all for reading this article, Hope it helps.

Top comments (0)

18 Useful Github Repositories Every Developer Should Bookmark

18 Useful GitHub repositories every developer should bookmark: everything from learning resources and roadmaps to best practices, system designs, and tools.