How to Deploy an Angular Application to GitHub Pages using GitHub Actions

Welcome to my site

In this article i will explain How to deploy an Angular Application to GitHub Pages using GitHub Actions. GitHub Actions make it easy to automate all your software workflows, now with world-class CD/CD. Using GitHub Actions we can Build, test and deploy our code directly from GitHub.

GitHub Pages is a feature in GitHub that allows you to host a static website or web application for free. Most of the companies & organisations using GitHub Pages as their Documentation site.

If you are developing an Angular Application for GitHub Pages you need to build the Application for the production ready. Whenever we made some changes to the application we have to repeat the build process every time. By using GitHub Actions we can make the CI/CD process automated.

STEP 01 :

Code your Angular Application.

STEP 02 :

In order to set up workflow, it is necessary to set up a secret key for the workflow. Its protect your workflow trigger accessing by outsiders. There for you need to create a GitHub Token.

3. Now navigate to the Developer Settings

4. Click on the Personal Access Tokens.

5. Generate New Token.

Now you have got access token. Store it somewhere..

STEP 03 :

Now it’s time to create the Secret Key in your Repository.

1. Go to your repository Settings.

3. Click on Add New Secret

4. Put ACCESS_TOKEN as name and paste the GitHub Token that you got in the previous step.

5. Now Click Add Secret Button.

Now A Secret Key named ACCESS_TOKEN has been added to your repository.

STEP 04 :

Now comes the main part. Go to your repository and navigate to Actions tab & Setup New Workflow. Now modify the workflow file as shown below.

Here i selected development branch as Base Branch. Because for the Organization GitHub pages we can not be able to choose which branch to deploy. By Default its on master branch. So here i do the developing process in the development branch. When i made any changes and pushed it will build the application to master branch and then deploys it to GitHub Pages.

BASE BRANCH — Branch which contains your Angular Application.
BRANCH — Where is build and render the applications.
FOLDER — App compiled directory.

Whenever you commit new changes to the development branch the build process will start automatically and deploys it to the GitHub pages. You can check the build process by navigating to the Actions tab. Changes will be live within a few seconds. You can check the below repo url where used Actions to build the Angular Application.

I hope this article might useful for you.

Keep Learning & Keep Building..!

Originally published at https://www.ahamedsafnaj.com.