Automating Your Portfolio Deployment with Astro and GitHub Actions

Introduction

For developers, maintaining an up-to-date personal portfolio is crucial. The Portfolio-Ana project represents a common scenario: a dynamic portfolio website built with Astro. The challenge often lies not in the initial build, but in the continuous deployment process. Manually deploying every change can be tedious and error-prone. This post will walk through how we streamlined the deployment for Portfolio-Ana by integrating GitHub Actions, ensuring every update is automatically published with minimal effort.

Prerequisites

To follow along, you'll need:

• An Astro project hosted on GitHub (like Portfolio-Ana).
• A basic understanding of Git and GitHub.
• Familiarity with YAML syntax for workflow configuration.

Step 1: Setting Up Your Astro Project

First, ensure your Astro project is ready for production builds. An Astro site typically generates static assets that can be easily deployed. Your project structure should be pushed to a GitHub repository, forming the foundation for our automated workflow. Make sure your package.json includes a build script that compiles your Astro site into its deployable output.

{
  "name": "my-astro-portfolio",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^4.0.0"
  }
}

Step 2: Configuring GitHub Actions

GitHub Actions workflows are defined in YAML files within the .github/workflows/ directory in your repository. To begin, create a new file, for example, deploy.yml, inside this directory. This file will contain the instructions for GitHub Actions to build and deploy your Astro project.

# .github/workflows/deploy.yml
name: Deploy Astro Portfolio

on:
  push:
    branches:
      - main # Trigger on pushes to the main branch

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

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

      # More steps will go here

Step 3: Defining the Deployment Workflow

Now, let's complete the build-and-deploy job. After checking out the code and setting up Node.js, we need to install project dependencies, build the Astro site, and then deploy the generated static files. A common deployment target for static sites is GitHub Pages, which leverages the gh-pages branch.

# .github/workflows/deploy.yml (continued)
...
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

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

      - name: Install dependencies
        run: npm ci

      - name: Build Astro project
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist # Or your Astro build output directory

This workflow first installs npm dependencies, then runs npm run build (which corresponds to your astro build command), and finally uses peaceiris/actions-gh-pages@v3 to publish the contents of the dist directory (Astro's default output) to the gh-pages branch.

Step 4: Triggering the Deployment

The on: push: branches: [main] configuration ensures that every time changes are pushed to your main branch, the GitHub Actions workflow is automatically triggered. This means no more manual intervention after merging a feature branch or pushing a direct update. Your Portfolio-Ana site will reflect the latest changes moments after they land in main.

Results

By implementing this simple GitHub Actions workflow, the Portfolio-Ana project achieved its first version deployment (Deploy First Version) with full automation. Future updates will now be seamless, reducing the operational overhead and allowing the developer to focus purely on content and features rather than deployment mechanics. This setup ensures consistency and reliability for the portfolio's online presence.

Next Steps

Consider enhancing this workflow further by adding steps for linting, testing, or even deploying to alternative static site hosting providers like Netlify or Vercel. You could also implement a separate workflow for pull requests to run checks before merging, ensuring code quality and preventing build failures in your main branch.

Generated with Gitvlg.com