DEV Community

Cover image for How to: Deploy Angular Website to Github Pages
Daniel Caballero
Daniel Caballero

Posted on • Edited on

36

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:

Image description

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.
Enter fullscreen mode Exit fullscreen mode

$ 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.
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (2)

Collapse
 
arunans23 profile image
Arunan Sugunakumar

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.

Collapse
 
lperezp profile image
Luis Eduardo

This command worked for me
ng deploy --repo=https://github.com/[username]/[repo-name].git --name="[username]" --base-href=/[project-name]/

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay