Deploy your Eleventy site to Vercel

Vercel hosts websites for free and updates them automatically every time you push to Git. This kit builds to plain static HTML that Vercel serves from its global Edge Network, this guide walks you through it step by step.

Build settings

This kit builds with npm run build and outputs your production site to a public folder. Vercel auto-detects Eleventy when you import the project, but it defaults to _site, so set these two values explicitly to match the kit:

Build command

Compiles your site

$npm run build

Output directory

Where the site lands

public

Two ways to deploy

Both get your site live. If you're new, start with the website, it's all clicks, no terminal.

From the website

Recommended for beginners

Connect a repo from GitHub, GitLab, or BitBucket. Vercel detects Eleventy and pre-fills the build settings, then ships a preview for every push.

1Click Add New… → Project in your Vercel dashboard.
2Import the Git repository you want to deploy.
3Vercel detects Eleventy. Set the build command to npm run build and the output directory to public.
4Click Deploy, your site goes live in seconds.

After this, every git push rebuilds your site automatically.

From the terminal

If you prefer the command line

Install the Vercel CLI, then run vercel from your project root. Add --prod to push straight to production.

terminal

npm install --global vercel
vercel login
vercel

When Vercel asks "Want to override the settings?", choose Yes and set the output directory to public.

Static by design

Eleventy is a static site generator, every page is prerendered to HTML at build time. There is no server runtime or adapter to configure: Vercel serves the contents of your public folder from its Edge Network, which is what makes Eleventy sites so fast and cheap to host.

Need dynamic behavior, form handling, API calls, or auth? You don't give up your static build. Layer it on with Vercel Functions, covered below.

Adding Vercel Functions

Although Eleventy ships static HTML, you can still add serverless backend logic. Create an api folder at the root of your project and Vercel deploys each file inside it as an on-demand function:

api/hello.js

export default function handler(req, res) {
  res.status(200).send("Hello from Eleventy on Vercel!");
}

That endpoint is reachable at /api/hello. Make sure Eleventy doesn't process the api folder, add it to your .eleventyignore so Vercel handles it instead.

API endpoints

Files in the api/ folder run as serverless functions.

Edge runtime

Opt a function into the Edge to run close to your users.

Redirects & rewrites

Define rules in a vercel.json file at your project root.

Build failing? Check your Node version

Eleventy requires a modern Node.js release. If your build needs a specific version, set it in Project Settings → General → Node.js Version on Vercel, or pin it with an engines field in your package.json (for example "node": "22.x").

Learn more

The official docs go deeper if you need them.

Eleventy deployment guide

The official Eleventy guide to deploying your built site.

Vercel Functions

Build serverless API endpoints alongside your static site.

Project configuration

Full vercel.json reference: redirects, rewrites, and headers.

Vercel docs

Functions, redirects, environment variables, and more.