Africa\'s Talking
Angular How to Deploy Angular websites on Github Pages Automatically!

How to Deploy Angular websites on Github Pages Automatically!


- Advertisment -


  1. Knowledge of Angular CLI
  2. Basic Knowledge of Angular
  3. Github account
  4. Git knowledge
  5. Installed Node, Node Package Manager  and Angular CLI

You have finished your Angular website and you need to be able to share the link of your work to a potential employer or a peer for reviewing.

GitHub Pages is a service by Github that allows you to automatically host your website on the world wide web and it is absolutely free and there is no limit to the number of Angular sites you can have on Github pages.

And so our journey begins:

Create a simple Angular Project

Feel free to skip this step if you wish to deploy an already existing app. First let us create a new app using Angular CLI, the name of the app is angular-deploy, feel free to choose a name of your choice for your application.

$ ng new angular-deploy

Navigate to the application, open it on your terminal  and make sure it is running fine on your client by running the command

$ ng serve –open

From the Angular official documentation, the ng serve command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes to those files while the --open flag opens a browser to http://localhost:4200/. If the application is running fine you should see the following on your client

So this means we have a fine running app, feel free to modify the app as you wish

Commit and push all your changes to a Github repository

Once you are satisfied with your app, commit and push all your changes to your Github repository.

git add . && git commit -m ‘app complete’ && git push origin master

Angular-CLI -GH-pages installation

Angular CLI gh-pages is a tool that helps deploy Angular web apps to Github pages from the Angular CLI. To install it run the following command :

$npm i angular-cli-ghpages –save-dev


Building allows us to move from development into web app production mode which allows it to be accessed from remote servers. More elaborately, according to the official angular documentation, “The application builder uses the webpack build tool, with default configuration options specified in the workspace configuration file (angular.json) or with a named alternative configuration. A “production” configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the `–configuration=”production” or the --prod="true" option.” The following command will achieve this for us:

$ ng build –prod –base-href “

Deploying to Github Pages

We will now make use of the Angular CLI gh-pages that we already installed. The command below includes ‘project-name’, this can be found at the bottom of the angular.json file as assigned to “defaultProject”, it is the name we gave our app.

npx angular-cli-ghpages –dir=dist/project-name


Viewing Our Deployed Site

Go to the settings tab on the Github repository for the project then scroll down to Github pages for the link, you should see something like this

On clicking the link it should lead to your website

This brings us to the end of our tutorial and a pro-tip I have found on my journey with Angular, it is always better to name your app and repository the same name for easy deployment.

Happy coding!


Please enter your comment!
Please enter your name here

Latest Posts

Building Application using Node.js HTTPS Module and Africa’s Talking SMS API

Introduction For a long time, HTTP (Hypertext Transfer Protocol) was responsible for communication between a client application and a server...

Building an Exam Enrollment and Grade Notification System using Africa’s Talking SMS Shortcode API in Django

Introduction This article explores the application of SMS shortcodes to create transparency and improve the quality of education in learning...

Build a user account management system using USSD and SMS API in Go

Introduction We will be learning how to use both the Africastalking SMS and USSD api by building an application where...

Date & Time Analysis With R

One will learn how to analyse dates and time; reproducing date-related columns from a date and also format dates and time. In application, one will learn how to plot simple and multiple time series data using the R language.
- Advertisement -

Two Factor Authentication With PHP and Africa’s Talking SMS API

Two factor authentication is an additional layer of security used to ensure only authenticated users gain access to an online account. because Passwords are historically weak, and can be easily stolen, it can't alone be the way that users access their accounts.

Building a masked number system using Spring Boot, Android and Voice Apis from Africa’s Talking

Introduction In this walk through we shall be building a platform to enable a hypothetical company have their agents call...
- Advertisement -

You might also likeRELATED
Recommended to you