Deploy an Angular App to GitHub Pages With Angular CLI

2 min readMay 6, 2023

Angular

Angular is a popular JavaScript framework for building single-page applications.

Deploying Angular applications to GitHub pages is a great way to host them for free.

First, you need the Angular Application.

Create the gh-pages git branch.

git branch gh-pages

Next, check out from the main branch to gh-pages to transfer all code.

git checkout gh-pages

Create the GitHub repository in your GitHub account.

Push the gh-pages to the remote repository.

git push -u origin gh-pages

Get the repo link.

Goto the settings for your repository.

In the pages tab, the Build and Deployment section sets the sources to Deploy from a branch.

Then change the branch to gh-pages and select the root folder.

After that, install the Angular-CLI-GHpages.

The angular-cli-ghpages package is a tool that the Angular CLI uses for deployment purposes.

Navigate back to your local project repository. Then install and run angular-cli-ghpages with this command:

ng add angular-cli-ghpages

Then deploy the app remotely.

To build the app in production, you must connect it to a remote server on GitHub.

Configure your app to a remote server by running the following command:

ng deploy --base-href=https://GithubUserName.github.io/GithubRepoName/

Now, you can find your Angular project on online. (https://www.userName.github.io/repoName)

If you enjoy my content, please consider buying me a coffee to support my work: https://www.buymeacoffee.com/atdilakshan