Eleventy Baseline
English Nederlands Français
|
Table of Contents
Page 1 of 5

Build a multilingual site

Add a second language to a Baseline site, with everything you'd expect: per-language URLs, hreflang on every page, a sitemap for each language plus an index.

Multilingual is opt-in. Most projects don't need it; if yours does, this page is the full setup.

By the end you'll have an English and Dutch site sharing a single Eleventy build, with Baseline doing the hreflang and sitemap wiring on its own.

What you will build

  • Pages in English and Dutch sharing one Eleventy build.
  • Baseline configured with multilingual on, plus defaultLanguage and languages set in _data/settings.js.
  • Hreflang links (the <link rel="alternate" hreflang="..."> tags that point search engines at a page's translations) written automatically, and a per-language sitemap for each language.

Prerequisites

The site you built over the previous pages: Node 22 or newer, "type": "module", and the start and build scripts already in package.json.

The shape of it

Four pages after this one, listed at the foot of each.

  1. Turn it on. Switch multilingual on in the config, then describe your languages in site data.
  2. Move the content. Split the pages into per-language folders, then tell each folder which language it holds.
  3. Layout and hreflang. One line in the layout that was already right, and the alternates Baseline emits once it is.
  4. Run it. The dev server, then a production build with the output worth inspecting.

Read the rest of this page first. It explains what switching multilingual on actually changes, which makes the four pages after it read as consequences rather than instructions.

How activation works

Multilingual mode requires three things, all present:

  • options.multilingual: true passed to baseline() in eleventy.config.js.
  • defaultLanguage set in _data/settings.js.
  • A non-empty languages map in _data/settings.js.

Setting defaultLanguage and languages is the site's identity. Turning multilingual on is the runtime decision. Both halves are needed; Baseline won't infer one from the other.

Nothing new to install for any of it. Multilingual mode is part of Baseline, and Eleventy's i18n plugin comes with it. Starting from an empty folder rather than the site from the previous pages? Install what that tutorial did:

npm install @11ty/eleventy
npm install rimraf cross-env npm-run-all
npm install @apleasantview/eleventy-plugin-baseline

Those three requirements are the next page: the option in the config, then the two settings keys that describe your languages.