How to: Deploy Angular Website to Github Pages

#webdev #angular #githubpages #github

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.

Top comments (2)

Arunan Sugunakumar • Apr 4

The correct build command should be ng build --configuration production --base-href https://[username].github.io/[repo]/. You need to put a space after configuration.