Yiork · June 1, 2025 07:35 · Sep 29, 2024 · Sep 20, 2024 · Apr 21, 2024 · May 17, 2023
diff --git a/vercel.md b/vercel.md
@@ -14,7 +14,7 @@ jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - env:
           CLIENT_EMAIL: ${{ secrets.CLIENT_EMAIL }}
           PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
@@ -84,7 +84,7 @@ jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: amondnet/vercel-action@v20
         with:
           vercel-token: ${{ secrets.VERCEL_TOKEN }}
@@ -108,7 +108,7 @@ jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: amondnet/vercel-action@v20
         id: vercel-deploy
         with:
@@ -142,9 +142,11 @@ Between the `checkout` and `vercel-action`, add the env variable setting in your
           CLIENT_EMAIL: ${{ secrets.CLIENT_EMAIL }}
           TARGET_CLIENT_EMAIL: preview,development,production
           TYPE_CLIENT_EMAIL: encrypted
+
           PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
           TARGET_PRIVATE_KEY: preview,development,production
           TYPE_PRIVATE_KEY: encrypted
+
           SPREADSHEET_ID: ${{ secrets.EVENTS_APP_SPREADSHEET_ID }}
           TARGET_SPREADSHEET_ID: preview,development,production
           TYPE_SPREADSHEET_ID: encrypted
@@ -160,7 +162,7 @@ jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: dkershner6/vercel-set-env-action@v1
         with:
           token: ${{ secrets.VERCEL_TOKEN }}
@@ -170,20 +172,93 @@ jobs:
           CLIENT_EMAIL: ${{ secrets.CLIENT_EMAIL }}
           TARGET_CLIENT_EMAIL: preview,development,production
           TYPE_CLIENT_EMAIL: encrypted
+
           PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
           TARGET_PRIVATE_KEY: preview,development,production
           TYPE_PRIVATE_KEY: encrypted
+
           SPREADSHEET_ID: ${{ secrets.EVENTS_APP_SPREADSHEET_ID }}
           TARGET_SPREADSHEET_ID: preview,development,production
           TYPE_SPREADSHEET_ID: encrypted
+
+      - uses: amondnet/vercel-action@v20
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-args: '--prod'
+          vercel-org-id: ${{ secrets.ORG_ID }}
+          vercel-project-id: ${{ secrets.PROJECT_ID }}
+```
+
+### Additional consideration: teams
+This gist was originally intended for projects that wanted to deploy to a Vercel personal account to avoid the organization team requirement and the costs associated with that.
+
+Still, there is a use case for projects with multiple contributors that want to pay for Vercel pro (for increased bandwidth, lambda hours, etc.) but don't want to pay for pro for all contributors to the project. By default, Vercel's GitHub integration refuses to deploy commits by authors not part of the Vercel team.
+
+In that case, we can use this CI to deploy the project instead. All the previous steps remain the same, but in the action set the vercel-action `scope` to the `ORG_ID` from earlier:
+```yml
+# vercel-merge.yml
+name: Deploy to vercel on merge
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: amondnet/vercel-action@v20
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-args: '--prod'
+          vercel-org-id: ${{ secrets.ORG_ID }}
+          vercel-project-id: ${{ secrets.PROJECT_ID }}
+          scope: ${{ secrets.ORG_ID }}
+```
+Similarly, for environment variables, set the vercel-set-env-action `teamId` to the `ORG_ID` from earlier:
+```yml
+# vercel-merge.yml
+name: Deploy to vercel on merge
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dkershner6/vercel-set-env-action@v3
+        with:
+          token: ${{ secrets.VERCEL_TOKEN }}
+          teamId: ${{ secrets.ORG_ID }}
+          projectName: events-app
+          envVariableKeys: CLIENT_EMAIL,PRIVATE_KEY,SPREADSHEET_ID
+        env:
+          CLIENT_EMAIL: ${{ secrets.CLIENT_EMAIL }}
+          TARGET_CLIENT_EMAIL: preview,development,production
+          TYPE_CLIENT_EMAIL: encrypted
+
+          PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
+          TARGET_PRIVATE_KEY: preview,development,production
+          TYPE_PRIVATE_KEY: encrypted
+
+          SPREADSHEET_ID: ${{ secrets.EVENTS_APP_SPREADSHEET_ID }}
+          TARGET_SPREADSHEET_ID: preview,development,production
+          TYPE_SPREADSHEET_ID: encrypted
+
       - uses: amondnet/vercel-action@v20
         with:
           vercel-token: ${{ secrets.VERCEL_TOKEN }}
           github-token: ${{ secrets.GITHUB_TOKEN }}
           vercel-args: '--prod'
           vercel-org-id: ${{ secrets.ORG_ID }}
           vercel-project-id: ${{ secrets.PROJECT_ID }}
+          scope: ${{ secrets.ORG_ID }}
 ```
+and make the same fixes to the pull request action, if needed.
 
 [^1]: This is contrary to what is stated in `vercel-action`'s README about skipping Vercel's build step, but for a Next.js project I found it hard to build locally (in the action) and deploy the built output to Vercel while still having it deploy the project as your selected framework. Easier is to just deploy the whole project and let Vercel build it for you.
 [^2]: `vercel-action`'s README contains more info about additional options you can pass, and the Vercel CLI docs contain more info about flags you can pass to `vercel-args`. Here, passing [`--prod`](https://vercel.com/docs/cli#introduction/unique-options/prod) to `vercel-args` deploys the project to a production domain instead of a temporary commit-specific preview URL.
diff --git a/vercel.md b/vercel.md
@@ -114,8 +114,8 @@ jobs:
         with:
           vercel-token: ${{ secrets.VERCEL_TOKEN }}
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          vercel-org-id: ${{ secrets.ORG_ID}}
-          vercel-project-id: ${{ secrets.PROJECT_ID}}
+          vercel-org-id: ${{ secrets.ORG_ID }}
+          vercel-project-id: ${{ secrets.PROJECT_ID }}
       - name: preview-url
         run: |
           echo ${{ steps.vercel-deploy.outputs.preview-url }}
@@ -149,7 +149,7 @@ Between the `checkout` and `vercel-action`, add the env variable setting in your
           TARGET_SPREADSHEET_ID: preview,development,production
           TYPE_SPREADSHEET_ID: encrypted
 ```
-The full workflow file should look something like this:
+The full workflow file should look something like this (make sure to replace the `projectName` with your project's name on Vercel):
 ```yml
 name: Deploy to vercel on merge
 on:
@@ -181,8 +181,8 @@ jobs:
           vercel-token: ${{ secrets.VERCEL_TOKEN }}
           github-token: ${{ secrets.GITHUB_TOKEN }}
           vercel-args: '--prod'
-          vercel-org-id: ${{ secrets.ORG_ID}}
-          vercel-project-id: ${{ secrets.PROJECT_ID}}
+          vercel-org-id: ${{ secrets.ORG_ID }}
+          vercel-project-id: ${{ secrets.PROJECT_ID }}
 ```
 
 [^1]: This is contrary to what is stated in `vercel-action`'s README about skipping Vercel's build step, but for a Next.js project I found it hard to build locally (in the action) and deploy the built output to Vercel while still having it deploy the project as your selected framework. Easier is to just deploy the whole project and let Vercel build it for you.

diff --git a/vercel.md b/vercel.md
@@ -26,9 +26,10 @@ jobs:
           publish_dir: './out'
 ```
 However, GitHub pages only serves static files, which means you'll have to [export your app as static](https://nextjs.org/docs/advanced-features/static-html-export).
-In the process, you'll lose access to server-only features like server-side rendering, API routes, dynamic routes, incremental static regen, and so on.
+In the process, you'll lose access to server-only features like server-side rendering, API routes, dynamic routes, and so on.
+
+Unlike GitHub pages however, hosting with Vercel supports a plethora of frameworks and all their advanced, server-dependent features. Best of all, it is completely free for hobby users.
 
-Unlike GitHub pages however, hosting with Vercel supports a plethora of frameworks and all their advanced, server-dependent features, and, best of all, it is completely free for hobby users.
 The issue lies with trying to deploy a repository from a GitHub organization.
 Typically, deploying a project on Vercel only involves importing a git repository, but attempting to import a repository owned by an organization will prompt Vercel to create a team, a feature only available to pro-plan users (at [$20/month per user](https://vercel.com/pricing)).
 
@@ -38,7 +39,7 @@ If you don't need the advanced features provided by the pro plan and can't affor
 
 ### The solution
 The idea is to use GitHub actions as our CI and deploy the project through your personal (hobby) subscription via the [Vercel CLI](https://vercel.com/docs/cli).
-Full docs on the CLI are linked, but all we need to do locally is create and link the project to Vercel.
+Full docs on the CLI are linked, but all we need to do locally is to create and link the project to Vercel.
 
 Install the Vercel CLI by running
 ```
@@ -51,22 +52,21 @@ vercel
 The CLI will prompt you about project details; when asked for a deployment scope, choose your own username. 
 This should initialize the project on Vercel under your personal account, and automatically detect and configure the framework and build presets.
 
-![image](https://user-images.githubusercontent.com/60120929/184037782-feab04a7-bb28-43cb-9910-90f023254583.png)
+![image](https://gist.github.com/assets/60120929/3d26d90b-c33b-4f46-9c72-8e1dbe7a31be)
 
-After successfully initializing a project, the CLI will create a `.vercel` directory containing your generated `project.json`.
-The file should look something like this:
+After successfully initializing a project, the CLI will create a `.vercel` directory containing a generated `project.json` that looks something like this:
 ```json
 {"orgId": "...", "projectId": "..."}
 ```
 
 ### GitHub actions
 To automatically deploy our project to Vercel on push, we'll use [amondnet/vercel-action](https://github.com/amondnet/vercel-action).
-A typical GitHub pages action builds the project to static files and then commits the built files to the `gh-pages` branch to be deployed by GitHub pages.
-For Vercel however, we want to deploy our unbuilt project to Vercel, then let Vercel handle the build and deployment[^1].
+
+A typical GitHub pages action builds the project to static files and then commits the built files to the `gh-pages` branch to be deployed by GitHub pages; for Vercel however, we want to deploy our unbuilt project to Vercel, then let Vercel handle the build and deployment[^1].
 
 To use `vercel-action` you'll need a **Vercel Account Token**, which you can create [here](https://vercel.com/account/tokens).
 
-![image](https://user-images.githubusercontent.com/60120929/184039810-14ff842e-57f1-4787-8ea7-f6d0dbe63360.png)
+![image](https://gist.github.com/assets/60120929/2513ea09-254a-4f00-9e0f-44081ef2cc67)
 
 When created, add your `orgId` and `projectId` from `project.json` and your account token as repository secrets.
 
@@ -93,7 +93,7 @@ jobs:
           vercel-org-id: ${{ secrets.ORG_ID}}
           vercel-project-id: ${{ secrets.PROJECT_ID}}
 ```
-The action should function like Vercel's GitHub CI, deploying each new commit to Vercel and commenting on successful pushes.
+The action should mimic Vercel's GitHub CI, deploying each new commit to Vercel and commenting on successful pushes.
 
 ### Additional consideration: preview URLs
 The vercel CLI can also generate preview URLs for pull requests.
@@ -124,6 +124,8 @@ The above workflow will run on all pull requests to `main`, generating a preview
 
 ![image](https://user-images.githubusercontent.com/60120929/200466826-b86843aa-432d-4176-ade2-441927168aa6.png)
 
+*(Note that unlike Vercel's actual CI preview URLs, these URLs are associated with a commit and not an entire pull request. Therefore, the URL will change every time a new push is made to the pull request branch.)*
+
 ### Additional consideration: environment variables
 If you're using GitHub secrets to pass environment variables to your project at build time, letting Vercel handle project building means you can no longer do so.
 Instead, you should set the environment variables within Vercel with [dkershner6/vercel-set-env-action](https://github.com/dkershner6/vercel-set-env-action).

diff --git a/vercel.md b/vercel.md
@@ -34,7 +34,7 @@ Typically, deploying a project on Vercel only involves importing a git repositor
 
 ![image](https://user-images.githubusercontent.com/60120929/184037575-4d0a576d-db9f-4a14-8973-be2b41b858c0.png)
 
-If we don't need the advanced features provided by the pro plan and can't afford such a steep cost for a small project, this is a problem.
+If you don't need the advanced features provided by the pro plan and can't afford such a steep cost for a small project, this is a problem.
 
 ### The solution
 The idea is to use GitHub actions as our CI and deploy the project through your personal (hobby) subscription via the [Vercel CLI](https://vercel.com/docs/cli).

diff --git a/vercel.md b/vercel.md
@@ -95,7 +95,36 @@ jobs:
 ```
 The action should function like Vercel's GitHub CI, deploying each new commit to Vercel and commenting on successful pushes.
 
-### Additional considerations: environment variables
+### Additional consideration: preview URLs
+The vercel CLI can also generate preview URLs for pull requests.
+```yml
+# vercel-pull-request.yml
+name: Create vercel preview URL on pull request
+on:
+  pull_request:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: amondnet/vercel-action@v20
+        id: vercel-deploy
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-org-id: ${{ secrets.ORG_ID}}
+          vercel-project-id: ${{ secrets.PROJECT_ID}}
+      - name: preview-url
+        run: |
+          echo ${{ steps.vercel-deploy.outputs.preview-url }}
+```
+The above workflow will run on all pull requests to `main`, generating a preview URL for each that's updated for the latest commit on the branch.
+
+![image](https://user-images.githubusercontent.com/60120929/200466826-b86843aa-432d-4176-ade2-441927168aa6.png)
+
+### Additional consideration: environment variables
 If you're using GitHub secrets to pass environment variables to your project at build time, letting Vercel handle project building means you can no longer do so.
 Instead, you should set the environment variables within Vercel with [dkershner6/vercel-set-env-action](https://github.com/dkershner6/vercel-set-env-action).
 

diff --git a/vercel.md b/vercel.md
@@ -1,8 +1,36 @@
 This gist was partially inspired by [this blog about Next.js Vercel CI with GitHub actions](https://dev.to/chuddyjoachim/nextjs-ci-cd-on-vercel-with-github-actions-7g7).
 
 ### The problem
-Unlike a static hosting service like GitHub pages, Vercel hosting supports advanced framework features like API routes, dynamic routes, and ISR. 
-Typical hosting with Vercel only involves importing a git repository, but attempting to import a repository owned by an organization will prompt Vercel to create a team, a feature only available to pro-plan users (at [$20/month per user](https://vercel.com/pricing)).
+An easy way to deploy and host websites for free is to use GitHub pages. 
+If you've deployed a Next.js project to GitHub pages, you may have used a GitHub action similar to this in the past to automatically redeploy the site when a new commit is pushed:
+```yml
+# gh-pages-merge.yml
+name: Deploy to gh-pages on merge
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - env:
+          CLIENT_EMAIL: ${{ secrets.CLIENT_EMAIL }}
+          PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
+          SPREADSHEET_ID: ${{ secrets.EVENTS_APP_SPREADSHEET_ID }}
+        run: npm ci && CI=false npm run build && npm run export
+      - uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: './out'
+```
+However, GitHub pages only serves static files, which means you'll have to [export your app as static](https://nextjs.org/docs/advanced-features/static-html-export).
+In the process, you'll lose access to server-only features like server-side rendering, API routes, dynamic routes, incremental static regen, and so on.
+
+Unlike GitHub pages however, hosting with Vercel supports a plethora of frameworks and all their advanced, server-dependent features, and, best of all, it is completely free for hobby users.
+The issue lies with trying to deploy a repository from a GitHub organization.
+Typically, deploying a project on Vercel only involves importing a git repository, but attempting to import a repository owned by an organization will prompt Vercel to create a team, a feature only available to pro-plan users (at [$20/month per user](https://vercel.com/pricing)).
 
 ![image](https://user-images.githubusercontent.com/60120929/184037575-4d0a576d-db9f-4a14-8973-be2b41b858c0.png)
 

diff --git a/vercel.md b/vercel.md
@@ -1,22 +1,22 @@
-This gist was partially inspired by [this blog about Next.js vercel CI with GitHub actions](https://dev.to/chuddyjoachim/nextjs-ci-cd-on-vercel-with-github-actions-7g7).
+This gist was partially inspired by [this blog about Next.js Vercel CI with GitHub actions](https://dev.to/chuddyjoachim/nextjs-ci-cd-on-vercel-with-github-actions-7g7).
 
 ### The problem
 Unlike a static hosting service like GitHub pages, Vercel hosting supports advanced framework features like API routes, dynamic routes, and ISR. 
-Typical hosting with vercel only involves importing a git repository, but attempting to import a repository owned by an organization will prompt vercel to create a team, a feature only available to pro-plan users (at [$20/month per user](https://vercel.com/pricing)).
+Typical hosting with Vercel only involves importing a git repository, but attempting to import a repository owned by an organization will prompt Vercel to create a team, a feature only available to pro-plan users (at [$20/month per user](https://vercel.com/pricing)).
 
 ![image](https://user-images.githubusercontent.com/60120929/184037575-4d0a576d-db9f-4a14-8973-be2b41b858c0.png)
 
 If we don't need the advanced features provided by the pro plan and can't afford such a steep cost for a small project, this is a problem.
 
 ### The solution
 The idea is to use GitHub actions as our CI and deploy the project through your personal (hobby) subscription via the [Vercel CLI](https://vercel.com/docs/cli).
-Full docs on the CLI are linked, but all we need to do locally is create and link the project to vercel.
+Full docs on the CLI are linked, but all we need to do locally is create and link the project to Vercel.
 
-Install the vercel CLI by running
+Install the Vercel CLI by running
 ```
 npm i -g vercel
 ```
-and in your project directory, link it to vercel by running
+and in your project directory, link it to Vercel by running
 ```
 vercel
 ```
@@ -32,11 +32,11 @@ The file should look something like this:
 ```
 
 ### GitHub actions
-To automatically deploy our project to vercel on push, we'll use [amondnet/vercel-action](https://github.com/amondnet/vercel-action).
+To automatically deploy our project to Vercel on push, we'll use [amondnet/vercel-action](https://github.com/amondnet/vercel-action).
 A typical GitHub pages action builds the project to static files and then commits the built files to the `gh-pages` branch to be deployed by GitHub pages.
-For vercel however, we want to deploy our unbuilt project to vercel, then let vercel handle the build and deployment[^1].
+For Vercel however, we want to deploy our unbuilt project to Vercel, then let Vercel handle the build and deployment[^1].
 
-To use `vercel-action` you'll need a **vercel account token**, which you can create [here](https://vercel.com/account/tokens).
+To use `vercel-action` you'll need a **Vercel Account Token**, which you can create [here](https://vercel.com/account/tokens).
 
 ![image](https://user-images.githubusercontent.com/60120929/184039810-14ff842e-57f1-4787-8ea7-f6d0dbe63360.png)
 
@@ -65,11 +65,11 @@ jobs:
           vercel-org-id: ${{ secrets.ORG_ID}}
           vercel-project-id: ${{ secrets.PROJECT_ID}}
 ```
-The action should function like vercel's GitHub CI, deploying each new commit to vercel and commenting on successful pushes.
+The action should function like Vercel's GitHub CI, deploying each new commit to Vercel and commenting on successful pushes.
 
 ### Additional considerations: environment variables
-If you're using GitHub secrets to pass environment variables to your project at build time, letting vercel handle project building means you can no longer do so.
-Instead, you should set the environment variables within vercel with [dkershner6/vercel-set-env-action](https://github.com/dkershner6/vercel-set-env-action).
+If you're using GitHub secrets to pass environment variables to your project at build time, letting Vercel handle project building means you can no longer do so.
+Instead, you should set the environment variables within Vercel with [dkershner6/vercel-set-env-action](https://github.com/dkershner6/vercel-set-env-action).
 
 The `vercel-set-env-action` README explains how environment variables should be formatted in the action arguments.
 Between the `checkout` and `vercel-action`, add the env variable setting in your workflow like so:
@@ -126,5 +126,5 @@ jobs:
           vercel-project-id: ${{ secrets.PROJECT_ID}}
 ```
 
-[^1]: This is contrary to what is stated in `vercel-action`'s README about skipping vercel's build step, but for a Next.js project I found it hard to build locally (in the action) and deploy the built output to vercel while still having it deploy the project as your selected framework. Easier is to just deploy the whole project and let vercel build it for you.
-[^2]: `vercel-action`'s README contains more info about additional options you can pass, and the vercel CLI docs contain more info about flags you can pass to `vercel-args`. Here, passing [`--prod`](https://vercel.com/docs/cli#introduction/unique-options/prod) to `vercel-args` deploys the project to a production domain instead of a temporary commit-specific preview URL.
+[^1]: This is contrary to what is stated in `vercel-action`'s README about skipping Vercel's build step, but for a Next.js project I found it hard to build locally (in the action) and deploy the built output to Vercel while still having it deploy the project as your selected framework. Easier is to just deploy the whole project and let Vercel build it for you.
+[^2]: `vercel-action`'s README contains more info about additional options you can pass, and the Vercel CLI docs contain more info about flags you can pass to `vercel-args`. Here, passing [`--prod`](https://vercel.com/docs/cli#introduction/unique-options/prod) to `vercel-args` deploys the project to a production domain instead of a temporary commit-specific preview URL.
diff --git a/vercel.md b/vercel.md
@@ -67,5 +67,64 @@ jobs:
 ```
 The action should function like vercel's GitHub CI, deploying each new commit to vercel and commenting on successful pushes.
 
+### Additional considerations: environment variables
+If you're using GitHub secrets to pass environment variables to your project at build time, letting vercel handle project building means you can no longer do so.
+Instead, you should set the environment variables within vercel with [dkershner6/vercel-set-env-action](https://github.com/dkershner6/vercel-set-env-action).
+
+The `vercel-set-env-action` README explains how environment variables should be formatted in the action arguments.
+Between the `checkout` and `vercel-action`, add the env variable setting in your workflow like so:
+```yml
+      - uses: dkershner6/vercel-set-env-action@v1
+        with:
+          token: ${{ secrets.VERCEL_TOKEN }}
+          projectName: events-app
+          envVariableKeys: CLIENT_EMAIL,PRIVATE_KEY,SPREADSHEET_ID
+        env:
+          CLIENT_EMAIL: ${{ secrets.CLIENT_EMAIL }}
+          TARGET_CLIENT_EMAIL: preview,development,production
+          TYPE_CLIENT_EMAIL: encrypted
+          PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
+          TARGET_PRIVATE_KEY: preview,development,production
+          TYPE_PRIVATE_KEY: encrypted
+          SPREADSHEET_ID: ${{ secrets.EVENTS_APP_SPREADSHEET_ID }}
+          TARGET_SPREADSHEET_ID: preview,development,production
+          TYPE_SPREADSHEET_ID: encrypted
+```
+The full workflow file should look something like this:
+```yml
+name: Deploy to vercel on merge
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: dkershner6/vercel-set-env-action@v1
+        with:
+          token: ${{ secrets.VERCEL_TOKEN }}
+          projectName: events-app
+          envVariableKeys: CLIENT_EMAIL,PRIVATE_KEY,SPREADSHEET_ID
+        env:
+          CLIENT_EMAIL: ${{ secrets.CLIENT_EMAIL }}
+          TARGET_CLIENT_EMAIL: preview,development,production
+          TYPE_CLIENT_EMAIL: encrypted
+          PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
+          TARGET_PRIVATE_KEY: preview,development,production
+          TYPE_PRIVATE_KEY: encrypted
+          SPREADSHEET_ID: ${{ secrets.EVENTS_APP_SPREADSHEET_ID }}
+          TARGET_SPREADSHEET_ID: preview,development,production
+          TYPE_SPREADSHEET_ID: encrypted
+      - uses: amondnet/vercel-action@v20
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-args: '--prod'
+          vercel-org-id: ${{ secrets.ORG_ID}}
+          vercel-project-id: ${{ secrets.PROJECT_ID}}
+```
+
 [^1]: This is contrary to what is stated in `vercel-action`'s README about skipping vercel's build step, but for a Next.js project I found it hard to build locally (in the action) and deploy the built output to vercel while still having it deploy the project as your selected framework. Easier is to just deploy the whole project and let vercel build it for you.
 [^2]: `vercel-action`'s README contains more info about additional options you can pass, and the vercel CLI docs contain more info about flags you can pass to `vercel-args`. Here, passing [`--prod`](https://vercel.com/docs/cli#introduction/unique-options/prod) to `vercel-args` deploys the project to a production domain instead of a temporary commit-specific preview URL.
diff --git a/vercel.md b/vercel.md
@@ -0,0 +1,71 @@
+This gist was partially inspired by [this blog about Next.js vercel CI with GitHub actions](https://dev.to/chuddyjoachim/nextjs-ci-cd-on-vercel-with-github-actions-7g7).
+
+### The problem
+Unlike a static hosting service like GitHub pages, Vercel hosting supports advanced framework features like API routes, dynamic routes, and ISR. 
+Typical hosting with vercel only involves importing a git repository, but attempting to import a repository owned by an organization will prompt vercel to create a team, a feature only available to pro-plan users (at [$20/month per user](https://vercel.com/pricing)).
+
+![image](https://user-images.githubusercontent.com/60120929/184037575-4d0a576d-db9f-4a14-8973-be2b41b858c0.png)
+
+If we don't need the advanced features provided by the pro plan and can't afford such a steep cost for a small project, this is a problem.
+
+### The solution
+The idea is to use GitHub actions as our CI and deploy the project through your personal (hobby) subscription via the [Vercel CLI](https://vercel.com/docs/cli).
+Full docs on the CLI are linked, but all we need to do locally is create and link the project to vercel.
+
+Install the vercel CLI by running
+```
+npm i -g vercel
+```
+and in your project directory, link it to vercel by running
+```
+vercel
+```
+The CLI will prompt you about project details; when asked for a deployment scope, choose your own username. 
+This should initialize the project on Vercel under your personal account, and automatically detect and configure the framework and build presets.
+
+![image](https://user-images.githubusercontent.com/60120929/184037782-feab04a7-bb28-43cb-9910-90f023254583.png)
+
+After successfully initializing a project, the CLI will create a `.vercel` directory containing your generated `project.json`.
+The file should look something like this:
+```json
+{"orgId": "...", "projectId": "..."}
+```
+
+### GitHub actions
+To automatically deploy our project to vercel on push, we'll use [amondnet/vercel-action](https://github.com/amondnet/vercel-action).
+A typical GitHub pages action builds the project to static files and then commits the built files to the `gh-pages` branch to be deployed by GitHub pages.
+For vercel however, we want to deploy our unbuilt project to vercel, then let vercel handle the build and deployment[^1].
+
+To use `vercel-action` you'll need a **vercel account token**, which you can create [here](https://vercel.com/account/tokens).
+
+![image](https://user-images.githubusercontent.com/60120929/184039810-14ff842e-57f1-4787-8ea7-f6d0dbe63360.png)
+
+When created, add your `orgId` and `projectId` from `project.json` and your account token as repository secrets.
+
+![image](https://user-images.githubusercontent.com/60120929/184040005-1db870fe-61a0-4f2b-8f50-1a1285c6ef81.png)
+
+In the GitHub action, pass the secrets we created to `vercel-action`[^2]. The workflow file should look something like this:
+```yml
+# vercel-merge.yml
+name: Deploy to vercel on merge
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: amondnet/vercel-action@v20
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-args: '--prod'
+          vercel-org-id: ${{ secrets.ORG_ID}}
+          vercel-project-id: ${{ secrets.PROJECT_ID}}
+```
+The action should function like vercel's GitHub CI, deploying each new commit to vercel and commenting on successful pushes.
+
+[^1]: This is contrary to what is stated in `vercel-action`'s README about skipping vercel's build step, but for a Next.js project I found it hard to build locally (in the action) and deploy the built output to vercel while still having it deploy the project as your selected framework. Easier is to just deploy the whole project and let vercel build it for you.
+[^2]: `vercel-action`'s README contains more info about additional options you can pass, and the vercel CLI docs contain more info about flags you can pass to `vercel-args`. Here, passing [`--prod`](https://vercel.com/docs/cli#introduction/unique-options/prod) to `vercel-args` deploys the project to a production domain instead of a temporary commit-specific preview URL.