Automating Astro Deployments to GitHub Pages with GitHub Actions

Project Context

For our alma-srl-ingenieria project, maintaining a static site efficiently is key. Traditionally, deploying updates to static content could involve manual steps, which are prone to errors and consume valuable developer time. To streamline this process and ensure consistent, fast deployments, we've implemented an automated CI/CD pipeline using GitHub Actions for our Astro-based website.

The Power of Automation

Automating the deployment of static sites dramatically improves development workflows. It ensures that every code change pushed to the main branch is automatically built and published, reducing the risk of manual errors and accelerating the delivery of updates to users. GitHub Actions provides a powerful, flexible, and integrated solution for this.

Setting Up the GitHub Pages Workflow

Our deployment pipeline is defined in a .github/workflows YAML file. This file orchestrates the necessary steps to build the Astro project and publish it to GitHub Pages. The workflow consists of two main jobs: build and deploy.

Step 1: Trigger and Permissions

The workflow is triggered on push events to the main branch. It also requires specific permissions to allow GitHub Actions to manage Pages deployments.

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

Step 2: Build the Astro Project

The build job is responsible for setting up the environment, installing dependencies, and compiling the Astro site. It uses actions/checkout to get the repository code and actions/setup-node to configure the Node.js environment. After installing project dependencies, npm run build generates the static assets.

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build Astro project
        run: npm run build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

Step 3: Deploy to GitHub Pages

The deploy job runs after the build job completes successfully. It leverages GitHub's built-in actions for Pages deployment. actions/deploy-pages takes the previously uploaded build artifact and publishes it to the designated GitHub Pages site.

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Results

With this GitHub Actions workflow, any commit to the main branch of alma-srl-ingenieria now automatically triggers a full build and deployment of the Astro website to GitHub Pages. This ensures that our project's public presence is always up-to-date with the latest code, delivered rapidly and reliably.

Next Steps

Consider enhancing this workflow further by adding linting or testing steps before the build process to catch issues earlier. You could also explore deploying to different environments (e.g., staging) for pull requests to allow for previewing changes before merging to main.

Generated with Gitvlg.com