DEV Community

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

Posted on • Edited on

37

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

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

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]/

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more

👋 Kindness is contagious

Value this insightful article and join the thriving DEV Community. Developers of every skill level are encouraged to contribute and expand our collective knowledge.

A simple “thank you” can uplift someone’s spirits. Leave your appreciation in the comments!

On DEV, exchanging expertise lightens our path and reinforces our bonds. Enjoyed the read? A quick note of thanks to the author means a lot.

Okay