Skip to main content

Vercel

Vercel allows users to link a GitHub repository and deploy it on their own subdomain or in a custom domain.

Before you begin#

A vercel project needs to be setup before beginning with the actual action workflow. This can be following the following steps:

Import repository#

Import the repository to vercel which will actually install the Vercel app in the repo in order to be able to fetch and deploy everytime a push is made. Go to this URL to start with the import.

  1. Select the username where the emanates repo is created.
  2. Select the repo and allow access to install the Vercel app.
  3. Click on Import next to the project that shows up on the list.
info

You can skip the Create a Team part by clicking on the Skip button.

Configure the project#

We also need to tell Vercel, how to deploy the webapp as well as setup some environment variables to be used.

Build Settings#

Setup the build setting to build a static page instead of a SSR app.

  1. Click on the Build and Output Settings button and it will expand the build settings.
  2. Click on OVERRIDE next to the build command and enter npm run generate in the build command input container.

Environment variables#

We need to set up two environment variable in order for Emanates to be able to build the blog properly.

Click on the Environment Variables button to expand the settings for env.

  • EMANATES_TOKEN

    Enter the name as EMANATES_TOKEN and the value as the GitHub Personal Access Token created in the getting started step.

  • REPO

    Enter the name as REPO and the value is your repository where emanates is setup in the form of username/reponame. For eg: if the name of the repo is test-emanates and your username is testuser, the value should be testuser/test-emanates.

After that click on the Deploy button. This will run the deployment once (let it continue and finish).

Action#

For the GitHub Action, we actully don't need to use any external package to push to Vercel. It's harder to setup a proper deployment pipeline for Vercel since the app already does everything and there were no packages explicitly pushing the builds.

So rather, we will go for a deployment hook method in order to run the deployment everytime a new post is added/deleted/updated.

Doing this will be extremely simpler as compared to setting up a pipeline where the deployment is invoked through GitHub Action explicitly.

Deployment Hook#

In order to create a deployment hook, go to the Setting tab in your project.

On the left, there will be options for various settings regarding the project. Go to Git in order to setup a deployment hook.

Now go to Deploy Hooks and do the following steps:

  1. Add the name as Emanates Build.
  2. Set the branch as master.
  3. Click on Create Hook.
info

Change the branch name in the 2nd step if you've changed the branch while creating your Emanates Repo.

Now, you should see an URL and a copy button next to it. Click on the copy button to copy the URL.

Save the URL#

Since you have the deploy hook URL now, it needs to be stored on GitHub as a secret. You can read here about setting up GitHub secrets in your repo.

Go to your emanates repository and then go to Settings, then Secrets.

Name it VERCEL_HOOK_URL, set the copied value from the above step and save it.

Deployment Code#

Now that we have the required things setup, the deployment code can now be setup in the .github/workflows directory inside the repository.

Below is the deploy.yml file that you need to add in the .github/workflows directory on your repository.

warning

If there is already a deploy.yml file in that repo, replace it with the below one!

name: 'Emanates Deploy'
on:  issues:    types: [opened, edited, deleted]
jobs:  # Deploy to Vercel  deploy:    name: 'Deploy to Vercel'    runs-on: ubuntu-latest
    steps:      - name: Call the deployment hook        uses: wei/curl@master        with:          args: -X POST ${{ secrets.VERCEL_HOOK_URL }}

Once you save the above file, it's time to create a new blog post.

Go to your issues tab and create a new issue. Once you click on the issue create button, this action file will be invoked by GitHub and your site will start building.

If everything goes well (which it should), you'll be able to see your site on your Vercel site address.