DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

Deploy Angular app to GitHub Pages

#angular #github #githubpages

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

Top comments (0)