Welcome folks today in this tutorial we will be looking how we can deploy static websites or apps to Github Pages using gh-pages library in 2020. All the instructions will be given below with screenshots. A step by step youtube video will also be given below.

Live Demo

What is Github Pages?

Github Pages is a platform by Github where you can host your static websites and also dynamic Web apps including React, Angular and Vue apps. You cannot host backend apps on Github Pages. This platform is only for frontend apps. If you want to host node.js phpapps you want to consider a platform called as digitalocean`

Advantages of Github Pages

Easy Deployment of your Web Apps
All apps deployed on Github Pages will be having SSL certificate for free

Get Started

First of all we will be creating a new project inside your folder. And you will have your static site which will contain only two html pages home page and about page. So just create a folder dist and create these two files index.html and about.html inside it.

dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Static Website</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
      <div class="container">
          <div class="row">
              <div class="col-md-12">
                  <div class="jumbotron" style="margin-top: 200px;">
                      <h1 class="text-center">This is the Home Page</h1>
                      <br><br>
                      <div class="text-center">
                          <a href="./about.html" class="btn btn-danger">
                              About Page
                          </a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Static Website</title>

<link

rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

</head>

<body>

About Page

</a>

</div>

</body>

</html>

dist/about.html

<!DOCTYPE html>
<html>
  <head>
    <title>Static Website</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
      <div class="container">
          <div class="row">
              <div class="col-md-12">
                  <div class="jumbotron" style="margin-top: 200px;">
                      <h1 class="text-center">This is the About Page</h1>
                      <br><br>
                      <div class="text-center">
                          <a href="./" class="btn btn-danger">
                              Home Page
                          </a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Static Website</title>

<link

rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

</head>

<body>

<h1 class="text-center">This is the About Page</h1>

Home Page

</a>

</div>

</body>

</html>

Installing gh-pages library

Now we want to install the node library gh-pages which will be responsible for deploying your website. So first of all you need to have node.js installed and also you need to create the package.json like this using this command given below

npm init -y

1	npm init -y

Now we need to install gh-pages as a dev dependency inside our project like this using this command given below.

npm install gh-pages --save-dev

1	npm install gh-pages --save-dev

After installing it you need to go to package.json file and add a simple script inside the scripts section like this

And also you need to add a homepage property to your package.json file like this

Here you will replace your github username with the value specified like this

So gauti123456 is my github username you will replace with your github username to deploy this static website to github pages.

So here staticwebsite will be your repository name when you create the repository on github. This needs to be the same.

Making Github Repository

Now we need to make the github repository to deploy our code to github and after that we can deploy our code to github pages

First of all go to github and create a repository name and I will create with the same name staticwebsite that i mentioned in the homepage property inside package.json file

Now we need to create the .gitignore file to ignore the node_modules for deployment to github.

Now go to command line and copy paste this commands to deploy code to github

After deploying your code to github master branch. Now we need to execute very simple command which is given below which will create a new branch gh-pages branch which will be deployed to Github pages.