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.
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.