Deploy an Angular Todo App to GitHub Pages in Simple Steps

Deploy Local Repository to GitHub

Create a GitHub account if you don’t have one, then create a new repository (for example, todo-app). Initialize a local Git repository for your Angular project and add the remote URL.

git remote add origin https://github.com/yourusername/todo-app.git
git push -u origin master

Verify that the code appears in the remote repository.

Build Your Code for Deployment

Angular’s production build creates distributable files in the dist/ folder. To make GitHub Pages serve the site, change the output path to a docs/ folder by editing angular.json and setting outputPath to "docs".

Also set the base href to your GitHub Pages URL (replace username and repository-name with your own values).

ng build --prod --base-href="https://username.github.io/repository-name/"

The build will place all files in docs/. Confirm the folder exists and contains the compiled assets.

Push the Docs Folder and Enable GitHub Pages

Add, commit, and push the newly created docs/ folder to the repository.

git add .
git commit -m "generated deployables"
git push -u origin master

Open the repository settings on GitHub, scroll to the GitHub Pages section, and select master branch / docs folder as the source.

After a few moments, open the Pages URL (e.g., https://username.github.io/repository-name) to verify that the Angular Todo app is live.

Alternative: angular‑cli‑ghpages Package

If you prefer a shortcut, you can install the angular-cli-ghpages package and run ng deploy to publish directly, though the manual method described above offers clearer control.

Feel free to leave questions or comments below.