Open In App

Publish Websites on GitHub Pages with a Custom Domain

Last Updated : 11 Feb, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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.

Step 1. Setup up a GitHub repository

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.

Step 2. Push your code on the repository

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

Step 3. Enable GitHub Pages

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.

Step 4. Set a custom domain

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.

Step 5. Get a custom domain

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.


Similar Reads

How to Add Custom Domain To GitHub Pages?
GitHub is an online version control system by Microsoft, where developers can host their source codes. GitHub Pages are an extension to GitHub. GitHub Pages are a wonderful and easy way of hosting websites or showcasing projects directly from GitHub. If you want to know how to deploy your static website to GitHub refer to these articles: How to Pub
3 min read
WordPress Publish Pages
WordPress is an open-source Content Management System that is totally based on PHP and MySql which is used to create a dynamic website. Matt Mullenweg developed WordPress and Written in PHP language. WordPress is one of the most popular interfaces that allow users to customize and manage the website from its back-end content management system. It i
2 min read
Accelerated Mobile Pages (AMP pages)
As we are seeing the demand for mobile phones is very large as compared to desktops or laptops. According to some sources, India has over 1.2 billion mobile phone users that's why good organizations start focusing on mobile phones first. So a question comes to mind how we can increase performance and user experience on mobiles? Let's discuss about
5 min read
How to Create Your Own Android Library and Publish it in GitHub?
In this article, we are going to create our own Android Library and publish it, so that it can be used whenever it's required in our projects. Others can also use your library in their projects. Here we are going to make a library for the blink effect which is used to highlight links, to show important announcements, etc. Benefits of using Android
6 min read
How to Publish Docker Image to Dockerhub Using Github Actions?
Pre-requisites: GitHub Actions, Docker Hub Publishing Docker images to Docker Hub using GitHub Actions is a simple and efficient process that can automate your image-building and publishing process. What are Github Actions?GitHub Actions is a CI/CD (Continuous Integration/Continuous Deployment) platform integrated with GitHub. It enables developers
3 min read
How to Publish a Static Website on GitHub
Git is a free and distributed version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. It is not only a great place to store and share our code with others but they also offer free web hosting of our HTML,
6 min read
How to make “spoiler” text in github wiki pages?
GitHub Wiki pages support GitHub Flavored Markdown. Read more about GitHub flavored markdown here: Mastering MarkdownGitHub Flavored Markdown Spec However, there is no direct method to add a spoiler text in GitHub Flavored Markdown. But, there's a workaround! Approach: Markdown Supports HTML Blocks in it. So, we can use HTML's <details> and
1 min read
Deployment of Angular Application using Github Pages
There are various methods to deploy Angular Application such as Github Pages, Heroku, Firebase, etc. The Github provides the simplest way of all using the Github Pages. Steps to Create and Deploy Sample Angular Application to Github Pages: Install Node.js: a. Windows b. LinuxInstall Angular - CLICreate new project using Angular CLI: ng new gfg-exam
2 min read
Deployment of React Application using GitHub Pages
Deploying a React application using GitHub Pages is an easy and efficient way to host your projects online for free. In this article, we will walk you through the steps to deploy your React app, making it accessible to users with a live URL. PrerequisitesA GitHub accountNode.js and npm installedBasic knowledge of React and GitGitHub Pages is a stat
4 min read
How to Build Portfolio Website And Host It on GitHub Pages?
Having an online portfolio is important for showcasing your skills and accomplishments. GitHub Pages provides a convenient and free platform for hosting your portfolio website. In this article, we will see how to build a Portfolio Website And Host It on GitHub Pages. Table of Content Creating a Portfolio WebsiteUploading into a GitHub RepositoryCre
15 min read