Deployment URL Checks

Keep your URLs correct across dev, preview, and production so canonicals, sitemaps, and social tags never leak localhost. Uses npm, Node 20.15.0+, and the Baseline setup from earlier tutorials.

What you’ll build

• A Baseline site that reads the right origin for each environment.
• Canonical, sitemap, and social URLs pointed at the expected domain (or preview).

Prerequisites

• Baseline installed and loaded.
• package.json with "type": "module" and scripts:

  {
    "type": "module",
    "scripts": {
      "dev": "npx @11ty/eleventy --serve",
      "build": "npx @11ty/eleventy"
    }
  }

1) Set site.url (and optionally pathPrefix)

In src/_data/site.js:

export default {
  title: "Simple Baseline Site",
  tagline: "Correct URLs across dev/preview/prod",
  url: process.env.URL || "http://localhost:8080/", // override per env
  defaultLanguage: "en",
  noindex: false
};

• Use pathPrefix in eleventy.config.js if deploying under a subpath (e.g., /my-site/). Baseline head/sitemap will respect it.

2) Set environment URLs (local and CI)

• Dev/preview: create a local .env (don’t commit it):

  ELEVENTY_ENV="development"
  URL="http://localhost:8080/"

• Production: set URL in your hosting/CI environment to the live origin (e.g., https://example.com).
• Previews (optional, e.g., Netlify): URL usually points to production; DEPLOY_URL / DEPLOY_PRIME_URL point to the preview. Baseline falls back to those when URL is missing. If you don’t use preview builds, you can skip these.
• Baseline loads dotenv, so process.env.URL is available in site.js and eleventy.config.js. The HTML base tag and sitemap use this value (plus pathPrefix if set).

3) Run with the right URL per environment

• Dev/preview: ensure your .env is loaded (e.g., URL=http://localhost:8080), then:

  npx rimraf dist/ && npm run dev

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

  npx rimraf dist/ && npm run build

• Verify the rendered pages use the expected origin in canonical, sitemap, and social tags.

4) Preview builds (optional)

• On Netlify, DEPLOY_URL / DEPLOY_PRIME_URL provide the preview origin; URL is also set to the live site for production. Other hosts differ — set an equivalent preview URL env var for staging.
• Verify the rendered canonical and sitemap root match the preview domain.

5) Verify outputs

• View source: check <link rel="canonical"> and OG/Twitter URLs — no localhost when URL is set.
• Inspect dist/sitemap.xml (and per-language sitemaps if multilingual): URLs should start with the expected origin (plus pathPrefix if used).

6) PathPrefix checklist (if applicable)

• In eleventy.config.js, set pathPrefix to your subpath (e.g., /docs/).
• Ensure assets/links/canonicals/sitemaps use the prefixed paths; rebuild and verify.

7) Next steps

• Pair with the social previews tutorial to ensure social images use absolute URLs.
• Add a CI check that fails builds if URL is missing for production.