GitHub Pages are websites for your projects hosted on GitHub. Did we say free? Of course, the GitHub Pages are free! Just edit, push, and view the changes live on your free website.

Let's take a look at how to create and host our application on GitHub Pages step by step: 

1. Let's get started by installing Angular CLI using the npm install command:

      npm install @angular/cli

2. Upon completion of the command, it's time to create a new Angular project. Let's call it deploying-angular:

      ng new deploying-angular

Once the command is executed successfully, we should see the following screenshot:

3. Now it's time to initiate a Git repository. We can do that by executing the following command:

      git init

4. Upon successful execution, you will see the repository initialized or, in the following case, if a repository already exists, then it will be reinitialized as follows:

5. Feel free to make any changes to app.component.html or any files that you would want to modify. Then, once you are ready to deploy, first commit the code/changes by executing the commit Git command. We can also pass the -m meta flag and add a message to the commit:

      git commit -m "deploying angular"

6. Next, we need to set the origin to the repository. The following command sets the remote origin to the repository:

      git remote add origin      
      https://<token>@github.com/<username>/<repo-name>

All right. All set.

7. Now, the superpowers come in. To deploy your Angular app to GitHub directly, we will need to install a package called angular-cli-ghpages. This is an official distribution to deploy Angular apps to GitHub Pages directly:

      npm install -g angular-cli-ghpages

This is the output we will get up on running the preceding code:

Now that we have angular-cli-ghpages installed, it's time to build our application and get the compiled source files.

8. Let's run the ng build command with the --prod meta flag and also set --base-href:

      ng build --prod --base-href  
      "https://<username>.github.io/deploying-angular"

9. Here is the base href URL, which is the author's GitHub home page, and the corresponding deploying-angular repository:

      ng build --prod --base-href  
      "https://srinixrao.github.io/deploying-angular"

10. Once we build the Angular application, we will see that the compiled source code is generated under dist/<defaultProject> -defaultProject. The compiled source is usually the folder name that we specify as the application name:

11. Now that we have our compiled files generated, it's time to deploy the application to GitHub Pages. We do this by running the npx ngh --no-silent command:

      npx ngh --no-silent --dir=dist/deploying-angular

12. Remember that, optionally, we will need to mention the corresponding dist folder that we want to deploy:

13. Upon successful execution of the command, the package we installed for deploying the Angular application to GitHub Pages will run the required jobs, such as cleaning, fetching the origin, checking out the code, and, finally, pushing the latest code to the repository, and will then be ready to host in GitHub Pages:

14. Once the commands are executed, navigate to your GitHub account and click on Settings under the repository. You will see the site published to the URL:

15. Click on the link displayed under the repository and we should see that our app is up and running!

Congratulations! We just published our first Angular application to GitHub Pages:

In the preceding series of steps, we learned how to deploy our Angular application to GitHub Pages. In more realistic scenarios, we will also need to deploy the APIs or backend services to our server. We can do that by deploying our APIs to either Firebase or self-hosted servers. 

Now, go ahead and just repeat the same for all the projects and applications created so far.