Deploy any application to GitHub Pages

GitHub Pages is a website dedicated to you and your projects. You can host your code directly from your GitHub repository. This article will help you manage your application in the master branch and easily deploy the code to the gh-pages branch.

You can choose any front-end framework like React, Vue, Gatsby, Next, Nuxt, Gridsome, and build the application in the master branch and build the code using npm run build command and host directly using gh-pages branch.

The fastest way to get your app on GitHub Pages is to use a package – gh-pages.

”’hit
npm i gh-pages -D

or you can install the package globally
”’hit
npm i gh-pages -g
Add this simple script to your package.json
”’json
{
“scripts”: {
“deploy”: “npm run build && gh-pages -d dist”
}
}

Note: Assuming the build folder is dist

When you run npm run deploy, everything in the build folder will be pushed to the gh-pages branch of your repository.
If you create a user page in GitHub
Create a repository with your username like username.github.io, create a branch called code or you can name the branch whatever you want. Build the application in this branch and when it comes to deploying the application, use the gh-pages command to push the contents of the build folder to the gh-pages branch

Note: In this case you need to push your build directory to the master branch, use the following command
”’json
{
“scripts”: {
“deploy”: “npm build && gh-pages -d dist -b master”,
}
}
After running npm run deploy you should see your website at http://username.github.io

Run gh-pages –help to list all supported options of the gh-pages package

Useful npm scripts from gh-pages
If your application source code is in a private repository, create a public repository named about, the source code will reside in the private repository and the static content generated from the build will go to the public repository
”’json
{
“scripts”: {
“deploy”: “build gridsome && gh-pages -d dist -b master”,
}
}
To include dotfiles when pushing changes to the branch

”’json
{
“scripts”: {
“deploy”: “npm run build && gh-pages -d dist -t”
}
}
To change the commit message when publishing the change
”’json
{
“scripts”: {
“deploy”: “npm run build && gh-pages -d dist -m Build 21082020v1”
}
}