Deploy to Vercel with Github Actions

I ran into an annoying Vercel issue where they apparently don’t let you have a Github account associated with multiple Vercel accounts. Which is problematic for me because we use Vercel at work and I use my personal Github account at work. I realized this when I tried to set up a project at work with automatic Github deployments enabled. I had to disconnect Github from my personal Vercel account for it to work.

I use Vercel for Github and automatic deploys with this site and I didn’t want to have to disconnect Github from my work Vercel account every time I deploy this site. So, I switched to deploying via Github actions. To set it up, here’s what to do.

Copy the below to .github/workflows/vercel-production.yml

name: Vercel Production Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - main
jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Deploy Project to Vercel
        run: vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}

Then, add the following secrets to your Github repository:

• VERCEL_PROJECT_ID: In Vercel, under your project, click the Settings tab, then General > Project ID
• VERCEL_ORG_ID: In Vercel, click on your avatar in the top right. Then under Account Settings > General > Vercel ID
• VERCEL_TOKEN: In Vercel, click on your avatar in the top right. Then under Account Settings > Tokens

And from then on, pushes to your main branch will trigger a deployment to Vercel.