Deploying an Angular App to Github Pages ← Alligator.io

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 "<repo-name>"

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/

— Sorry to interrupt this program! 📺

If you're interested in learning Angular in a comprehensive and structured way, I highly recommend you check out ng-book. Learning from an organized and up-to-date resource like that should speed up your learning quite a bit.

Plus, this is an affiliate link, so if you purchase the course you help Alligator.io continue to exist at the same time! 🙏

- Seb, ✌️+❤️

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

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