DEV Community

Cover image for GitHub Actions Hackathon 2021 - Hosting an Angular application on GitHub Pages using GitHub Actions
Rodrigo Kamada
Rodrigo Kamada

Posted on

GitHub Actions Hackathon 2021 - Hosting an Angular application on GitHub Pages using GitHub Actions

My Workflow

I created this workflow to deploy an application example built with Angular 12 on GitHub Pages.

Submission Category:

DIY Deployments

Yaml File

name: GitHub Pages

on:
  push:
    branches:
    - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'

    - name: Install dependencies
      run: npm install

    - name: Run tests
      run: npm run test:headless

    - name: Build
      run: npm run build:prod

    - name: Deploy
      if: success()
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: dist/angular-github-actions
        enable_jekyll: true
Enter fullscreen mode Exit fullscreen mode

Link to Code

GitHub logo rodrigokamada / angular-github-actions

Application example built with Angular 14 and hosted on GitHub Pages using GitHub Actions.

Angular Github Actions

Application example built with Angular 14 and hosted on GitHub Pages using GitHub Actions.

This tutorial was posted on my blog in portuguese and on the DEV Community in english.

Website LinkedIn Twitter Instagram

Prerequisites

Before you start, you need to install and configure the tools:

Getting started

Create and configure the account on the GitHub

1. Let's create the account. Access the site https://github.com/ and click on the button Sign up.

GitHub - Home page

2. Fill in the fields Username, Email address, Password, click on the button Verify to solve the challenge and click on the button Create account.

GitHub - Sign up

3. Let's create the repository. Click on the menu with the avatar and click on the menu Your repositories.

GitHub - Menu Your repositories

4. Click on the button New.

GitHub - New repository

5. Fill in the field Repository name and click…

Additional Resources / Info

This tutorial was posted on my blog in portuguese and on the DEV Community in english.

Top comments (0)