Nap Joseph Calub

Vercel is a popular cloud service platform designed for hosting Next.js applications. While it offers free hosting for personal repositories, it doesn't allow deploying from repositories inside a GitHub Organization unless you subscribe to a paid plan.

In this blog post, we'll create a GitHub Action that duplicates the content of a repository inside a GitHub Organization to a repository in your personal GitHub account, allowing you to leverage Vercel's free hosting services.

##Prerequisites

• A personal GitHub account
• A repository within a GitHub Organization (source repository)
• A separate repository in your personal account to host the copied files (destination repository)

##Step 1: Generate SSH Keys

You'll need to generate an SSH Deploy Key to securely push your content from the organization's repository to the external repository. Although you can also use a Personal Access Token, an SSH deploy key is recommended as it minimizes the impact of potential security breaches.

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

Replace the <desitination-repo-name> with the name of your destination repository and run the command. Afterwards, you should now have both public and private key files:

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

##Step 2: Add the private key to the Source Repository

1. Visit the source repository's GitHub page.
2. Click on "Settings" in the repository (not account settings).
3. In the left-hand pane, click "Secrets", then "Actions".
4. Click on "New repository secret".
5. Name it SSH_DEPLOY_KEY and paste the contents of the private key file.
6. Click "Save".

##Step 3: Add the public key to the Destination Repository

1. Visit the destination repository's GitHub page.
2. Click on "Settings" in the repository (not account settings).
3. In the left-hand side pane, click on "Deploy keys."
4. Click on "Add deploy key".
5. Paste the contents of the public key file.
6. Enable "Allow write access".
7. Click "Save".

##Step 4: Disable GitHub Actions on the Destination Repository

1. Visit the destination repository's GitHub page.
2. Click on "Settings" in the repository (not account settings).
3. Click on "Actions" and then "General".
4. Select "Disable actions".
5. Click "Save".

##Step 5: Create a GitHub Action Workflow

Create a new GitHub Action workflow in your source repository by adding a YAML file in the .github/workflows directory. Name the file push-to-external-repo.yml and paste the following content:

.github/workflows/push-to-external-repo.yml
1name: (main) push to external repo
2on:
3  push:
4    branches:
5      - main
6jobs:
7  push-to-external-repo:
8    runs-on: ubuntu-latest
9    steps:
10      - name: checkout repository
11        uses: actions/checkout@v3
12      - name: push to external repository
13        uses: peaceiris/actions-gh-pages@v3
14        with:
15          deploy_key: ${{ secrets.SSH_DEPLOY_KEY }}
16          publish_dir: .
17          external_repository: <your-username>/<destination-repo-name>
18          publish_branch: main
19          allow_empty_commit: true

Replace <your-username> with your GitHub username and <destination-repo-name> with the name of the external repository in your personal account. This action will copy everything from your organization's repository to your personal repository, including your GitHub Action workflows, so follow Step 4 to disable GitHub Actions on the destination repository.

##Step 6: Run your workflow

Push something to your main branch and see it be pushed to your <your-username>/<destination-repo-name> repository.

##Step 7: Set up a project on Vercel

1. On Vercel's "New Project" page, choose the account linked to the project under the "Import Git Repository" section.
2. Find your personal repository in the list and select "Import".
3. Vercel will automatically detect the framework and any necessary build settings. You can configure project settings, including build and development settings and environment variables, at this stage or later.
4. Click the "Deploy" button. Vercel will create the project and deploy it based on the chosen configurations.