How to Set Up a Preview Deployment with Vercel

The easiest way to get Preview set up with Eleventy, is to set up and configure a secondary deployment of your Eleventy site using your Preview/Development API Keys, which will pull down and sync your latest changes to Content and Pages.

Setting Up a Preview Deployment with Vercel

Setting Up your Preview Domain in Agility

Updating the Eleventy Site When Content is Saved

Setting Up a Preview Deployment with Vercel

Sign in to your Vercel account, or Sign Up if you don't already have one. Then, create a New Project from Git. Choose the Git provider where your site’s source code is hosted and import the site you wish to deploy.

Update the build command to npm run dev.

Be sure to click the "Environment Variables" dropdown to show the option of adding and defining environment variables. The environment variables you'll need to add are as followed:

# get these values from the API Keys page in Agility Settings => https://manager.agilitycms.com/settings/apikeys

# Your Instance Id
AGILITY_GUID=XXX

# Your Live API Key
AGILITY_API_FETCH_KEY=XXX

# Your Preview API Key
AGILITY_API_PREVIEW_KEY=XXX

# The Locale You'd Like To Source Content From (Default en-us) => https://help.agilitycms.com/hc/en-us/articles/360056925351-Introduction-to-Locales
AGILITY_LANGUAGE_CODE=en-us

# The Name of the Sitemap You'd Like To Source Content From (Default website) => https://help.agilitycms.com/hc/en-us/articles/360055329632
AGILITY_CHANNEL_NAME=website

When the site is deployed, you'll notice the site with its Staging Content.

Setting Up Preview Domain in Agility

Once you have your Preview Deployment set up on Vercel, we can set up the domain Vercel provides as the Preview Domain in Agility CMS.

Learn how to customize your domain in Vercel

In Agility CMS, head to Settings > Sitemaps, and set up a new Custom Deployment.

Give your deployment a Name, enter the URL, and set it as the Preview Deployment then click Save.

Updating the Eleventy Site When Content is Saved

To update the Staging Content of your Preview deployment when a save is made, we'll need to set up a Webhook to notify Vercel of these changes.

In Vercel, go to Settings > Git > Deploy Hooks and add a Deploy Hook. Copy the Webhook URL Vercel generates for you.

In Agility CMS, go to Settings > Web Hooks, and add a new Webhook. Give it a Name, and paste the Webhook URL Vercel generated for you. Uncheck Receive Content Publish Events. Check Receive Content Save Events. You can test the webhook by sending a Test Payload.

The Preview Deployment of your Eleventy site will now rebuild and update when Save events are made in Agility!