Deploy your Eleventy site to Netlify

Netlify hosts websites for free and updates them automatically every time you push to Git. This kit is built for Netlify and ships with a netlify.toml file, so the build is already configured, this guide walks you through the deploy and the CMS setup step by step.

Build settings

This kit builds with npm run build and outputs your production site to a public folder. This kit's netlify.toml already sets these for you, they're shown here so you know what Netlify is running under the hood:

Build command

Compiles your site

$npm run build

Publish directory

Where the site lands

public

Step 1

Deploy from GitHub

The recommended workflow connects your GitHub repository to Netlify so every push redeploys automatically. From start to live site:

1Sign in to or create an account with Netlify at app.netlify.com.
2Click Sites in the left-hand navigation, then Add new site, and choose Import an existing project.
3Choose to deploy your project with GitHub and follow the steps to link Netlify and GitHub.
4Find your project in the list of repositories.
5Everything should be already configured, thanks to the netlify.toml file. Click Deploy [PROJECT NAME].
6Check that your site deploys without error. The site should be live, but we still need to set up the CMS (see below).

Step 2

Configure with netlify.toml

This kit already includes a netlify.toml at the project root, which is why Netlify detects the build settings automatically. It looks like this, version-controlled and repeatable across every deploy:

netlify.toml

[build]
  command = "npm run build"
  publish = "public/"

# Caches processed images and remote assets between builds
[[plugins]]
  package = "netlify-plugin-cache"
  [plugins.inputs]
    paths = ["public/assets/images", ".cache"]

Step 3

Set up the CMS

Your site is live, but the content editor still needs an authentication provider so you can log in and manage content.

Important, authentication has changed

This kit now uses decapbridge.com for its authentication solution. If you still use Netlify Identity, please refer to the Netlify Identity branch of the starter repository instead.

Updating from Netlify Identity to decapbridge

If you are upgrading an existing kit from Netlify Identity to decapbridge.com, follow these steps:

1Log in to your Netlify account.
2Navigate to Projects / Your-Site.
3Navigate to Project Configuration / Identity and delete the Netlify Identity instance. This deletes your users as well, they'll have to be re-created in decapbridge later.
4Delete the Netlify Identity script in src/index.html and in src/admin/index.html.

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: Netlify simply serves the contents of your public folder from its CDN, 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 Netlify Functions and Netlify Forms, covered below.

Adding Netlify Functions

Although Eleventy ships static HTML, you can still add serverless backend logic. Drop a file into a netlify/functions folder and Netlify deploys it as an on-demand API endpoint, point to it from your config:

netlify.toml

[build]
  command = "npm run build"
  publish = "public/"
  functions = "netlify/functions"

Each function is reachable at /.netlify/functions/<name>:

netlify/functions/hello.js

export default async (req, context) => {
  return new Response("Hello from Eleventy on Netlify!");
};

API endpoints

Files in netlify/functions run as serverless functions.

Netlify Forms

Add a netlify attribute to a static HTML form to capture submissions.

Redirects & headers

Define rules in netlify.toml or a _redirects file in your output.

Build failing? Check your Node version

Eleventy requires a modern Node.js release. If your build fails on Netlify's older build image, set the version your project needs. Add an .nvmrc file (for example 22.12.0) to your project root, or define a NODE_VERSION environment variable in the Netlify dashboard.

Learn more

The official docs go deeper if you need them.

Eleventy deployment guide

The official Eleventy guide to deploying your built site.

Netlify Functions

Build serverless API endpoints alongside your static site.

File-based configuration

Full netlify.toml reference: builds, redirects, and headers.

Netlify docs

Forms, redirects, environment variables, and more.