Code to Cloud: How to Deploy Your Angular App for free on GitHub Pages

3 min readApr 12, 2024

Deploying angular app on GitHub pages: a comprehensive guide

Introduction

Deploying an Angular application on GitHub Pages can be a straightforward process, but it requires careful attention to detail to ensure everything works smoothly. In this guide, we’ll walk through the step-by-step process of deploying an Angular app on GitHub Pages, covering all scenarios and providing full code examples.

Prerequisites

Before we begin, make sure you have the following prerequisites:

An Angular application ready for deployment.
A GitHub account.
Node.js and npm installed on your local machine.

Step 1: Install Angular CLI

If you haven’t already installed Angular CLI, you can do so using npm:

npm install -g @angular/cli

This will install Angular CLI globally on your machine, allowing you to use the ng command.

Step 2: Build Your Angular App

Navigate to your Angular project directory and run the following command to build your app:

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

Replace <username> with your GitHub username and <repository> with the name of your GitHub repository. This command will create a dist folder with the compiled code ready for deployment.

Step 3: Create a GitHub Repository

If you haven’t already created a GitHub repository for your Angular app, do so now. Make sure to initialize it with a README.md file.

Step 4: Initialize Git in Your Angular Project

Inside your Angular project directory, initialize a Git repository:

git init

Then, add and commit your changes:

git add .
git commit -m "Initial commit"

Step 5: Add Remote Repository

Add your GitHub repository as a remote origin:

git remote add origin https://github.com/<username>/<repository>.git

Replace <username> with your GitHub username and <repository> with the name of your GitHub repository.

Step 6: Push Your Code to GitHub

Push your code to GitHub:

git push -u origin master

Step 7: Configure Angular App for GitHub Pages

Open your angular.json file and locate the "outputPath" property under "architect" -> "build" -> "options". Update it to "dist/<repository>", where <repository> is the name of your GitHub repository.

Step 8: Deploy to GitHub Pages

Run the following command to deploy your Angular app to GitHub Pages:

npx angular-cli-ghpages --dir=dist/<repository>

Replace <repository> with the name of your GitHub repository.

FAQ Section

Q: Can I deploy my Angular app to a subdirectory on GitHub Pages?

Yes, you can deploy your Angular app to a subdirectory by specifying the --base-href option when building your app. Make sure to update the "baseHref" property in your angular.json file accordingly.

Q: How can I set up a custom domain for my GitHub Pages site?

To set up a custom domain for your GitHub Pages site, follow the instructions provided by GitHub in the repository settings. You’ll need to configure your DNS settings to point to GitHub’s servers.

Q: Is it possible to automate the deployment process?

Yes, you can automate the deployment process using CI/CD tools like GitHub Actions or Travis CI. Configure your CI/CD pipeline to build and deploy your Angular app whenever changes are pushed to the repository.

Conclusion

Deploying an Angular app on GitHub Pages is a great way to showcase your work to the world. By following the steps outlined in this guide, you can quickly and easily deploy your Angular app and share it with others. Whether you’re building a personal portfolio or a business website, GitHub Pages provides a convenient and reliable hosting solution for your Angular projects.