Table of Contents

Github pages is a Github feature that allows you to host a static website or web app for free, and it's as simple as putting the files in a <^>gh-pages<^> branch of your project's repository. The Angular CLI, along with a node package called angular-cli-ghpages make it even easier to deploy to Github pages.

This post covers deployment for Angular 2+ apps.

First install the <^>angular-cli-ghpages<^> globally:

				
					
$ npm install -g angular-cli-ghpages

Now use the Angular CLI with the --base-href flag to build your project and set the correct base href location:

				
					
$ ng build --prod --base-href "&lt;repo-name&gt;"

Then it's as simple as running <^>angular-cli-ghpages<^>. You can use the <^>ngh<^> shorthand:

				
					
$ ngh

And done! Your app will now be hosted at <^>https://username.github.io/app-name/<^>

You can optionally add a message to the commit when deploying:

				
					
$ ngh --message="First deploy"

You can also specify which branch to deploy:

				
					
$ ngh --branch=production

And finally, you can always do a dry run before actually deploying to see the output:

				
					
$ ngh --dry-run

Single-page web app fix

github pages illustration for: Single-page web app fix

👉 See this post from Back Halley Coder for a fix if you're having issues with directing all traffic to the index.html. Basically the fix is a simple script that uses Session Storage and a meta tag in the 404.html file that redirects to index.html and contains the data for the url that the user was trying to access.