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:
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! 🙏
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.