Deploying an Angular App to Github Pages

Published on December 4, 2016


Deploying an Angular App to Github Pages

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/

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar


While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel