Deploying Angular 6|7 Apps to Github Pages

Throughout this tutorial, you'll learn to deploy an Angular 6|7 application to GitHub Pages.

Github pages allows you to host static websites and web apps for free using the same workflow you use to host repositories, you just commit and push. You can even associate a custom top level domain name to your website or web app by adding a CNAME file.

In this tutorial we'll see how to host an Angular 6 web application using Github Pages. Let's get started.

Prerequisites

You need to have Node.js, NPM and Angular CLI 6 installed, you also need to generate a new Angular 6 project using Angular CLI 6 or you can also apply this to an existing project that you want to deploy to Github Pages.

Next you also need to install a package which makes the process of deploying to Github pages easy.

$ npm install -g angular-cli-ghpages

Building the Angular 6 Application

The next step is to build your web application for production and with the base href location set to your Github Page URL.

$ ng build --prod --base-href "https://<YOUR_GITHUB_USER-NAME>.github.io/<YOUR_REPO_NAME>/"

Deploying to Github Pages

Now you are ready to deploy your web app to Github pages. Thanks to angular-cli-ghpages this is a one command process so just run:

$ ngh

You web app will be depoyed to https://username.github.io/app-name/.

Conclusion

In this short tutorial, we've seen how we can quickly deploy Angular 6 applications to GitHub Pages.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status