Deploying your App with GitHub Pages? How To.

Do you have a static webpage that you would like to deploy? Do you keep your code repositories in GitHub, and would like GitHub to host your static page? Well here, I will walk you through just how to do that. Without further ado let’s get started.

Connecting a project: To start head over to your GitHub and login in. If your project isn’t connected to a GitHub repository you will want to do that first, by creating a repository for your project and giving it a related name. Next, you want to connect your project to the GitHub repository you just made by copying the SSH link provided. Note: If you don’t have SSH set up, click on HTTPS instead. Next head over to your Terminal Or Command-Line, and run the following code. “git remote add origin” then paste your key link right after and run that command.

Pre Hosting:

Note: This is where things start to vary, depending on if you are using NPM or Yarn. Next, we want to include the gh-pages package in our project. You can do this with Yarn, by running yarn add gh-pages. Or with Npm, by running npm i gh-pages — save-dev. This will save gh-pages as a dependency in our package.json file. Next in our package.json file, let’s add a homepage route, starting with your GitHub account name @ github.io followed by your repository name, like so.

Next, let’s move down to our script section and add two more key/value pairs. First being predeploy by setting it to yarn build, or with npm by setting it to npm run build. Then a deploy by setting it to gh-pages -d build, like so.

Now NPM and Yarn both know to run your script in order so it will pre-deploy first then deploy. Now head over to your terminal and run yarn deploy or npm deploy. As you can see it will run the build script first. This will build all the project files we need to deploy our API.

Next, we will add and commit our changes and push them to master. After your pull request is finished, head over to settings in your GitHub repository, and make sure your Source, is the gh-pages branch.

If your source is correct, click on the link, and you will see your very own App deployed, over GitHub pages. Congratulations, we did it. Now keep in mind this is mostly for static or single-page applications, If you are using a database, this probably isn’t the best route. I hope this helps, and keep on coding.