Deploy Angular to GitHub Pages by Setting Up a Workflow in GitHub
Tags: angular, github
Published: 2020-09-06 21:38:58

In this post I'll show you how I set up a GitHub workflow to deploy the latest code in one of my Angular projects after the code gets merged in to the master branch.

Admittedly, I was late to the GitHub Actions party. I decided to try to set up a workflow that would automatically deploy the latest code to GitHub pages. I've been using [angular-cli-ghpages](https://github.com/angular-schule/angular-cli-ghpages/#readme) to deploy my Angular apps to GitHub pages, and was hoping there'd be a way to automate this process. It turns out it was relatively easy to create the workflow.

I found an action called [Angular Deploy gh-pages Actions](https://github.com/marketplace/actions/angular-deploy-gh-pages-actions) that does exactly what I needed. Per the homepage of the action, "This GitHub action will handle the deploy process of your angular application to GitHub Pages."

# Let's get started
The first thing I did was go to the GitHub repo for the Angular project that I wanted to host on GitHub pages. Once there, I clicked the Actions button, which looks like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i83awsti7ookz665ptt6.png)

Once here, I clicked the "set up a workflow yourself" link.

I actually copied and pasted the example yml file from the [Angular Deploy gh-pages Actions](https://github.com/marketplace/actions/angular-deploy-gh-pages-actions) homepage. If you scroll down on their homepage you will find a section called 'Getting Started', the example yml file is there. I of course had to make some minor tweaks. I first changed the value for the `github_access_token` to `${{ secrets.GITHUB_TOKEN  }}`. In the `base_href` I just pasted in the name of my repo. In the `angular_dist_build_folder` I changed the value to `dist/highlightSearch` where `highlightSearch` is the name of my project. The end result looks like this:

```yml
# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: 
    - master
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      # Runs a single command using the runners shell
      - name: Angular Deploy gh-pages Actions
        uses: AhsanAyaz/angular-deploy-gh-pages-actions@v1.3.1
        with:
          github_access_token: ${{ secrets.GITHUB_TOKEN  }} 
          build_configuration: production 
          base_href: /angular-highlight-search-pipe/  
          deploy_branch: gh-pages 
          angular_dist_build_folder: dist/highlightSearch
```

After making the edits I clicked the **start commit** button, and chose to commit the new yml file directly to the master branch.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kyr22db0wwl377hcylaf.png)

A .github folder was created, with a subfolder named workflows. Within this folder is where you can find the main.yml file.

After clicking the Actions tab again, I saw something like this: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0047lva10xm57jt250di.gif)

I then clicked the yml file, then click build, and watched the build. It looked like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gheeiivz5ha98xr9we2b.gif)

The green check marks meant that the build completed with no errors.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dx0rtzuym4falbm9l64q.png)

With this workflow in place, every time I merge in to master, a new build will automatically kick off and my latest changes will be deployed to the GitHub Pages hosted site. 

# Conclusion
I am impressed with how easy it was to get this workflow up and running. Big thanks to the team that put together the [Angular Deploy gh-pages Actions](https://github.com/marketplace/actions/angular-deploy-gh-pages-actions) action. Let me know your thoughts. Thanks for reading!