How to: Deploy Angular Website to Github Pages

With the following pages you can host an Angular website in github pages. I did this to host my personal website, which I created using Angular, in github pages:

• https://danielcaballero88.github.io/

Step 1: Create GitHub Repository

• If you haven't done this yet, create a GitHub repository for your Angular website project, it's a pre-requisite to deploy the website to github pages.
• Commit all your changes and push your project files to this repository.

Step 2: Create gh-pages Branch

• Create a gh-pages branch from your master or main branch.

  $ git branch gh-pages
  $ git checkout gh-pages

Step 3: Build Your App

• Build your Angular app in the gh-pages branch.

  $ ng build --configuration-production --base-href https://[username].github.io/[repo]/

Note: Replace [username], [repo], and [project-name] with your GitHub username, repository name, and project name respectively. Make sure the project name matches what's in your angular.json file under defaultProject.
Note 2: If this is your default github pages repo ([username].github.io) then you can skip [repo] in the base-ref above.

• Push the code and configure the repository to pick up the files from the build path (relative path to your local /dist directory in your repo, or whatever configuration you have in angular.json).

Step 4: Visit the App Page

• Visit your Angular app on GitHub Pages at the URL: https://UserName.github.io/RepoName/

Your application should now be live on GitHub Pages.