Deploying a Repository Inside a GitHub Organization to Vercel Using GitHub Actions

November 26, 2024 (1mo ago)

Ever tried deploying a GitHub Organization repo to Vercel and hit a paywall? Yeah, that can be frustrating. While Vercel is awesome for hosting Next.js apps and offers free hosting for personal repos, they'll ask you to upgrade to a paid plan if you want to deploy from an organization's repository.

But don't worry! I've got a workaround for you. We'll set up a GitHub Action that copies your org's repository content to your personal GitHub account. This way, you can still use Vercel's free hosting. Pretty neat, right?

What you'll need

  • A GitHub account (your personal one)
  • A repo inside a GitHub Organization (we'll call this the source)
  • Another repo in your personal account (this is where we'll copy everything)

Heads up! While this solution works great for many cases, make sure you're careful with sensitive data if you're handling any.

Step 1: Create SSH Keys

First things first, we need to set up an SSH Deploy Key. This is how we'll securely push stuff from your org's repo to your personal one. Sure, you could use a Personal Access Token, but an SSH deploy key is safer - if something goes wrong, the damage is limited.

Here's what you need to run:

ssh-keygen -t ed25519 -C "$(git config user.email)" -N "" -f github-<desitination-repo-name>

Just swap <desitination-repo-name> with whatever you named your personal repo. After running this, you'll get two files:

  • github-<desitination-repo-name>.pub (the public one)
  • github-<desitination-repo-name> (the private one)

Step 2: Add the Private Key to Your Source Repo

  1. Head over to your source repo on GitHub
  2. Click "Settings"
  3. Look for "Secrets" in the sidebar, then "Actions"
  4. Hit "New repository secret"
  5. Call it SSH_DEPLOY_KEY and paste your private key in there
  6. Save it!

Step 3: Add the Public Key to Your Personal Repo

  1. Go to your personal repo
  2. Hit "Settings"
  3. Find "Deploy keys" in the sidebar
  4. Click "Add deploy key"
  5. Paste in your public key
  6. Make sure to check "Allow write access"
  7. Save it!

Step 4: Turn Off GitHub Actions in Your Personal Repo

This is important! We don't want our actions running twice:

  1. Go to your personal repo
  2. Click "Settings"
  3. Find "Actions" then "General"
  4. Pick "Disable actions"
  5. Save those changes!

Step 5: Set Up the GitHub Action

Now for the fun part! Create a new file in your source repo at .github/workflows/push-to-external-repo.yml and drop this in:

name: (main) push to external repo
on:
  push:
    branches:
      - main
jobs:
  push-to-external-repo:
    runs-on: ubuntu-latest
    steps:
      - name: checkout repository
        uses: actions/checkout@v3
      - name: push to external repository
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.SSH_DEPLOY_KEY }}
          publish_dir: .
          external_repository: <your-username>/<destination-repo-name>
          publish_branch: main
          allow_empty_commit: true

Don't forget to replace <your-username> with your actual GitHub username and <destination-repo-name> with your personal repo's name!

Step 6: Test it Out!

Push something to your main branch and watch the magic happen - your changes should show up in your personal repo automatically!

Step 7: Set Up on Vercel

Almost done! Here's how to get it live on Vercel:

  1. Go to Vercel's "New Project" page
  2. Pick your account under "Import Git Repository"
  3. Find your personal repo and click "Import"
  4. Vercel's pretty smart - it'll figure out most settings automatically
  5. Hit "Deploy" and you're good to go! 🚀