Deploy Angular app to GitHub Pages

Manthan Ankolekar - Jul 23 '22 - - Dev Community

Create new repository with name :

Repo Name : USERNAME.github.io

// example
Repo Name : manthanank.github.io
Enter fullscreen mode Exit fullscreen mode

Clone repository to the code editor

git clone https://github.com/<username>/<username>.github.io.git

// example
git clone https://github.com/manthanank/manthanank.github.io.git
Enter fullscreen mode Exit fullscreen mode

Navigate to the project using cd

cd project-name/

// example
cd manthanank.github.io
Enter fullscreen mode Exit fullscreen mode

Make sure angular is installed if not

npm i -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

Create angular app using cli command

ng new project-name --directory ./

// example
ng new angular-app --directory ./
Enter fullscreen mode Exit fullscreen mode

Go to code

code .
Enter fullscreen mode Exit fullscreen mode

Next navigate to angular.json and make changes in

"outputpath": "dist/angular-app" => "outputpath": "any-name"

// example
"outputpath": "docs"
Enter fullscreen mode Exit fullscreen mode

Build project

npm run build
Enter fullscreen mode Exit fullscreen mode

Push changes to GitHub :

git add .
git commit -m "Initial commit"
git push
Enter fullscreen mode Exit fullscreen mode

Go to repository in browser and refresh it, changes will reflect in repository

Next Click on Repository Setting ⇒ Pages ⇒ In Source change folder and save

/root => /docs
Enter fullscreen mode Exit fullscreen mode

In few seconds your site will be live :

Your site is pubished at https://username.github.io

// example
[https://manthanank.github.io](https://manthanank.github.io)
Enter fullscreen mode Exit fullscreen mode

Reference :

https://github.com/angular-schule/angular-cli-ghpages

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .