The Lean Blogs
Published in

The Lean Blogs

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

<username>.github.io

For Example, my username is MadhavBahlMD, so the name of my repository is going to be

MadhavBahlMD.github.io

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, deploy-gh

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 MadhavBahlMD.github.io.

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 MadhavBahlMD.github.io/random.

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., madhavbahl.tech.

In case you want to know how to set up a custom domain to your GitHub pages website, check out this blog —

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 index.html.

Step 3: Push your code

Although there are 3 different ways we can deploy with gh-pages,

  1. Using master branch
  2. Using docs directory
  3. Using gh-pages 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 gh-pages.

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:
Email: madhavbahl10@gmail.com
Web: http://madhavbahl.tech/
Github: https://github.com/MadhavBahlMD
LinkedIn: https://www.linkedin.com/in/madhavbahl/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Madhav Bahl

Madhav Bahl

The Lean Programmer | Tech Blogger | Aiming to make youth well versed with tech | Self-help and Productivity Blogger | On a journey to find the meaning of life