EnglishNederlandsFrançais Toggle theme

Eleventy Baseline

Start building your site, skip the recurring setup work.
Table of Contents

Deployment URL Checks

Keep your URLs correct across dev, preview, and production, so canonicals, sitemap entries, and links never leak localhost to the live site. The mechanics are mostly Eleventy and environment variables; this chapter is the small set of habits that keep them honest.

Three terms used below:

  • Canonical. The <link rel="canonical"> URL Baseline writes into every page's head.
  • pathPrefix. Eleventy's option for deploying under a subpath (e.g. /docs/). Baseline's head and sitemap modules respect it.
  • Preview build. A non-production deploy (a Netlify deploy preview, for instance) where the origin differs from production.

What you will build

  • A Baseline site that picks up the right origin for whichever environment it's in.
  • Canonical and sitemap URLs pointing at the expected domain, preview included.

Prerequisites

  • Baseline installed and loaded.
  • package.json with "type": "module" and the dev/build scripts:
    {
    	"name": "simple-baseline-site",
    	"type": "module",
    	"scripts": {
    		"start": "rimraf dist/ && npx @11ty/eleventy --serve",
    		"build": "rimraf dist/ && cross-env ELEVENTY_ENV=production npx @11ty/eleventy"
    	}
    }

1) Set settings.url (and optionally pathPrefix)

Use the src/_data/settings.js you already have from the previous tutorials. The fields that matter for this chapter are url (the canonical origin) and, optionally, pathPrefix:

url: process.env.URL || 'http://localhost:8080/'; // override per env

If you're deploying under a subpath, set pathPrefix in eleventy.config.js (e.g. /my-site/). Baseline's head and sitemap output respect it without further wiring.

2) Set environment URLs (local and CI)

  • Dev or local preview: create a local .env (don't commit it):
    ELEVENTY_ENV="development"
    URL="http://localhost:8080/"
  • Production: set URL to the live origin (e.g. https://www.example.com) in your hosting or CI environment.
  • Hosted previews (optional, e.g. Netlify): URL usually points to production while DEPLOY_URL and DEPLOY_PRIME_URL point to the preview. Baseline falls back to those when URL is missing. Skip if previews aren't part of your workflow.

Baseline loads dotenv for you, so process.env.URL works in both _data/settings.js and eleventy.config.js. The HtmlBasePlugin and the sitemap module both read it (and pathPrefix, if set).

3) Run with the right URL per environment

Dev: confirm your .env is loaded (e.g. URL="http://localhost:8080/"), then:

npm start

Production: set URL in hosting or CI to the live origin (not an inline shell export), then:

npm run build

Spot-check the rendered pages: canonical and sitemap entries should use the origin you expect.

4) Preview builds (optional)

  • On Netlify, DEPLOY_URL and DEPLOY_PRIME_URL provide the preview origin, while URL stays set to the live site for production builds. Other hosts differ; set an equivalent preview URL env var for whichever staging environment you have.
  • Confirm the rendered canonical and the sitemap root both match the preview domain.

5) Verify outputs

  • View source on a rendered page. The <link rel="canonical"> and every absolute link in the head should use the right origin. If URL is set in CI or production, none of them should say localhost.
  • Inspect dist/sitemap.xml (and the per-language sitemaps if multilingual is on). URLs should start with the expected origin, plus pathPrefix if you've set one.

6) PathPrefix checklist (if applicable)

For the full subpath setup, see Deploy Under a Subpath.


Next steps

  • Add a CI check that fails the build if URL is missing in production. One small step, lots of headaches saved.
  • Pair with the multilingual site tutorial to confirm hreflang URLs use the correct origin once multilingual is on.
  • The config export reference covers URL and pathPrefix behaviour in full.