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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player