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.jsonwith"type": "module"and thedev/buildscripts:{ "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
URLto the live origin (e.g.https://www.example.com) in your hosting or CI environment. - Hosted previews (optional, e.g. Netlify):
URLusually points to production whileDEPLOY_URLandDEPLOY_PRIME_URLpoint to the preview. Baseline falls back to those whenURLis 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_URLandDEPLOY_PRIME_URLprovide the preview origin, whileURLstays 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. IfURLis set in CI or production, none of them should saylocalhost. - Inspect
dist/sitemap.xml(and the per-language sitemaps if multilingual is on). URLs should start with the expected origin, pluspathPrefixif 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
URLis 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
URLandpathPrefixbehaviour in full.
Previous: Sitemaps and Drafts
Next: Debugging with Navigator