Introduction
In many times, an integration or deployment system is needed quickly and
effectively for our frontend applications. At other times, considerable time has been invested in the task of manually deploying our applications.
Nowadays, with the increase of commits and developers working on a software project, it is absolutely necessary to carry out this deployment automatically.
This article will introduce how to have a Build&Deploy system for
Angular applications using GitHub Actions and GitHub Pages. A prerequisite to follow this article is to have our application in the GitHub repositories.
1. Configure gh-pages
The first thing we need to do is have a branch configured where the static files will be served (html, css, js, images …). By default, GitHub has a branch called gh-pages linked to its static server that provides us with a domain in the following format https://<username>.github.io/<repository>. Therefore, the first thing we do is create the gh-page branch as shown in the following image.
We need to delete the files of our project since what will have to be in this repository are the files of our application after the build process. The steps to remove the files in the gh-pages branch are the following:
> git fetch origin gh-pages
> git checkout gh-pages
Branch 'gh-pages' set up to track remote branch 'gh-pages' from 'origin'.Switched to a new branch 'gh-pages'
Once that we are located in the appropriate branch, we only delete all the
files.
> git rm -rf .
> git add .
> git commit -m "remove files"
> git push
After these steps, your repository should be empty and then we are ready for the next step.
