Deploy an Angular CLI Application to Github Pages

February 28, 2017 by Chris Sherman

To follow this tutorial, you will need to generate an Angular CLI project.

You will also need to create a Github repository with the following naming convention: <your-github-username>.github.io

Once you create the repository, in the root of your project, configure the existing application to point to the new repository: git remote add origin ssh://[email protected]/<your-username>/<your-github-repository>.git

Note that you must add your SSH key to your Github account (under Github settings) in order to successfully deploy the application.

Next, in the root directory of your project, install the angular-cli-ghpages package by running this command: npm install --save-dev angular-cli-ghpages

In the root directory of your project, open the package.json file. Add the following entry to the end of the scripts object: "deploy": "ng build --prod && angular-cli-ghpages --branch master"

This script contains two commands separated by a double-ampersand.

  1. The first command uses the angular-cli tool to build a production version of the application.
  2. The second command deploys the production version of the application to a Github repository on the master branch.

Finally, to execute the script, run the following command: npm run deploy

Within a couple minutes, your project will be available at https://<your-github-username>.github.io.

Check back next week for part two of an deploying Angular CLI project to Github Pages: fixing 404 errors from Angular projects hosted on Github Pages.

Angular Git