Introduction to gh-pages

GitHub Pages is a powerful tool that allows you to host websites directly from your GitHub repository. The gh-pages branch is a particular branch that GitHub uses
to serve content for your GitHub Pages sites. In this guide, we will explore the functionalities of the gh-pages npm package, which is designed to simplify the
process of deploying projects to the gh-pages branch.

Getting Started with gh-pages

Install the gh-pages package using npm:

  npm install gh-pages --save-dev

Basic Usage

Use the following script to deploy the contents of the dist directory to the gh-pages branch:

  "scripts": {
    "deploy": "gh-pages -d dist"
  }

Advanced API Examples

Deploy with a Custom Domain

Add a CNAME file to configure a custom domain:

  const ghpages = require('gh-pages');

  ghpages.publish('dist', {
    cname: 'www.example.com'
  }, function(err) {});

Deploy from a Different Directory

Specify a different directory to deploy:

  ghpages.publish('public', function(err) {});

Adding an Application Example

Here’s a sample application setup using React:

  npx create-react-app my-app
  cd my-app
  npm install gh-pages --save-dev

Add the following to the package.json:

  "homepage": "http://username.github.io/my-app",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }

Now you can deploy your app by running:

  npm run deploy

Deploying your site is now just that simple!