How to Deploy Static Website or Apps to Github Pages Using gh-pages in 2020 Full Tutorial For Beginners

You are currently viewing How to Deploy Static Website or Apps to Github Pages Using gh-pages in 2020 Full Tutorial For Beginners

 

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

 

  1. Easy Deployment of your Web Apps
  2. 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

 

 

 

dist/about.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

 

 

 

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

 

 

 

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.

 

 

 

Leave a Reply