how to deploy angular app to github pages with custom domain

Use the `--cname` option with your domain, e.g., `ng deploy --cname=example.com`, and ensure no `--base-href` is set, as the README explains for custom domain scenarios to avoid 404 errors.

does angular-cli-ghpages work with angular 17

No, v3 only supports Angular 18 to 21; for Angular 17 or older, you must use v1 or v2, as specified in the prerequisites section, which can lead to compatibility issues if not carefully managed.

angular-cli-ghpages vs netlify for angular deployment

angular-cli-ghpages is better for Git-based static hosts like GitHub Pages with CLI integration, while Netlify offers more features like serverless functions and built-in CI/CD but requires a separate setup. Choose based on hosting preference and workflow needs.

how to set up angular-cli-ghpages in github actions

Set the GH_TOKEN environment variable for public repos or GITHUB_TOKEN for private ones, and run `ng deploy` in your workflow; the README warns that GITHUB_TOKEN alone won't update public repo sites, requiring GH_TOKEN instead.

why is my angular app not routing correctly on github pages

You might need to use `--base-href` for non-root folders or ensure `404.html` is created (default) for SPA routing; for Cloudflare Pages, use `--no-notfound` as per the README to enable native routing support.

can angular-cli-ghpages deploy to multiple branches

Yes, use the `--branch` option to specify a target branch like `master` or `gh-pages`, and it can push to any Git repo branch, but it defaults to `gh-pages` for GitHub Pages compatibility.

angular-cli-ghpages

MITTypeScriptv3.0.3

Deploy Angular apps to GitHub Pages, Cloudflare Pages, or any Git repository directly from the Angular CLI.

Visit Website

What is angular-cli-ghpages?

angular-cli-ghpages is an Angular CLI builder that automates the deployment of Angular applications to static hosting services like GitHub Pages and Cloudflare Pages. It integrates directly into the Angular CLI, allowing developers to deploy their apps with a single `ng deploy` command, handling build, configuration, and Git-based deployment automatically. It solves the problem of manual, error-prone deployment processes for Angular SPAs.

Target Audience

Angular developers and teams who need to deploy their applications to static hosting platforms like GitHub Pages or Cloudflare Pages. It's especially useful for those using CI/CD pipelines or seeking a streamlined, CLI-integrated deployment workflow.

Value Proposition

Developers choose angular-cli-ghpages because it eliminates manual deployment steps, integrates seamlessly with the Angular CLI, and supports flexible configurations for various hosting scenarios. Its support for tokens and CI/CD makes it reliable for automated workflows, while options like dry-run and extensive customization provide control and confidence.

Overview

🚀 Deploy your 🅰️Angular app to GitHub pages, Cloudflare Pages or any other Git repo directly from the Angular CLI! Available on NPM.

Use Cases

Best For

Related Projects

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub

GitHub

982 stars97 forks0 contributors

Deploying Angular apps to GitHub Pages with a single command
Automating Angular deployments in CI/CD pipelines
Deploying Angular SPAs to Cloudflare Pages with proper routing
Teams needing consistent, repeatable deployment processes
Angular projects requiring custom domain setup on static hosts
Developers who prefer CLI-integrated tools over manual deployment scripts

Not Ideal For

Projects deploying to non-Git-based static hosts like AWS S3 or Firebase Hosting without Git integration
Applications requiring server-side rendering (SSR) or dynamic backend logic beyond static files
Teams with established, complex deployment pipelines using other tools like Jenkins or custom scripts
Non-Angular projects built with frameworks like React or Vue.js

Pros & Cons

Pros

Seamless CLI Integration

Integrates directly into the Angular CLI with a single `ng deploy` command, automating build and deployment without manual steps, as shown in the quick start guide.

Flexible Hosting Support

Supports multiple static hosts like GitHub Pages and Cloudflare Pages, with specific options for SPA routing (e.g., `--no-notfound` for Cloudflare) and custom domains via `--cname`.

CI/CD Automation Ready

Works with personal access tokens (GH_TOKEN) and GitHub Actions tokens (GITHUB_TOKEN), enabling automated deployments in pipelines without manual git configuration.

Extensive Configuration Options

Offers numerous CLI flags and angular.json settings for base href, branch names, commit messages, and dry-run mode, providing fine-grained control over deployments.

Cons

Static Hosting Limitation

Only supports Git-based static hosting; it cannot handle deployments to servers requiring dynamic logic or non-Git hosts, limiting its use for full-stack applications.

CI/CD Token Complexity

Requires careful token management, as noted in the README: GH_TOKEN must be used for public repos in GitHub Actions, and token support is limited to HTTPS Git URLs, not SSH.

Configuration Overhead

With many options like `--base-href` for non-root folders and `--no-notfound` for SPA routing, setup can be error-prone, especially for beginners or custom domain scenarios.

Angular Version Dependency

Tied to specific Angular versions (v3 supports only Angular 18-21), requiring manual version switches or updates for older or newer projects, which can break workflows.

Frequently Asked Questions

Home

Angular

Genezio

Genezio is a full-stack framework designed to simplify the development and deployment of serverless applications. It provides a seamless experience for developers by handling infrastructure concerns while enabling them to focus on writing business logic in TypeScript. ## Key Features - **TypeScript-First Development** — Write backend and frontend code in TypeScript with automatic type generation and synchronization. - **Local Development Server** — Test applications locally with a built-in development server that mimics cloud behavior. - **Automatic Deployment** — Deploy applications to the cloud with a single command, including automatic provisioning of serverless functions and databases. - **Real-Time Capabilities** — Built-in support for WebSockets and real-time communication between clients and servers. - **Integrated Database** — Includes a managed database solution with automatic schema generation and migrations. ## Philosophy Genezio believes that building serverless applications should be as straightforward as traditional web development, removing the complexity of infrastructure management while maintaining scalability and performance.

Stars489

Forks12

Last commit5 months ago

Netlify

Angular apps on Netlify gain automatic framework detection and redirects via the Angular Runtime plugin

It makes deploying and running Analog apps, both server side rendered and static, a breeze