Automating Periodic Vercel Deployments with GitHub Actions

Introduction

Recently, I built our company tech blog using the Team Blog Hub created by catnose99.

https://tech.kadinche.com/

Since Team Blog Hub is developed with Next.js, I decided to use Vercel for deployment. To keep the articles updated automatically, I set up a periodic build process using GitHub Actions. I also configured a custom domain.

In this article, I will summarize the steps for building and deploying a Vercel project using GitHub Actions. As a bonus, I will also cover how to configure a custom domain in Vercel and the operational strategy we use for our Team Blog Hub.

Please note that this article is based on the following prerequisites:

• You have signed up for Vercel
  • If you haven't, you can sign up here
• You have created a project in Vercel
  • If you haven't, you can create one here
• You have linked your repository to the project using Vercel's GitHub integration

Operating Environment

• Node.js v15.6.0
• Vercel CLI 21.1.0

Preparing for Vercel Deployment via GitHub Actions

First, you need to set up the environment for building and deploying to Vercel using GitHub Actions. To do this, you must obtain the necessary information from Vercel in advance.

Obtaining the Token Required for Vercel Deployment

After logging into Vercel, navigate to the token generation screen from the icon in the top right corner of the home page.

Click the Settings menu from the icon in the top right corner of the home page

Generate a token and keep note of it (you will need it for Vercel deployment in GitHub Actions)

The generated token will be used during deployment in GitHub Actions.

Obtaining Information Required for Vercel Deployment

Vercel provides an official CLI, so please install it first. The installation commands are as follows:

# Using npm
npm i -g vercel

# Using yarn
yarn global add vercel

After that, run the vercel command at the root of the GitHub repository linked to your Vercel project and follow the instructions to link it to your Vercel project. Once the command runs successfully, you should see that a .vercel/project.json file has been generated.

The .vercel/project.json file contains the vercel-project-id and vercel-org-id required for deployment via GitHub Actions.

.vercel/project.json

{"projectId":"<content of vercel-project-id>","orgId":"<content of vercel-org-id>"}

We will register the above information in the Secrets of your GitHub repository.

Automating Vercel Deployment with GitHub Actions

Register the contents of .vercel/project.json in your GitHub repository's Secrets. In this case, we will register ORG_ID, PROJECT_ID, and VERCEL_TOKEN.

Key	Value
ORG_ID	orgId from .vercel/project.json
PROJECT_ID	projectId from .vercel/project.json
VERCEL_TOKEN	Token generated in Vercel

Register the necessary values for deploying to Vercel via GitHub Actions as Secrets

Once the required information is registered in Secrets, create a GitHub Actions workflow file. In this guide, we will use the Vercel Action, which is developed by volunteers.

deploy_website.yml

name: deploy website
on:
  # Make it possible to run GitHub Actions manually for confirmation
  # Passing the ref during checkout as an argument
  # Specify the default branch set in the repository for the default part
  workflow_dispatch:
    inputs:
      ref:
        description: branch|tag|SHA to checkout
        default: 'main'
        required: true
  # GitHub Actions will run at 11:00 AM JST every day (cron time is in UTC)
  # The branch referenced during execution will be the one specified in the default above
  schedule:
    - cron:  '0 2 * * *'
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          ref: ${{ github.event.inputs.ref }}
      - uses: actions/setup-node@v2
        with:
          node-version: '15'
      # Run npm run build:posts to update the content
      - name: Recreate all posts
        shell: bash
        run: |
          npm install
          npm run build:posts
      - uses: amondnet/vercel-action@v20
        with:
          # Set the various parameters required for Vercel deployment
          # by referencing the values created in GitHub Actions Secrets
          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
          vercel-args: '--prod' # Optional
          vercel-org-id: ${{ secrets.ORG_ID}}  #Required
          vercel-project-id: ${{ secrets.PROJECT_ID}} #Required
          working-directory: ./

Once you have created the file above, commit it to the default branch of your GitHub repository and try running the GitHub Actions workflow manually to verify that it deploys correctly.

After navigating to your GitHub repository page, try running the GitHub Actions workflow

Check if the GitHub Actions workflow is running

Confirm that the GitHub Actions workflow has completed successfully

Once you have confirmed that GitHub Actions is running normally, verify whether the deployment has completed successfully on the Vercel side. Navigate to the Vercel home page, go to the relevant project page, and check the deployment history from the Deployments tab.

Go to the relevant project page in Vercel and check the deployment history

This completes the process. Great job!

(Bonus) Linking a Custom Domain

Vercel features a Custom Domains functionality for linking your own domain. By using this, you can allow access to your Vercel project via a custom domain.

By simply adding an A record for a root domain or a CNAME record for a subdomain to your domain's DNS record settings, you can enable HTTPS access via your custom domain.

Set up Custom Domains to allow access via your own domain (method when setting up a subdomain)

Once the Custom Domains status becomes Valid Configuration, verify that the Vercel-deployed page appears when you access the custom domain you configured.

(Bonus) Actual Operation of Team Blog Hub

After discussing within our company, we decided to operate the repository such that the master branch reflects the latest content from the original repository, and the release branch is used for actual deployments.

By separating it from the master branch and incorporating our company's unique modifications into the release branch, we gain the benefit of making it easier to submit pull requests to the original repository. Another advantage is that we can take our time in pulling the latest master branch updates from the upstream repository.

Separating the branches is recommended because it allows you to enjoy the benefits of easily incorporating new features from the latest upstream repository while also enabling you to commit your own custom modifications to the release branch with peace of mind.

Conclusion

Using Team Blog Hub, we were able to easily build our company tech blog with a stylish design. I am truly grateful to catnose for making this available as OSS 🙏🏻

We will gratefully utilize Team Blog Hub to keep our company tech blog updated without strain, and we hope to actively look for opportunities to send PRs 🔫

Reference Links

• catnose99/team-blog-hub: RSS based blog starter kit for teams
• Introduction to Vercel - Vercel Documentation
• Vercel Action · Actions · GitHub Marketplace