How to Host Your Angular App on GitHub Pages

Are you looking to showcase your Angular project to the world but unsure about hosting options? GitHub Pages offers a simple and free solution to host static websites, including Angular applications. In this guide, I'll walk you through the steps to deploy your Angular app on GitHub Pages.

Prerequisites:

- GitHub account

- Basic knowledge of Angular CLI

- Git installed on your local machine

Step 1: Create a GitHub Repository

1. Head over to GitHub and log in to your account.

2. Click on the "+" icon in the top-right corner and select "New repository."

3. Give your repository a name, for example, "myResume."

4. Ensure the repository is set to public since GitHub Pages only supports hosting for public repositories.

5. Click on "Create repository."

Step 2: Clone Repository and Create Angular Project

1. Open your preferred code editor (e.g., Visual Studio Code).

2. Clone the repository you just created to your local machine using Git.

   git clone https://github.com/yourusername/myResume.git

   

3. Navigate to the cloned repository and create a new Angular project.

 

cd myResume

ng new project

Step 3: Configure Angular Project

1. Navigate to your project directory.

2. Ensure your Angular project runs smoothly locally without any errors.

   

cd project

ng serve

   

Step 4: Push Code to GitHub

1. Add, commit, and push your Angular project code to GitHub.

 

   git add .

   git commit -m "Initial commit"

   git push origin main

  

Step 5: Configure GitHub Pages

1. Go to your GitHub repository page.

2. Click on the "Settings" tab.

3. Scroll down to the "GitHub Pages" section.

4. Under "Source," select "main" or "master" branch and `/docs` folder.

5. Click "Save."

Step 6: Build and Deploy

1. Open your `angular.json` file and modify the `outputPath` to `"../docs"`.

   

   "outputPath": {

     "base": "../docs",

     "browser": ""

   }

  

2. Build your Angular project with the base href.

   

   ng b --base-href /myResume/

   

3. Commit and push the changes to GitHub.

 

   git add .

   git commit -m "Configure GitHub Pages"

   git push origin main

 

4. GitHub Actions will automatically deploy your app. Wait for the deployment to complete.

Step 7: Visit Your Website

1. Once the deployment is done, visit your Angular app hosted on GitHub Pages.

  

   https://yourusername.github.io/myResume/

  

You have successfully hosted your Angular app on GitHub Pages.