Publish Websites on GitHub Pages with a Custom Domain

11 Feb, 2021
Publishing websites can sometimes be very tricky and could cost you some bucks as well but with GitHub Pages, the entire process is so seamless and easy that it just takes a few minutes to get your website live onto the internet. Although the process in itself is quite easy yet having a step-by-step guide is always better, isn’t it?
Follow the below steps to publish your own website onto GitHub Pages with a custom domain for absolutely no charges.
Set up an empty GitHub repository just the way you normally do. Give any name to the repository. You could keep the repository either public or private, your choice.
Here’s a sample repository for this blog here.
Push the entire code onto the repository. Ensure that you have the index.html in the root directory or in a folder named docs (you’ll understand why in the next step).
Here’s the directory structure:
- index.html
- public
   |_ css
Head to the Settings tab of the repository and scroll down to where it says GitHub Pages. By default, the options look like this:
For the Source, click the dropdown where it says None and choose the branch where your code is present, in my case it’s main.
As soon as you select the branch, a new dropdown will appear. Choose the respective folder (root/docs) where your code is present. Click Save.
Scroll back down to the GitHub Pages section and you should see something like this:
Head to the URL and you should see your website live on the internet.
In the next step, we’ll explain how to get a free custom domain.
Now to set up a custom domain, enter the domain name in the Custom domain section, in my case, it’s github-pages.tk
Click Save. This adds a new CNAME file to your repository.
Sometimes the Enforce HTTPS option is auto-enabled, if it’s not, enable it manually to get a free SSL certificate for your website. Sometimes, it could also take time to give you the option to enable it.
To get free custom domains, I use Freenom. If you already have the domain from another provider, the below steps should be similar.
Login onto the website and goto Services > Register a New Domain and search for the desired domain name.
Select the available domain and complete the checkout process.
Now go to Services > My Domains. Select the Manage Domain option against the domain you just got and head to Manage Freenom DNS.
Now, all we need to do is set A & CNAME records for the selected domain.
For A record, add four entries:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
To redirect www subdomain to the original domain, add a CNAME record with your GitHub pages profile URL with a .(dot) in the end, in my case, it would be ‘ishaanohri.github.io.’.
Just to be sure, check for the latest IPs in GitHub’s Official Documentation.
Save the records and wait for some time. Your website would be live on www.custom-domain.com and custom-domain.com. Sometimes it may take up to 24 hours to reflect the changes.
Your website is now live on your custom domain. Now, any changes you push onto the selected branch of the repository will be published live on your domain.
GitHub
GBlog
Git
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
GEEK-O-LYMPICS 2022 - May The Geeks Force Be With You!
Geek Streak - 24 Days POTD Challenge
How to Learn Data Science in 10 weeks?
What is Hashing | A Complete Tutorial
GeeksforGeeks Jobathon - Are You Ready For This Hiring Challenge?
Working on Git for GUI
How to Set Git Username and Password in GitBash?
How to integrate Git Bash with Visual Studio Code?
Git - Difference Between Git Fetch and Git Pull
How to Set Upstream Branch on Git?