1. Deploy instantly
  2. Preview with ease
  3. Scale automatically
  4. Serve your content around the world with its global CDN

Agility CMS and Vercel

Vercel offers an extremely helpful marketplace that allows you to extend and automate your workflow by integrating with your favorite tools, such as Agility CMS!

Our integration with Vercel will set the environment variables that allow you to connect to your data from Agility CMS in your Vercel applications. In addition, it will also configure your Agility CMS instance with a preview and production domain, which enables direct links for your editing team.

Deploy from the Content Manager

You can deploy our template starters using the Vercel integration built-in to the Agility CMS Manager.

Step 1: Deployment Settings

Start by heading into Settings > Sitemaps, then clicking Setup Deployment.

Step 2: Vercel Automated Deployment

Select the Vercel Automated Deployment option to connect to Vercel and deploy your website.

Step 3: Create Git Repository

First, create a Git Repository for your project to ensure you can easily update your project after deploying it.

Step 4: Add Agility CMS Integration

Next, Install the Agility CMS integration that will authorize access between Vercel and your Agility CMS content so that we can automatically configure your Production and Preview domains, as well as set up your Environment Variables.

Step 5: Deploy

Lastly, Vercel will fetch the source code for the template starters and it will be cloned into your Git repository. Vercel will also build your project and upload/deploy your build output.

Once deployed you will be taken back to your Agility CMS Manager, and you will see that your Production and Preview domains have been set. You can click on the link to view your live site.

Deploy from GitHub Repo

On the GitHub repositories for our starter templates, you will notice a Deploy to Vercel button. This button will create an instance in Agility, and automatically deploy it to Vercel, also configuring the necessary environment variables for you.

Vercel provides a frictionless experience that handles all of the hard things for you:

Vercel is an all-in-one platform for frontend frameworks, supporting the best of both worlds with static and hybrid deployment options, as well as providing dynamic computations with the use of serverless functions.

How to deploy Vercel with Agility CMS

Upon clicking the button, you will be taken into the deployment flow.

Step 1: Create Git Repository

First, to ensure you can easily update your project after deploying it, a Git repository must be created. 

Create Git Repository to deploy Vercel with Agility CMS

Step 2: Add Agility CMS Integration

Next, you'll need to add the Agility CMS Integration.

CMS integration to deploy Vercel with Agility CMS

Step 3: Authenticate with Agility CMS

When you add the integration, you'll be prompted to sign in or sign up.

Authenticating Agility CMS

Step 4: Create a New Agility CMS Instance

After creating a new account or logging into your existing account, you will be able to create a new Agility CMS Instance.

Creating new instance in Agility CMS

When your Agility CMS Instance is created, you will be able to click to open your new Instance or click OK to continue with the deployment process.

Open a new blog with Agility CMS

Once the Agility CMS Integration has been added successfully and your instance has been created, Vercel will deploy your project, automatically configuring any necessary environment variables.

New blog started with Agility CMS

Adding the Agility CMS Integration from Vercel Marketplace

To add our Integration, search for the Agility CMS Integration in the Vercel Marketplace, then click on Add Integration.

Add Agility CMS integration from Vercel marketplace

Step 1: Select your Vercel Scope

You will then be asked to select a Vercel Scope to add the Integration to, select your Personal Account or your Vercel Team.

Add Agility CMS to a Vercel scope

Step 2: Project Selection

Next, select the Projects to which the Integration will be added.

Add Agility CMS to Vercel project 

Specific Projects

Selecting Specific Projects will apply the environment variable values from a Single Instance to the Selected Project. You will most likely want to select this option.

All Projects

Selecting All Projects will configure and apply the environment variable values from a Single Instance to ALL of your Vercel projects. This will overwrite any existing Agility CMS environment variables that you may have already set on these projects.

This option may be useful if you plan on using multiple environments, e.g. DEV, QA, UAT, PROD.

Step 3: Authenticate with Agility CMS

Login or Sign Up to Agility CMS.

Verifying Agility CMS integration 

Step 4: Select Your Agility CMS Instance

After authenticating with Agility CMS, select an Instance to apply environment values from.

Blog with Agility CMS and Next.js

Managing Access and Permissions

Managing Agility CMS permissions 

After adding the Agility CMS Integration to your Vercel project(s), you will be able to manage the Integrations access and permissions from your Vercel Dashboard.