How to Host an Angular Project on GitHub Pages

Hosting your Angular project on GitHub Pages is a straightforward and efficient way to showcase your work, share it with others, or even run demos. GitHub Pages is a free service provided by GitHub to host static websites directly from a repository. This guide will walk you through the steps to deploy your Angular application to GitHub Pages.

Prerequisites
Before we start, make sure you have the following:

1. Node.js and npm installed on your system.
2. Angular CLI installed globally (npm install -g @angular/cli).
3. A GitHub account.
4. A GitHub repository created for your project.

Step 1: Create or Prepare Your Angular Project

If you already have an Angular project, you can skip this step. Otherwise, create a new Angular project using the Angular CLI:

ng new my-angular-app
cd my-angular-app

This command creates a new Angular project named my-angular-app. Navigate to the project directory after it's created.

Step 2: Install Angular CLI GitHub Pages Deployment Tool

Angular has a handy deployment tool that allows us to deploy the application to GitHub Pages easily. Install the angular-cli-ghpages package globally using npm:

npm install -g angular-cli-ghpages

Step 3: Build the Project
To deploy the Angular project to GitHub Pages, you first need to create a production build of the project. This step compiles the application and prepares it for deployment.

Run the following command to build your project:

ng build --prod --base-href "https://<your-username>.github.io/<your-repo-name>/"

Replace with your GitHub username and with the name of your GitHub repository. For example:

ng build --prod --base-href "https://johnDoe.github.io/my-angular-app/"

This command creates a production build in the dist/my-angular-app folder. The --base-href flag sets the base URL for the application, which is necessary for GitHub Pages to serve your app correctly.

Step 4: Deploy to GitHub Pages
Now that your application is built, it's time to deploy it to GitHub Pages using the angular-cli-ghpages tool. Run the following command:

ng build --base-href "https://johnDoe.github.io/my-angular-app/" 

This command deploys the contents of the dist/my-angular-app directory to the gh-pages branch of your GitHub repository, which GitHub Pages uses to serve your site.

If you're doing this for the first time, the gh-pages branch will be created automatically.

Step 5: Verify the Deployment
Once the deployment is complete, you can visit your GitHub Pages URL to see your Angular application live. The URL will be:

https://<your-username>.github.io/<your-repo-name>/

Using the previous example, it would be:

https://johnDoe.github.io/my-angular-app/