How to publish your local website on github pages with a custom domain name?
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.
Index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<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>
</body>
<script src="script.js" type="text/javascript"></script>
</html>
Style.css
<style>
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;
}
</style>
Script.js
function msg(){
alert("Hello Fresherbell");
}
Project File Structure
Keep all the files inside one folder (any name), so that they can push easily to GitHub.
Website Look
Step 2: Now login to Github https://github.com/ and make a new repository.
Step 3: Enter the name for the new repository
Step 4: Click on create a repository
Step 5: Now run one by one command given below to git initialization and to push the project to the repository.
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
Hence the code successfully gets a push to the GitHub repository from the local computer.
Step 6: Now go to Setting->Option. Go down and down, you will see Github pages.
Step 7: In Github pages, you have to select branch name and save.
Step 8: After Saving, you will get a link, where you can view your website.
Step 9: The website will look like this after publishing it on github pages.
To use the customizing domain on your website, follow these steps:
I have already created a subdomain (github.hiebro.tk) from the existing domain (hiebro.tk). So i can show you how to use custom domain in github page.
So, Here I am going to use my subdomain (github.hiebro.tk) .
You can also create your own subdomain. No problem, whether it is domain or subdomain.
Step 1: Enter your own domain (example.com or www.example.com) created by you and save it
For more information, see https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages
Step 2: Now create a CNAME record that points www.example.com to <user>.github.io.
For example, create a CNAME record that points github.hiebro.tk to Sssaurabh425.github.io excluding the repository name.
You can create a CNAME record in DNS ZONE EDITOR of Cpanel
Step 3: Now access your website using the new domain name
Congratulation, you successfully hosted your website on Github page with customized domain.
