How to Deploy (for Free) an Angular App to GitHub Pages Without Using Any Libraries (Step-by-Step Guide)

In this article I am explaining how you can deploy an angular application for free to GitHub pages without the need of any 3rd party libraries that some developers suggest. I am showing you all the process, step-by-step with screenshots and an example of my own GitHub page.

Prerequisites:
- Git
- A GitHub account
- Angular CLI

Step 1: Create Repository

Head over to GitHub and create a new repository named username.github.io, where username is your username (or organization name) on GitHub. Repository must be public.

If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

Step 2: Create and configure your Angular application locally

If you don’t have the angular cli installed already, head over to the angular setup guide and then come back here.

First, clone the newly created repository to a local folder and navigate to the repository root folder:

$ git clone https://github.com/username/username.github.io.git
$ cd username.github.io

Create a new angular project in the root directory of the repo:

$ ng new myApp --directory ./ 

Change the buildOutput path to “docs” as it is in the screenshot bellow:

Build the angular application in production mode:

$ ng build --prod

Note the “docs” folder created in the root folder of the angular application.

Step 3: Push the code to GitHub and configure the repository

The code is now ready to be pushed to the repository. You can push the the docs folder only, or you can push the whole application (including the docs folder).

$ git add . 
$ git commit -m "Init app"
$ git push 

Now that the code is pushed on GitHub, you have to configure the repository to use the “docs” folder to build the page.

Navigate to the settings for your repository or enter the url https://github.com/username/username.github.io/settings

Scroll down to the GitHub pages section and change the build source to docs.

Wait a few seconds until your site is built and published. You should see the message “Your site is published at https://username.github.io” in the green box as it is in the above screenshot. If you don’t, try refreshing the site.

You can also view the deployments at https://github.com/username/username.github.io/deployments or at the right side of the repository, press github-pages under environments.

Step 4: View your page

Congrats! Your angular application is now deployed and available at your github page.

You can make changes locally, test them using ng serve and then build for production using ng build --prod and push your updated code to github. The page will automatically re-build.