How to Deploy Websites with Vercel and GitHub Actions

name: Deploy Website
on:
  pull_request:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
          github-token: ${{ secrets.GITHUB_TOKEN }} # Optional
          vercel-args: '--prod' # Optional
          vercel-org-id: ${{ secrets.ORG_ID }} # Required
          vercel-project-id: ${{ secrets.PROJECT_ID }} # Required
          working-directory: ./sub-directory # Optional

vercel-action

This action makes a deployment with GitHub Actions instead of Vercel builder.

What is Vercel Action?​

The Vercel Action allows users to automate deployment through GitHub Actions for websites and web apps on Vercel. You can likewise manage custom domains, add comments for pull requests, and even enable basic authenticate deployments.

How to Use vercel-token​

To authenticate your deployment with Vercel, you need to provide a Vercel token.

with:
  vercel-token: ${{ secrets.VERCEL_TOKEN }}

You can generate a Vercel token from your Vercel account.

How to Comment on Pull Requests​

The action allows you to comment on pull requests automatically. Set github-comment to true or a custom string.

with:
  github-comment: true # Use default comment

Alternatively, you can provide a custom message:

with:
  github-comment: "Deployment preview available here"

How to Use vercel-org-id and vercel-project-id​

To deploy to a specific Vercel project, you need to specify the vercel-org-id and vercel-project-id. These can be found or linked using the Vercel CLI.

with:
  vercel-org-id: ${{ secrets.ORG_ID }}
  vercel-project-id: ${{ secrets.PROJECT_ID }}

How to Customize the Build Process with vercel-args​

You can control the deployment environment by passing arguments to the Vercel CLI, such as deploying to production.

with:
  vercel-args: '--prod'

How to Set the Working Directory​

If your project is not in the root directory, specify the working directory using the working-directory input.

with:
  working-directory: ./your-sub-directory

How to Alias Domains​

You can assign a domain to your deployment by using the alias-domains input. This is useful if you want to assign PR-specific or branch-specific URLs.

with:
  alias-domains: |
    staging.yourdomain.com
    pr-{{PR_NUMBER}}.yourdomain.com

Additional Configuration​

For further customization, you can explore the Vercel Action documentation and configure additional parameters such as environment variables and advanced deployment strategies.