Blog Time

How to publish your local website on github pages with a custom domain name?

Date Created: 22 March 2021 Author: Saurabh M

Github will host a website that includes only the frontend like HTML, CSS, and javascript or jquery.

Github will not support backend such as PHP.

To Publish/Host your website on GitHub pages with customizing domain, follow these steps:

Step 1: Make a simple website using only HTML, CSS, and javascript.
You can also try your old website for a better understanding.

If you don't have your old website made using HTML, CSS, and javascript. Then you can try this one.

Make separate files i.e index.html, style.css, script.js.


<link rel="stylesheet" href="style.css" />
<h1>This is a website that is been hosted using GITHUB hosting</h1>
<p>Github will host a website that include only html,css and javascript. 
We can also have a custom domain for the hosted website.</p>
<button onclick="msg()">It will show alert</button>
<script src="script.js" type="text/javascript"></script>


body {
	font-family: sans-serif;
	text-align: center;
	padding: 3rem;
	font-size: 1.125rem;
	line-height: 1.5;
	transition: all 725ms ease-in-out;

h1 {
	font-size: 2rem;
	font-weight: bolder;
	margin-bottom: 1rem;

p {
	margin-bottom: 1rem;
	color: tomato;

button {
	cursor: pointer;
	appearance: none;
	border-radius: 4px;
	font-size: 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid navy;
	background-color: dodgerblue;
	color: white;


function msg(){  
 alert("Hello Fresherbell");  


Project File Structure

Github page file structure

Keep all the files inside one folder (any name), so that they can push easily to GitHub.

Website Look

Website to push on github page


Step 2: Now login to Github  and make a new repository.

Github new repository creation


Step 3: Enter the name for the new repository

Enter name for github repository

Step 4: Click on create a repository

create repository on github


Step 5: Now run one by one command given below to git initialization and to push the project to the repository.

command for git initialization and to push the project


Command to run-

git init

git add.

git status

git commit -m "first commit"

git remote add origin your_git_url

git push -u origin master


git init command in command prompt


Hence the code successfully gets a push to the GitHub repository from the local computer.

Project been pushed on github repositories


Step 6: Now go to Setting->Option. Go down and down, you will see Github pages.

github page to host website


Step 7: In Github pages, you have to select branch name and save.

github page to host website


github page to host website

Step 8: After Saving, you will get a link, where you can view your website.

github page to host website


Step 9: The website will look like this after publishing it on github pages.

github page with custom domain name


To use the customizing domain on your website, follow these steps:

I have already created a subdomain ( from the existing domain ( So i can show you how to use custom domain in github page.

So, Here I am going to use my subdomain ( .

You can also create your own subdomain. No problem, whether it is domain or subdomain.

Step 1: Enter your own domain ( or created by you and save it

github page with custom domain name

For more information, see 


Step 2: Now create a CNAME record that points to <user>

For example, create a CNAME record that points to excluding the repository name.

You can create a CNAME record in DNS ZONE EDITOR of Cpanel


DNS Zone editor to add CNAME record


DNS Zone editor to add CNAME record

Step 3: Now access your website using the new domain name

Github page with custom domain name

Congratulation, you successfully hosted your website on Github page with customized domain.