Deploy an Angular App to GitHub Pages for Free

Tags: angular gitHub pages

Written by: Tushar Sharma

GitHub Pages provides a simple way to host static websites for free. In this guide, we'll create a basic Angular app, build it for production, and deploy it to GitHub Pages.

Prerequisites

Ensure you have the following installed:

• Node.js (LTS recommended)

• Angular CLI (npm install -g @angular/cli)

• A GitHub account

Step 1: Create an Angular App

First, generate a new Angular project:

This creates a new Angular project with default settings.

Step 2: Build the Angular App

To deploy the app, we need to create a production-ready build:

Explanation:

• --configuration production: Optimizes the build for production.

• --base-href "/my-angular-app/": Required for GitHub Pages (replace my-angular-app with your repository name).

The output files will be in the dist/my-angular-app directory.

Step 3: Create a GitHub Repository

1. Go to GitHub.

2. Click New repository.

3. Name it my-angular-app.

4. Initialize with a README (optional).

5. Click Create repository.

Step 4: Deploy to GitHub Pages

We’ll use the gh-pages branch for deployment.

Initialize Git and Push Code

Deploy the Build to GitHub Pages

1. Install the GitHub Pages deployment package:

1. Deploy the app:

Step 5: Enable GitHub Pages

1. Go to your GitHub repository.

2. Navigate to Settings > Pages.

3. Under Branch, select gh-pages.

4. Click Save.

Step 6: Access Your Live App

After a few minutes, your app will be available at:

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

Conclusion

You’ve successfully deployed an Angular app to GitHub Pages! This method is ideal for hosting small projects, demos, or personal portfolios.

Troubleshooting

• 404 Errors? Ensure the base-href is correctly set.

• Changes Not Reflecting? Try:

• GitHub Pages Not Loading? Double-check that GitHub Pages is enabled under Settings > Pages.

Now, you can easily share your Angular project with the world! 🚀

---

comments powered by Disqus