DEV Community

Sanjay Saini
Sanjay Saini

Posted on • Updated on • Originally published at


How to deploy Angular app on GitHub Pages?

In this article I am going to share with you my learning while I was trying to publish my Angular app on the GitHub Pages. I found GitHub Pages very effective yet very easy platform to publish your websites. So in this article I am explaining the process the same way I published my app.
I have developed this simple Todo App in Angular which I am going to explain how to deploy on GitHub Pages in these simple steps...

Alt Text

Deploy your local repository on GitHub

GitHub Pages ( provides very convenient way to deploy your static websites from your GitHub repository therefore you need to have an account on the in order to follow this article.

First you need to put your code in local repository into the remote repository at so if you don’t have GitHub account you need to create it first now.

Now login to your GitHub account and create repository in which you will upload your local code. Here I created repository named todo-app.

Alt Text

Note down the URL of newly created repository that will be used to setup remote repository for your local repository in order to push your local repository code onto GitHub repository.

Assuming you have git installed on your machine and you have already committed your code in the master branch of your local repository.

Open the git bash on the app folder and run below commands with your GitHub repository URL to upload your code on repository.

Alt Text

$ git remote add origin <your GitHub repository URL>
$ git push -u origin master

Alt Text

Refresh your GitHub repository and check your code is pushed into newly created GitHub repository.

Alt Text

Build your code to generate deployables

Now we need to build our code in production mode in order to create distributable files that will be deployed on GitHub Pages. By default this deployable code generated in the /dist/ folder under the app folder but we need to generate this in the docs folder under the app folder.

So we need to make a small change in the angular.json file and change the outputpath value to docs/.

Alt Text

Another point to be noted is the URL of your going to be hosted app on the Github Pages would be

Like in my case it would be

This URL is needed to set the base URL of our website while generating the distributable files to deploy on GitHub Pages.

So now run following command with your website URL in the base-href option in the git bash window to generate distributable files in the docs folder.

$ ng build - -prod –base-href=””

username and repository-name will be your github username and repository name.

Alt Text

Go to your app folder and check docs folder is created that contains all the distributable files.

Alt Text

Now commit this folder into local repository and also push it into the GitHub repository as well by running following commands in the git bash window.

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

Alt Text

Configure GitHub repository for Publishing on GitHub Pages

Once docs folder is pushed into you GitHub repository you need to open the repository settings and go to the GitHub Pages section and select master branch/docs folder from Source drop-down and that's it....

Alt Text

Now open the GitHub Pages URL of your deployed app in the browser window to check successful deployment of your app on the GitHub Pages.

Here's the Link of this todo-app on GitHub Pages.

I had to create another repository name angular-todo-app so dont get confused with different repository name in the URL of this site.

Alt Text
There is another method to deploy you Angular app only on GitHub Pages using angular-cli-ghpages package that you can google for more details but personally I find this approach better and clear than using that packages.

Happy Reading...!!!

Top comments (1)

donqq profile image
Don Dilanga

Just use this command. No need to change angular.json (or angular-cli.json) file.
ng build --prod --output-path docs --base-href //

Create an Account!
Now it's your turn!
🗒 Share a tutorial
🤔 Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.