Get your static website live in less than 60 seconds
Even though GitHub pages is super easy to use when it comes to deploying static pages, still many people have trouble in the process. Read this blog to get your website live.
Generally, my blogs are of more than 7 minute reading time, but I am writing this short blog because many people were asking me doubts on how to deploy the website using GitHub Pages. Here we go!
Is your website not static and you are willing to deploy (maybe) a PHP server or a node server?
Umm, sorry to say, GitHub Pages is not for you. We can only deploy our static websites to GitHub Pages.
Is your website just consisting of some HTML, CSS and JS files? I mean, is your website static?
Yes, this is the correct place for you! Follow this short blog and get your website deployed in no time.
Step 1: Create a new repo
Yes, as you might have guessed, the first step is, go to github.com, create an account, and since I am already having an account, I am not going to show you how to create an account. It’s really simple though, just type in your username, email, and password and you are ready to go.
Now, once you have your account set up, create a new repository, with the name
For Example, my username is
MadhavBahlMD, so the name of my repository is going to be
But, since I am already having this repository and we can’t create repositories with same names, so I am going to create a repository named,
Okay, what difference does the repo name make?
Another simple concept here, if you the name of your repo is
<username>.github.io, then the URL of the hosted website will also be the same, i.e.,
<username>.github.io, which, in my case, would be
If the repo name is anything apart from that, say
random, then the URL of the hosted webpage would be —
<username>.github.io/<repo-name>, which, in this case, is
Also, please note that in my case the name of the hosted website will not be
MadhavBahlMD.github.io, as I have set a custom domain, i.e.,
In case you want to know how to set up a custom domain to your GitHub pages website, check out this blog —
Use Custom Domain With GitHub Pages: 2 Straightforward Steps
I had a website deployed to GitHub pages and wanted a custom domain for that, when I looked into the documentation, It…
Step 2: Initialize the local repository and add your code
This one’s quite simple, except for the ‘coding’ part for some, maybe 😅
Follow these steps, or just see the GIF attached below (Of course this is not a coding tutorial, so I will host a simple page with one <h1> tag and a link to this blog)
Step 1: Create a directory
Step 2: Open the terminal/command prompt and write the following commands
Step 3: git init
Step 4: git remote add origin <GitHub repo remote link>
Step 5: Write the code for the website you wish to deploy
Please note that…
The name of the HTML file which you wish to be the homepage must be
Step 3: Push your code
Although there are 3 different ways we can deploy with gh-pages,
- Using master branch
Let’s see the first (the simplest) one.
Follow these steps:
Step 1: Open the terminal and type in the following commands
Step 2: git add .
Step 3: git commit -m "<commit message>"
Step 4: git push -u origin master
So basically, GitHub provides us 3 options, we can either deploy our master branch, or a folder named
docs in the master branch, or we can deploy a branch named
For the first option, just follow the above-given steps,
For the second option, just move your code into a folder named
docs and then follow the above-given steps
For the third option, just checkout to a new branch named
gh-pages before the above steps.
git checkout -b gh-pages
Also, instead of
git push -u origin master, write
git push origin gh-pages.
Step 4: Deploy!
Okay, now this is probably the easiest step, all you need to do is visit your GitHub account, open the repo, go to settings, and choose one of the 3 above-mentioned options. See this gif —
That’s it! The website is now deployed at http://madhavbahl.tech/deploy-gh/
It will be
<username>.github.io in your case.
It was very easy, right?
Go on, try it out yourself and tell me if you face any difficulty.
Hope you found the article helpful 😁
Feel free to reach out to me anytime if you want to discuss something :D
I would be more than happy if you send your feedbacks, suggestions or ask queries. Moreover, I love to make new friends and we can be friends, just drop me a mail.
Thanks a lot for reading till end. You can contact me in case if you need any assistance: