### Install Upgrade Helper v1

Source: https://www.11ty.dev/docs/plugins/upgrade-help

Install the Eleventy upgrade helper plugin for version 1.

```bash
npm install @11ty/eleventy-upgrade-help@1
```

--------------------------------

### Install Eleventy Fetch

Source: https://www.11ty.dev/docs/plugins/fetch

Use npm to install the package as a dependency in your project.

```bash
npm install @11ty/eleventy-fetch
```

--------------------------------

### Install Upgrade Helper v3

Source: https://www.11ty.dev/docs/plugins/upgrade-help

Install the Eleventy upgrade helper plugin for version 3.

```bash
npm install @11ty/eleventy-upgrade-help@3
```

--------------------------------

### Install Eleventy Plugin

Source: https://www.11ty.dev/docs/create-plugin

Installs the `@11ty/eleventy-plugin-rss` package using npm.

```bash
npm install @11ty/eleventy-plugin-rss --save
```

--------------------------------

### Install Upgrade Helper v2

Source: https://www.11ty.dev/docs/plugins/upgrade-help

Install the Eleventy upgrade helper plugin for version 2.

```bash
npm install @11ty/eleventy-upgrade-help@2
```

--------------------------------

### Install Eleventy Globally

Source: https://www.11ty.dev/docs/global-installation

Installs the Eleventy CLI globally on the system. Note that local project installation via package.json is recommended for production and version management.

```bash
npm install -g @11ty/eleventy
```

--------------------------------

### Install Navigation Plugin

Source: https://www.11ty.dev/docs/plugins/navigation

Install the package via npm to begin using the plugin in your project.

```bash
npm install @11ty/eleventy-navigation
```

--------------------------------

### Install Eleventy Plugin Syntax Highlighter

Source: https://www.11ty.dev/docs/plugins/syntaxhighlight

Install the plugin using npm. This is the first step before configuring it in your Eleventy project.

```bash
npm install @11ty/eleventy-plugin-syntaxhighlight
```

--------------------------------

### Install Eleventy

Source: https://www.11ty.dev/docs

Install the Eleventy package into your project using your preferred package manager.

```bash
npm install @11ty/eleventy
```

```bash
pnpm install @11ty/eleventy
```

```bash
yarn add @11ty/eleventy
```

--------------------------------

### Front Matter Example

Source: https://www.11ty.dev/docs/data-computed

Example of front matter for a blog post.

```yaml
---
title: My Page Title
parent: My Parent Key
---
```

--------------------------------

### Use Official WebC Components

Source: https://www.11ty.dev/docs/languages/webc

Examples of how to import and use official WebC components provided by Eleventy plugins. Ensure the plugin is installed and the component is imported using `webc:import`.

```html
<is-land webc:import="npm:@11ty/is-land">
```

```html
<syntax-highlight language="js" webc:import="npm:@11ty/eleventy-plugin-syntaxhighlight">
```

```html
<img webc:is="eleventy-image" webc:import="npm:@11ty/eleventy-img">
```

--------------------------------

### Serve Command Output

Source: https://www.11ty.dev/docs

Example output when running the serve command.

```text
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v3.1.5)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
```

--------------------------------

### Setup Component JavaScript

Source: https://www.11ty.dev/docs/languages/webc

Use script webc:setup to define variables and functions available within the component scope. This code runs once per build and lacks access to instance-specific data.

```html
<script webc:setup>
	const myHtml = "<my-webc-component></my-webc-component>";

	function alwaysBlue() {
		return "blue";
	}
</script>

<div @html="myHtml"></div>
<div @raw="myHtml"></div>
<!-- @raw does not reprocess as WebC -->
<div @html="alwaysBlue()"></div>
```

--------------------------------

### Install Handlebars Plugin

Source: https://www.11ty.dev/docs/languages/handlebars

Command to install the Handlebars plugin for Eleventy.

```bash
npm install @11ty/eleventy-plugin-handlebars
```

--------------------------------

### Install Directory Output Plugin

Source: https://www.11ty.dev/docs/plugins/directory-output

Install the plugin using npm. This plugin is compatible with Eleventy 1.0.0 and newer.

```bash
npm install @11ty/eleventy-plugin-directory-output
```

--------------------------------

### JavaScript Usage Example (Build-time)

Source: https://www.11ty.dev/docs/services/sparklines

Example of how to use a build-time package for sparklines in JavaScript.

```APIDOC
## Build-time Sparkline Example

### Description
Sample code demonstrating how to use the `sparkline-svg` package for generating sparklines at build time.

### Code
```javascript
// don’t forget to `npm install sparkline-svg`
import Sparkline from "sparkline-svg";

function sparklineDataUri(values = []) {
	let line = new Sparkline.default(values);
	line.setViewBoxWidth(120);
	line.setViewBoxHeight(30);
	line.setStrokeWidth(1);
	line.setStroke("#000000");

	return line.dataUri;
};

// Example JavaScript Usage:
// `<img src="${sparklineDataUri([1, 2, 3])}" alt="Sparkline …">
```
```

--------------------------------

### Build Output with Templates

Source: https://www.11ty.dev/docs

Example output after running Eleventy with template files present.

```text
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v3.1.5)
```

--------------------------------

### Basic Markdown Syntax Example

Source: https://www.11ty.dev/docs/languages/markdown

A simple example demonstrating standard Markdown formatting for content.

```markdown
**Markdown** is a great language for writing _content_.
You can create [links](https://11ty.dev), lists,
tables, and more.
```

--------------------------------

### Eleventy Build Output

Source: https://www.11ty.dev/docs

Example output from the command line after running Eleventy.

```text
[11ty] Wrote 0 files in 0.03 seconds (v3.1.5)
```

--------------------------------

### Start Development Server

Source: https://www.11ty.dev/docs/usage

Launches a local web server with file watching enabled for automatic refreshes.

```bash
# Add a web server to apply changes and
# refresh automatically. We’ll also --watch for you.
npx @11ty/eleventy --serve
```

--------------------------------

### Serve Eleventy Locally

Source: https://www.11ty.dev/docs

Start a hot-reloading local web server for development.

```bash
npx @11ty/eleventy --serve
```

```bash
pnpm exec eleventy --serve
```

```bash
yarn exec eleventy -- --serve
```

--------------------------------

### Install Eleventy v1

Source: https://www.11ty.dev/docs/plugins/upgrade-help

Use npm to install Eleventy version 1. This is part of the upgrade process.

```bash
npm install @11ty/eleventy@1
```

--------------------------------

### Install Eleventy WebC Plugin

Source: https://www.11ty.dev/docs/languages/webc

Install the plugin using npm. Requires Eleventy v2.0.0 or newer.

```bash
npm install @11ty/eleventy-plugin-webc
```

--------------------------------

### Install Eleventy v2

Source: https://www.11ty.dev/docs/plugins/upgrade-help

Use npm to install Eleventy version 2. This is part of the upgrade process.

```bash
npm install @11ty/eleventy@2
```

--------------------------------

### Sample CSS File

Source: https://www.11ty.dev/docs/quicktips/inline-css

Create a sample CSS file, for example, `sample.css`, to be included and minified.

```css
body {
	font-family: fantasy;
}
```

--------------------------------

### Install clean-css

Source: https://www.11ty.dev/docs/quicktips/inline-css

Install the clean-css package using npm to enable CSS minification.

```bash
npm install clean-css
```

--------------------------------

### Install Eleventy v3

Source: https://www.11ty.dev/docs/plugins/upgrade-help

Use npm to install Eleventy version 3. This is part of the upgrade process.

```bash
npm install @11ty/eleventy@3
```

--------------------------------

### Eleventy Layout File Example

Source: https://www.11ty.dev/docs/languages/webc

An example of an Eleventy layout file written in WebC, using the @raw attribute to inject content.

```webc
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>WebC Example</title>
	</head>
	<body @raw="content"></body>
</html>

```

--------------------------------

### Install Node.js

Source: https://www.11ty.dev/docs/javascript-runtime

Download and install Node.js version 18 or higher from nodejs.org. For managing multiple versions, consider nvm or fnm.

```bash
nodejs.org/en/download
```

--------------------------------

### Basic WebC HTML File Example

Source: https://www.11ty.dev/docs/languages/webc

An example of a basic `.webc` file. WebC files are processed as HTML and aggregate CSS and JS.

```html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>WebC Example</title>
	</head>
	<body>
		WebC *is* HTML.
	</body>
</html>
```

--------------------------------

### Install Eleventy Image Plugin

Source: https://www.11ty.dev/docs/plugins/image

Install the Eleventy Image plugin using npm. Requires Node 18+.

```bash
npm install @11ty/eleventy-img
```

--------------------------------

### Install Inclusive Language Plugin

Source: https://www.11ty.dev/docs/plugins/inclusive-language

Install the plugin using npm. This command adds the package to your project's dependencies.

```bash
npm install @11ty/eleventy-plugin-inclusive-language
```

--------------------------------

### Install Browsersync Server Package

Source: https://www.11ty.dev/docs/dev-server

Install the Browsersync server package using npm. This is a prerequisite for enabling Browsersync integration with Eleventy Dev Server.

```bash
npm install @11ty/eleventy-server-browsersync
```

--------------------------------

### Using Paired Shortcodes

Source: https://www.11ty.dev/docs/languages/liquid

Example of wrapping content with a paired shortcode.

```liquid
{% user2 "Zach Leatherman" "zachleat" %} Zach likes to take long walks on
Nebraska beaches. {% enduser2 %}
```

--------------------------------

### Install @11ty/is-land Plugin

Source: https://www.11ty.dev/docs/plugins/is-land

Install the @11ty/is-land plugin using npm. This is the first step to using islands architecture in your project.

```bash
npm install @11ty/is-land
```

--------------------------------

### Eleventy Aggregate Benchmark Examples

Source: https://www.11ty.dev/docs/debug-performance

These are examples of aggregate benchmark output from Eleventy. Note that percentages may exceed 100% due to asynchronous task nature.

```text
Benchmark (Aggregate): Searching the file system took 40ms (0.5%, called 2×, 19.9ms each) +0ms
Benchmark (Aggregate): Data File took 134ms (1.8%, called 405×, 0.3ms each) +0ms
Benchmark (Aggregate): Template Read took 682ms (9.0%, called 600×, 1.1ms each) +0ms
Benchmark (Aggregate): Passthrough Copy File took 924ms (12.2%, called 669×, 1.4ms each) +0ms
Benchmark (Aggregate): Template Compile took 366ms (4.8%, called 1526×, 0.2ms each) +0ms
Benchmark (Aggregate): Template Render took 1215ms (16.1%, called 949×, 1.3ms each) +0ms
Benchmark (Aggregate): Template Write took 2088ms (27.6%, called 312×, 6.7ms each) +0ms
```

--------------------------------

### Initialize Template Extension

Source: https://www.11ty.dev/docs/languages/custom

Defines an async function that runs once during setup. It does not re-run on watch or serve mode.

```javascript
// some configuration truncated …
  init: async function() {
    // has access to current configuration settings in `this.config`
  },
```

--------------------------------

### Install Eleventy Vite Plugin

Source: https://www.11ty.dev/docs/server-vite

Use npm to add the plugin to your project dependencies.

```bash
npm install @11ty/eleventy-plugin-vite
```

--------------------------------

### Global Configuration for Missing Extensions

Source: https://www.11ty.dev/docs/permalinks

Example configuration snippet for missing extensions.

```yaml
---
# ⚠️ Careful!
permalink: /resource
---
```

--------------------------------

### Example HTML Output for Pagination

Source: https://www.11ty.dev/docs/pagination/nav

This is the resulting HTML structure for the pagination navigation on the first page of a set.

```html
<nav aria-labelledby="my-pagination">
	<h2 id="my-pagination">This is my Pagination</h2>
	<ol>
		<li>First</li>
		<li>Previous</li>
		<li><a href="/test-array/" aria-current="page">Page 1</a></li>
		<li><a href="/test-array/1/">Page 2</a></li>
		<li><a href="/test-array/2/">Page 3</a></li>
		<li><a href="/test-array/1/">Next</a></li>
		<li><a href="/test-array/2/">Last</a></li>
	</ol>
</nav>
```

--------------------------------

### Import WebC Component from npm Package

Source: https://www.11ty.dev/docs/languages/webc

Import a WebC component directly from an installed npm package using `webc:import`. This example uses the Eleventy Syntax Highlighter plugin.

```html
<syntax-highlight
	language="js"
	webc:import="npm:@11ty/eleventy-plugin-syntaxhighlight"
>
	function myFunction() { return true; }
</syntax-highlight>
```

--------------------------------

### Install RSS Plugin

Source: https://www.11ty.dev/docs/plugins/rss

Use npm to add the RSS plugin package to your Eleventy project.

```bash
npm install @11ty/eleventy-plugin-rss
```

--------------------------------

### Serve Without Initial Build

Source: https://www.11ty.dev/docs/usage

Use the `--serve` and `--ignore-initial` flags to start the development server without performing an initial build. This can speed up startup time.

```bash
pnpm exec eleventy --serve --ignore-initial
```

```bash
yarn exec eleventy --serve --ignore-initial
```

--------------------------------

### Install Sass Plugin

Source: https://www.11ty.dev/docs/languages/sass

Install the required sass package via npm.

```bash
npm install sass
```

--------------------------------

### Create Project Directory

Source: https://www.11ty.dev/docs

Commands to create a new directory and navigate into it.

```bash
mkdir eleventy-sample
```

```bash
cd eleventy-sample
```

--------------------------------

### Install HAML Plugin

Source: https://www.11ty.dev/docs/languages/haml

Install the required plugin package via npm.

```bash
npm install @11ty/eleventy-plugin-haml
```

--------------------------------

### WebC with Front Matter Example

Source: https://www.11ty.dev/docs/languages/webc

Demonstrates a WebC file with front matter, specifying a layout. Assumes the existence of a corresponding layout file.

```webc
---
layout: "my-layout.webc"
---
WebC *is* HTML.

```

--------------------------------

### Create Template Files

Source: https://www.11ty.dev/docs

Commands to generate initial HTML and Markdown template files.

```bash
echo '<!doctype html><title>Page title</title><p>Hi</p>' > index.html
echo '# Heading' > README.md
```

```bash
echo '<!doctype html><title>Page title</title><p>Hi</p>' | out-file -encoding utf8 'index.html'
echo '# Heading' | out-file -encoding utf8 'README.md'
```

```bash
echo '<!doctype html><title>Page title</title><p>Hi</p>' | npx @11ty/create index.html
echo '# Heading' | npx @11ty/create README.md
```

--------------------------------

### Run Eleventy with Deno dx alias

Source: https://www.11ty.dev/docs/javascript-runtime

After setting up an alias with `deno x --install-alias`, you can use the shorthand `dx` command to run Eleventy. Use `--serve` to start a development server.

```bash
dx @11ty/eleventy
```

```bash
dx @11ty/eleventy --serve
```

--------------------------------

### Run Eleventy with Server and Watch Options

Source: https://www.11ty.dev/docs/usage

Commands to start the Eleventy development server, watch for file changes, or specify a custom port.

```bash
# Change the web server’s port—use localhost:8081
npx @11ty/eleventy --serve --port=8081

# Watch and re-run when files change, without the web server.
npx @11ty/eleventy --watch
```

```bash
# Add a web server to apply changes and
# refresh automatically. We’ll also --watch for you.
pnpm exec eleventy --serve

# Change the web server’s port—use localhost:8081
pnpm exec eleventy --serve --port=8081

# Watch and re-run when files change, without the web server.
pnpm exec eleventy --watch
```

```bash
# Add a web server to apply changes and
# refresh automatically. We’ll also --watch for you.
yarn exec eleventy --serve

# Change the web server’s port—use localhost:8081
yarn exec eleventy --serve --port=8081

# Watch and re-run when files change, without the web server.
yarn exec eleventy --watch
```

--------------------------------

### Set Environment Variables via Command Line

Source: https://www.11ty.dev/docs/environment-vars

Examples for setting environment variables before running the Eleventy build command on different operating systems.

```bash
MY_ENVIRONMENT=production npx @11ty/eleventy
```

```cmd
set MY_ENVIRONMENT=production & npx @11ty/eleventy
```

```powershell
$env:MY_ENVIRONMENT="production"; npx @11ty/eleventy
```

--------------------------------

### Serve Eleventy with Incremental Builds

Source: https://www.11ty.dev/docs/usage

Use the `--serve` and `--incremental` flags to enable live reloading and incremental builds. This is useful for faster development cycles.

```bash
npx @11ty/eleventy --serve --incremental --ignore-initial
```

```bash
pnpm exec eleventy --serve --incremental --ignore-initial
```

```bash
yarn exec eleventy --serve --incremental --ignore-initial
```

--------------------------------

### Example Paginated HTML Output

Source: https://www.11ty.dev/docs/pagination/nav

This is the resulting HTML markup generated for the first page of the pagination example.

```html
<nav aria-labelledby="my-pagination">
	<h2 id="my-pagination">This is my Pagination</h2>
	<ol>
		<li><a href="/test/" aria-current="page">Page 1</a></li>
		<li><a href="/test/1/">Page 2</a></li>
		<li><a href="/test/2/">Page 3</a></li>
	</ol>
</nav>
```

--------------------------------

### Run Eleventy with Deno x

Source: https://www.11ty.dev/docs/javascript-runtime

Use `deno x` for Deno v2.6+ to run Eleventy. This command includes implied `--allow-all` and `npm:` by default. Use `--serve` to start a development server.

```bash
deno x @11ty/eleventy
```

```bash
deno x @11ty/eleventy --serve
```

--------------------------------

### Install Pug Plugin for Eleventy

Source: https://www.11ty.dev/docs/languages/pug

Install the Pug plugin using npm. This is required for Eleventy v3 and newer.

```bash
npm install @11ty/eleventy-plugin-pug
```

--------------------------------

### Configure Server Options (CommonJS)

Source: https://www.11ty.dev/docs/dev-server

Configure the development server using `setServerOptions` in your `eleventy.config.js` with CommonJS syntax. This example covers core settings like live reload and port.

```javascript
module.exports = function(eleventyConfig) {
	eleventyConfig.setServerOptions({
		// Default values are shown:

		// Whether the live reload snippet is used
	liveReload: true,

		// Whether DOM diffing updates are applied where possible instead of page reloads
	domDiff: true,

		// The starting port number
		// Will increment up to (configurable) 10 times if a port is already in use.
		port: 8080,

		// Additional files to watch that will trigger server updates
		// Accepts an Array of file paths or globs (passed to `chokidar.watch`).
		// Works great with a separate bundler writing files to your output folder.
		// e.g. `watch: ["_site/**/*.css"]`
		watch: [],

		// Show local network IP addresses for device testing
		showAllHosts: false,

		// Use a local key/certificate to opt-in to local HTTP/2 with https
		https: {
			// key: "./localhost.key",
			// cert: "./localhost.cert",
		},

		// Change the default file encoding for reading/serving files
		encoding: "utf-8",

		// Show the dev server version number on the command line
		showVersion: false,

		// Added in Dev Server 2.0+
		// The default file name to show when a directory is requested.
		indexFileName: "index.html",

		// Added in Dev Server 2.0+
		// An object mapping a URLPattern pathname to a callback function
		// for on-request processing (read more below).
		onRequest: {},
	});
};
```

--------------------------------

### Example Output of Stargazers Count

Source: https://www.11ty.dev/docs/quicktips/eliminate-js

This is an example of how the stargazers count will be rendered in your Eleventy site after implementing the template syntax.

```plaintext
1515 GitHub Stars
```

--------------------------------

### Run Eleventy Build

Source: https://www.11ty.dev/docs/usage

Executes the Eleventy build process for the current directory, outputting to the _site folder.

```bash
# Searches the current directory, outputs to ./_site
npx @11ty/eleventy

# `npx @11ty/eleventy` is the same as:
npx @11ty/eleventy --input=. --output=_site
```

```bash
# Searches the current directory, outputs to ./_site
pnpm exec eleventy

# `pnpm exec eleventy` is the same as:
pnpm exec eleventy --input=. --output=_site
```

```bash
# Searches the current directory, outputs to ./_site
yarn exec eleventy

# `yarn exec eleventy` is the same as:
yarn exec eleventy --input=. --output=_site
```

--------------------------------

### MDX Content Example

Source: https://www.11ty.dev/docs/languages/mdx

This is an example of an MDX file, demonstrating front matter and the inclusion of a React component. Ensure your project is set up for ESM.

```mdx
---
key: World
---
export function Exclaim(props) {
  return <>{props.target}!!!</>
}

```

--------------------------------

### Initialize package.json

Source: https://www.11ty.dev/docs

Commands to initialize a new package.json file using different package managers.

```bash
npm init -y
```

```bash
pnpm init
```

```bash
yarn init
```

--------------------------------

### Install Mustache Plugin for Eleventy

Source: https://www.11ty.dev/docs/languages/mustache

Install the Mustache plugin using npm. This is required for using `.mustache` files in Eleventy versions 3 and newer.

```bash
npm install @11ty/eleventy-plugin-mustache
```

--------------------------------

### Basic HTML Structure Example

Source: https://www.11ty.dev/docs/quicktips/edit-on-github-links

This is a sample of a basic HTML structure for an Eleventy layout file, showing where to place the edit link.

```html
…
    <footer>
      © 2019 Eleventy
    </footer>
  </body>
</html>
```

--------------------------------

### Inclusive Language Linter Example (ESM)

Source: https://www.11ty.dev/docs/config

An example linter that checks for trigger words in markdown files and logs a warning. This functionality is also available as a plugin.

```javascript
export default function (eleventyConfig) {
	eleventyConfig.addLinter(
		"inclusive-language",
		function (content, inputPath, outputPath) {
			let words =
				"simply,obviously,basically,of course,clearly,just,everyone knows,however,easy".split(
					","
				);

			// Eleventy 1.0+: use this.inputPath and this.outputPath instead
			if (inputPath.endsWith(".md")) {
				for (let word of words) {
					let regexp = new RegExp("\\b(" + word + ")\\b", "gi");
					if (content.match(regexp)) {
						console.warn(
							`Inclusive Language Linter (${inputPath}) Found: ${word}`
						);
					}
				}
			}
		}
	);
};
```

--------------------------------

### Nunjucks Layout File Example

Source: https://www.11ty.dev/docs/layouts

An example of a Nunjucks layout file. It includes basic HTML structure and uses the `content` variable, piped through the `safe` filter to prevent double-escaping.

```njk
---
title: My Rad Blog
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}
  </body>
</html>
```

--------------------------------

### Install cross-env for Cross-Platform Debugging

Source: https://www.11ty.dev/docs/debugging

Install the 'cross-env' package to manage environment variables consistently across different operating systems. This is useful for setting the DEBUG variable in npm scripts.

```bash
npm install cross-env
```

--------------------------------

### Run Eleventy

Source: https://www.11ty.dev/docs

Execute the local version of Eleventy to build your project.

```bash
npx @11ty/eleventy
```

```bash
pnpm exec eleventy
```

```bash
yarn exec eleventy
```

--------------------------------

### Basic Eleventy Computed Data Example

Source: https://www.11ty.dev/docs/data-computed

Demonstrates how to use `eleventyComputed` to dynamically set a data property based on existing data. This example shows deep merging and overriding properties.

```yaml
---
key: My Key
eleventyComputed:
  key: "This Is {{ key }}"
---
```

--------------------------------

### Check Eleventy Version

Source: https://www.11ty.dev/docs/global-installation

Verifies the installed version of the Eleventy CLI.

```bash
$ eleventy --version
3.1.5
```

--------------------------------

### Highlighting Code

Source: https://www.11ty.dev/docs/languages/markdown

Example of a fenced code block used for syntax highlighting.

```ts
function hello(name: string) {
	console.log(`Hello ${name}`);
}
```

--------------------------------

### Using `inputPathToUrl` in Liquid

Source: https://www.11ty.dev/docs/filters/inputpath-to-url

Demonstrates how to use the `inputPathToUrl` filter in a Liquid template to link to a file. The path should be relative to the input directory.

```liquid
<a href="{{ "index.md" | inputPathToUrl }}">Home</a>
```

--------------------------------

### Render MDX Component

Source: https://www.11ty.dev/docs/languages/mdx

Example of rendering an MDX component with a target property.

```mdx
# Hello from <Exclaim target={props.key} />
```

--------------------------------

### Configure Server Options (ESM)

Source: https://www.11ty.dev/docs/dev-server

Use `setServerOptions` in your `eleventy.config.js` to customize the development server. This example shows common options like live reload, DOM diffing, and port.

```javascript
export default function(eleventyConfig) {
	eleventyConfig.setServerOptions({
		// Default values are shown:

		// Whether the live reload snippet is used
	liveReload: true,

		// Whether DOM diffing updates are applied where possible instead of page reloads
	domDiff: true,

		// The starting port number
		// Will increment up to (configurable) 10 times if a port is already in use.
		port: 8080,

		// Additional files to watch that will trigger server updates
		// Accepts an Array of file paths or globs (passed to `chokidar.watch`).
		// Works great with a separate bundler writing files to your output folder.
		// e.g. `watch: ["_site/**/*.css"]`
		watch: [],

		// Show local network IP addresses for device testing
		showAllHosts: false,

		// Use a local key/certificate to opt-in to local HTTP/2 with https
		https: {
			// key: "./localhost.key",
			// cert: "./localhost.cert",
		},

		// Change the default file encoding for reading/serving files
		encoding: "utf-8",

		// Show the dev server version number on the command line
		showVersion: false,

		// Added in Dev Server 2.0+
		// The default file name to show when a directory is requested.
		indexFileName: "index.html",

		// Added in Dev Server 2.0+
		// An object mapping a URLPattern pathname to a callback function
		// for on-request processing (read more below).
		onRequest: {},
	});
};
```

--------------------------------

### Define Directory Data File

Source: https://www.11ty.dev/docs/data-cascade

Example of a JSON data file for a directory.

```json
{
	"tags": ["posts"]
}
```

--------------------------------

### Set Input and Output Directories (CommonJS)

Source: https://www.11ty.dev/docs/programmatic

Instantiate Eleventy with the input and output directory paths as the first two arguments. Use `write`, `toJSON`, or `toNDJSON` to process.

```javascript
(async function () {
	const { Eleventy } = await import("@11ty/eleventy");

	let elev = new Eleventy(".", "_site");

	// Use `write` or `toJSON` or `toNDJSON`
})();
```

--------------------------------

### Configure Output Directory via Method

Source: https://www.11ty.dev/docs/config

Uses the setOutputDirectory method to define the output directory.

```javascript
export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setOutputDirectory("dist");
};
```

```javascript
module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setOutputDirectory("dist");
};
```

--------------------------------

### Define Front Matter in Layout

Source: https://www.11ty.dev/docs/data-cascade

Example of setting metadata in a Nunjucks layout file.

```nunjucks
---
title: This is a Very Good Blog Post
author: Zach
tags:
  - JavaScript
---
```