Introduction to GitHub Actions

GitHub Actions is a powerful automation platform that integrates directly with GitHub repositories, enabling developers to automate their software workflows.

It allows you to create custom software development life cycle (SDLC) workflows directly in your GitHub repository. These workflows can encompass a variety of tasks, such as testing code, building applications, and deploying projects.

Understanding a Continuous Deployment Script

Now, let's break down this script, which is designed for deploying a static site using GitHub Actions.

name: Deploy

on:
  workflow_dispatch:
  workflow_call:

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install Yarn
        run: npm install -g yarn
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Predeploy
        run: yarn predeploy
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

1. Trigger Points: The workflow can be triggered manually (workflow_dispatch) or by other GitHub Actions workflows (workflow_call).

2. Deployment Job: The job runs on the latest Ubuntu runner (ubuntu-latest) and has write permissions.

3. Steps:

   • Checkout: Fetches the code from the current repository.

   • Set up Node.js: Installs Node.js (version 20).

   • Install Yarn: Installs Yarn, a package manager.

   • Install dependencies: Installs project dependencies using Yarn.

   • Predeploy: Runs a custom script (for building the static site).

   • Deploy: Uses peaceiris/actions-gh-pages to deploy the site to GitHub Pages, using a GitHub token for authentication and specifying the build directory.

Building the Static Site in the Predeploy Step

In this continuous deployment workflow, the predeploy step plays a crucial role, particularly for applications built with Vite. Vite is a modern frontend build tool that significantly improves the development experience with features like fast hot module replacement (HMR).

However, it's important to note that Vite is just one choice among many for building static sites. Developers can choose from various other tools based on their project requirements and preferences.

In the provided script, the predeploy command is defined as "predeploy": "vitest run --coverage && vite build". This command performs two essential tasks:

1. Running Tests with Vitest: The first part, vitest run --coverage, involves running the application's test suite using Vitest, a Vite-native test runner. This step ensures that all tests pass, providing a 'sanity check' to catch any bugs or issues before the deployment proceeds. The --coverage flag also generates a code coverage report, offering insights into the extent to which the codebase is covered by tests.

2. Building the Application with Vite: The second part of the command, vite build, triggers Vite to compile and bundle the application. Vite's build process is optimized for performance, resulting in a highly efficient production build. This process generates a build directory containing the compiled static files ready for deployment.

Including this predeploy step in the GitHub Actions workflow ensures that the deployed application is not only up-to-date but also thoroughly tested and optimized for production. This reflects best practices in modern web development, emphasizing the importance of testing and build quality in continuous deployment processes.

Workflow of Continuous Deployment

1. Develop and Commit: Write your code and commit changes to your repository.

2. Automated Tests (CI): Upon each commit, GitHub Actions can run tests to ensure code quality and functionality.

3. Build: For a statically generated site, a build process compiles the source code into static files.

4. Deploy (CD): The script automatically deploys the built site to a hosting service, in this case, GitHub Pages.

5. Monitor and Update: Continuously monitor the deployment for any issues and make updates as necessary.

Benefits and Best Practices

• Speed and Efficiency: Automated deployments save time and reduce manual errors.

• Reliability: Continuous integration ensures that your code is tested, making deployments more reliable.

• Documentation: Always document your CI/CD process for clarity and maintainability.

Examples and Further Reading

• GitHub Actions Documentation: GitHub Actions

• CI/CD Best Practices: Continuous Integration and Continuous Deployment

• Static Site Deployment Example: Deploying a Static Site to GitHub Pages

• An Example Companion CI Script: GitHub Actions CI Script

• Continuous Integration Explanation and Examples - Streamlining Your JavaScript Development with GitHub Actions for Continuous Integration

This workflow showcases the power of GitHub Actions in automating and simplifying the deployment process, making it an essential tool for modern web development.