In this article I will demonstrate how I automated deployment of my blog with GitHub Actions and Vercel Deploy Hooks.

I recently automated how my blog (available at josephmaina.com/blog) is deployed to Vercel when I add new content.

Before the automation, I had to manually trigger a rebuild by pushing code to the blog source code GitHub repo. Why is that?

The code for the blog and the blog articles (in markdown) live into two separate repos. (Exactly how I like it!) I've a repo for code, and a repo for content.

When I push a new article to the publish branch of the content repo, I had to push code to the main branch of the code repo for changes to take effect. That was very rough. If I push a new article and forget to push the code, the new article would never be seen.

The solution

I did my research and found out Vercel Deploy Hooks.

With Deploy Hooks, you can trigger a re-build of your site by sending a POST or a GET request to a unique URL linked to your project. The project neeeds to be connected to a Git repo.

And it hit me that I could set up a GitHub Actions workflow to send POST or GET requests to the unique URL from Vercel and trigger deployment for my blog.

All I needed was to (1) create the Deploy Hook, (2) create a GitHub Actions workflow and, (3) test the GitHub Actions workflow and Vercel Deploy Hooks.

Step 1: Create a Deploy Hook

1. Sign in to Vercel and navigate to your project.

2. Go to the Settings page of your project and then select the Git menu item.

3. In the "Deploy Hooks" section (see image below):

   • Type a name for your Deploy Hook.
   • Select the branch that will be deployed when the URL is requested.
   • Click the Create Hook button to submit the form.

4. Once the form is submitted, a URL will be generated. You will need the URL shortly.

Here is an example of the URL that you will get after submitting the form:

https://api.vercel.com/v1/integrations/deploy/prj_98g22o5YUFVHlKOzj9vKPTyN2SDG/tKybBxqhQs

Step 2: Set up GitHub Actions

The next step is setting up a GitHub Actions workflow to send requests to the Deploy Hooks URL whenever new content is pushed to the publish branch of the content repo.

In brief, GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that you can use to deploy changes to production. What we want to achieve is: whenever a new article is pushed to the publish branch of the content repo, trigger a rebuild of the blog hosted at Vercel.

GitHub will automatically run actions you create in your repo in the .github/workflows directory. The actions need to be in a YAML file with an appropriate name.

1. Create a .github/workflows directory

   mkdir -p .github/workflows

2. Create a YAML file in the directory (.yml or .yaml file name extension). Call the workflow file whatever name you like.

   touch .github/workflows/trigger-rebuild.yml

3. Copy the following code into the workflow file:

   name: Deploy Blog to Vercel
   on:
     push:
       branches:
         - publish
    
   jobs:
     trigger:
       runs-on: ubuntu-latest
       steps:
         - name: Trigger Blog Rebuild
           run: curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_98g22o5YUFVHlKOzj9vKPTyN2SDG/tKybBxqhQs

Let's digest the content of the workflow file.

1. name - give your workflow a name that will be displayed in your repo's "Actions" tab.

2. on - defines which events will cause the workflow to run.

   • push - the event that GitHub Actions watches to trigger the workflow. There are other events that you can use depending on your usecase.
   • branches - is a filter on the push event. Here, we list the publish branch so that any push to the branch will trigger a rebuild of the blog.

3. jobs - one or more jobs make up a workflow run.

   • trigger - is a unique identifier for this job.
   • runs-on - defines the type of machine the job runs on. We are running the job on ubuntu-latest but other OSs are available.
   • steps - defines a sequence of tasks that will be run. You can give the step a name if you like and then give the task to be run.
   • run sends a POST request to the Deploy Hook URL tied to your project on Vercel. This is where you paste the URL you copied in step 1.

When the action runs, Vercel rebuilds the blog and the fresh content goes live.

Step 3: Test the workflow

The actions are discovered automatically once the workflow lands in your GitHub repo.

1. Push the changes to your code repo on GitHub
2. Try the workflow and the hook by pushing new content to the content repo.

And that's all I needed to automate the deployment of my blog.

Thank you for reading. Catch me on X.com if you have any questions.

See you on the next one.