Simple Steps To Deploy Angular App To GitHub Pages [Angular 2/4/5]


This article guides you through few simple steps to deploy Angular app to Github pages.

Github allows you to deploy a static website or web app using Github pages feature.

It’s simple and easy peasy to use Angular CLI along with a node package named angular-cli-ghpages to achieve the deployment.

1. Install Angular CLI Ghpages

By using NPM, you can install angular-cli-ghpages globally.

npm install -g angular-cli-ghpages

2. Angular App Build Production

As the name suggests, we need to use Angular CLI to create a build of our app. Let’s go the project directory and run the needed command.

ng build

This will take around 10-20 seconds depends on the size of the project. And then it will generate a new folder called /dist at the root folder.

Hold on! If you’ve noticed it’s having the large size of the app, maybe in MBs. And it’s quite heavy to deploy the app with this size.

To overcome this issue, Angular provides an option prod to generate a production build.

ng build --prod

Now, if you again notice the size, it will be drastically reduced the complete folder size. It’s amazing, right!

3. Specify the base href location

Before we push our Angular app to Github pages, we nee to rebuild it with the base-href flag.

ng build --prod --base-href "https://<user-name><repo>/"

Now, it’s ready just running angular-cli-pages will do the job.


Done! Your app will be hosted on

Additional Github pages options

You can add a message to the commit version while deploying your app.

ngh --message="First Version - Hello World"

Also, you can specify the branch name while deploying.

ngh --branch=production

Finally, you can perform a dry run before deploying to see the output.

ngh --dry-run

That’s it. It’s one of the easiest ways to deploy angular app to Github pages.

Moreover, If you’re having any issues, you can take help from Angular app to Github page document.

Don’t forget to share this article!

Leave a Reply

Notify of