---

eleventyNavigation:

parent: Eleventy Projects

key: Getting Started

title: Get Started

pinned: true

order: -2

communityLinksKey: getting-started

overrideCommunityLinks: true

---

<h1>Get Started</h1>

<template webc:type="11ty" 11ty:type="njk" webc:raw webc:nokeep>

{% callout %}

{% include "star-on-github.njk" %}

{% endcallout %}

</template>

<p>Eleventy <eleventy-version></eleventy-version> requires a <a href="javascript-runtime.webc">JavaScript runtime</a>, typically <strong><a href="https://nodejs.org/">Node.js</a></strong> (<strong>version <node-minimum></node-minimum></strong> or higher).</p>

<p>You can check whether or not you have Node.js installed by running <code>node --version</code> in a terminal application. (<a href="/docs/terminal-window/"><em>Well, wait—what is a Terminal?</em></a>) If the command is not found or it reports a number lower than <node-minimum></node-minimum>, you will need to <a href="https://nodejs.org/en/download/">download and install Node.js</a> before moving on to the next step. Learn why it’s encouraged to use <a href="javascript-runtime.webc#odd-numbered-versions-of-node-js">even numbered releases of Node.js</a>.</p>

<p>Prefer to watch videos instead? Check out <a href="https://www.youtube.com/watch?v=kzf9A9tkkl4"><strong>6 minutes to Build a Blog from Scratch</strong></a>.</p>

<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>

## <span class="numberflag"><span class="sr-only">Step</span> 1</span> Make a Project Directory

Create a directory for your project using the `mkdir` command (short for _make directory_):

</template>

<syntax-highlight language="bash">

mkdir eleventy-sample

</syntax-highlight>

<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>

Now move into that directory with the `cd` command (short for _change directory_):

</template>

<syntax-highlight language="bash">

cd eleventy-sample

</syntax-highlight>

<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>

## <span class="numberflag"><span class="sr-only">Step</span> 2</span> Install Eleventy

### Create a `package.json`

Installing Eleventy into a project requires a `package.json` file.

</template>

<script type="module" src="/js/seven-minute-tabs.js" webc:keep></script>

<seven-minute-tabs class="tabs-flush tabs-right" persist sync autoheight>

<div role="tablist" aria-label="Choose your Package Manager">

<a href="#quickstart-run-2a-npm" role="tab" data-tabs-persist="pkgmgr:npm">npm</a>

<a href="#quickstart-run-2a-pnpm" role="tab" data-tabs-persist="pkgmgr:pnpm">pnpm</a>

<a href="#quickstart-run-2a-yarn" role="tab" data-tabs-persist="pkgmgr:yarn">Yarn</a>

</div>

<div id="quickstart-run-2a-npm" role="tabpanel">

<syntax-highlight language="bash">npm init -y</syntax-highlight>

<p>The <code>npm</code> command (included with Node.js) will create a <code>package.json</code> file for you with <a href="https://docs.npmjs.com/cli/init"><code>npm init -y</code></a>. The <code>-y</code> flag tells <code>npm</code> to use default values and skips the questionnaire.</p>

<p>Use the following command if you want to use <a href="/docs/cjs-esm.md">ESM in your project and not CommonJS</a>.</p>

<syntax-highlight language="bash">npm pkg set type="module"</syntax-highlight>

</div>

<div id="quickstart-run-2a-pnpm" role="tabpanel">

<syntax-highlight language="bash">pnpm init</syntax-highlight>

<p>Learn more about <a href="https://pnpm.io/">pnpm</a> (it requires separate installation).</p>

</div>

<div id="quickstart-run-2a-yarn" role="tabpanel">

<syntax-highlight language="bash">yarn init</syntax-highlight>

<p>Learn more about <a href="https://yarnpkg.com/">yarn</a> (it requires separate installation).</p>

</div>

</seven-minute-tabs>

<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>

### Install Eleventy

[`@11ty/eleventy` is published on npm](https://www.npmjs.com/package/@11ty/eleventy) and we can install and save it into our project’s `package.json` by running:

</template>

<seven-minute-tabs class="tabs-flush tabs-right" persist sync autoheight>

<div role="tablist" aria-label="Choose your Package Manager">

<a href="#quickstart-run-2b-npm" role="tab" data-tabs-persist="pkgmgr:npm">npm</a>

<a href="#quickstart-run-2b-pnpm" role="tab" data-tabs-persist="pkgmgr:pnpm">pnpm</a>

<a href="#quickstart-run-2b-yarn" role="tab" data-tabs-persist="pkgmgr:yarn">Yarn</a>

</div>

<div id="quickstart-run-2b-npm" role="tabpanel">

<syntax-highlight language="bash">

npm install @11ty/eleventy

</syntax-highlight>

</div>

<div id="quickstart-run-2b-pnpm" role="tabpanel">

<syntax-highlight language="bash">

pnpm install @11ty/eleventy

</syntax-highlight>

</div>

<div id="quickstart-run-2b-yarn" role="tabpanel">

<syntax-highlight language="bash">

yarn add @11ty/eleventy

</syntax-highlight>

</div>

</seven-minute-tabs>

<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>

_You may also [install Eleventy globally](/docs/global-installation/) but the `package.json` installation method above is recommended._

## <span class="numberflag"><span class="sr-only">Step</span> 3</span> Run Eleventy

</template>

<seven-minute-tabs class="tabs-flush tabs-right" persist sync autoheight>

<div role="tablist" aria-label="Choose your Package Manager">

<a href="#quickstart-run-3a-npm" role="tab" data-tabs-persist="pkgmgr:npm">npm</a>

<a href="#quickstart-run-3a-pnpm" role="tab" data-tabs-persist="pkgmgr:pnpm">pnpm</a>

<a href="#quickstart-run-3a-yarn" role="tab" data-tabs-persist="pkgmgr:yarn">Yarn</a>

</div>

<div id="quickstart-run-3a-npm" role="tabpanel">

<syntax-highlight language="bash">

npx @11ty/eleventy

</syntax-highlight>

<p>We can use the <code>npx</code> command (also provided by Node.js) to run our local project's version of Eleventy.</p>

</div>

<div id="quickstart-run-3a-pnpm" role="tabpanel">

<syntax-highlight language="bash">

pnpm exec eleventy

</syntax-highlight>

</div>

<div id="quickstart-run-3a-yarn" role="tabpanel">

<syntax-highlight language="bash">

yarn exec eleventy

</syntax-highlight>

</div>

</seven-minute-tabs>

<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>

Here’s what your command line should look like after you run Eleventy:

```11ty-output

[11ty] Wrote 0 files in 0.03 seconds ({% latestVersion versions, config %})

```

If you see `({% latestVersion versions, config %})` in your output you know you’re using the newest version. However, Eleventy didn’t process any files! This is expected—we have an empty folder with no templates inside.

## <span class="numberflag"><span class="sr-only">Step</span> 4</span> Create some templates

A <dfn>template</dfn> is a content file written in a [format such as Markdown, HTML, Liquid, Nunjucks, and more](/docs/languages/), which Eleventy transforms into a page (or pages) when building our site.

Let’s run two commands to create two new template files.

</template>

<seven-minute-tabs class="tabs-flush" persist sync autoheight>

<div role="tablist" aria-label="Choose your Operating System">

<a href="#quickstart-os-nix" id="quickstart-os-mac-btn" role="tab" data-tabs-persist="os:mac">macOS</a>

<a href="#quickstart-os-nix" role="tab" data-tabs-persist="os:posix">Linux</a>

<a href="#quickstart-os-win" role="tab" data-tabs-persist="os:win">Windows</a>

<a href="#quickstart-os-all" role="tab" data-tabs-persist="os:all">Cross Platform</a>

</div>

<div id="quickstart-os-nix" role="tabpanel">

<syntax-highlight language="bash">

echo '<!doctype html><title>Page title</title><p>Hi</p>' > index.html

echo '# Heading' > README.md

</syntax-highlight>

</div>

<div id="quickstart-os-win" role="tabpanel">

<syntax-highlight language="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'

</syntax-highlight>

<p>If the <code>out-file</code> command is not available in your Windows Terminal window (it’s PowerShell specific), use the Cross Platform method instead.</p>

</div>

<div id="quickstart-os-all" role="tabpanel">

<syntax-highlight language="bash">

echo '<!doctype html><title>Page title</title><p>Hi</p>' | npx @11ty/create index.html

echo '# Heading' | npx @11ty/create README.md

</syntax-highlight>

<p>Learn more about <a href="https://github.com/11ty/create"><code>@11ty/create</code></a> <em>(requires Node.js 18 or newer)</em>.</p>

</div>

</seven-minute-tabs>

<p>Alternatively, you can create these using any text editor — make sure you save them into your project folder and they have the correct file extensions.</p>

<p>After you’ve created an HTML template and a Markdown template, let’s run Eleventy again with the following command:</p>

<seven-minute-tabs class="tabs-flush tabs-right" persist sync autoheight>

<div role="tablist" aria-label="Choose your Package Manager">

<a href="#quickstart-run-4-npm" role="tab" data-tabs-persist="pkgmgr:npm">npm</a>

<a href="#quickstart-run-4-pnpm" role="tab" data-tabs-persist="pkgmgr:pnpm">pnpm</a>

<a href="#quickstart-run-4-yarn" role="tab" data-tabs-persist="pkgmgr:yarn">Yarn</a>

</div>

<div id="quickstart-run-4-npm" role="tabpanel">

<syntax-highlight language="bash">

npx @11ty/eleventy

</syntax-highlight>

</div>

<div id="quickstart-run-4-pnpm" role="tabpanel">

<syntax-highlight language="bash">

pnpm exec eleventy

</syntax-highlight>

</div>

<div id="quickstart-run-4-yarn" role="tabpanel">

<syntax-highlight language="bash">

yarn exec eleventy

</syntax-highlight>

</div>

</seven-minute-tabs>

<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>

The output might look like this:

```11ty-output

[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 ({% latestVersion versions, config %})

```

We’ve now compiled our two content templates in the current directory into the output folder (`_site` is the default).

If you’d like to experiment further with [template file syntax](/docs/languages/), edit the following sample `README.md` file in your browser. [Front Matter](/docs/data-frontmatter/), [Liquid](/docs/languages/liquid/) and [Markdown](/docs/languages/markdown/) syntax are in use.

</template>

<is-land on:interaction="touchstart,click,focusin" import="/js/eleventy-editor.js">

<eleventy-editor focus label="Edit README.md" data-editor-filename="README.md">

<syntax-highlight language="markdown" :copy-button-enabled="false">

---

title: Heading

---

# {{ title }}

</syntax-highlight>

</eleventy-editor>

</is-land>

<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>

## <span class="numberflag"><span class="sr-only">Step</span> 5</span> Gaze upon your templates

Use `--serve` to start up a hot-reloading local web server.

</template>

<seven-minute-tabs class="tabs-flush tabs-right" persist sync autoheight>

<div role="tablist" aria-label="Choose your Package Manager">

<a href="#quickstart-run-5-npm" role="tab" data-tabs-persist="pkgmgr:npm">npm</a>

<a href="#quickstart-run-5-pnpm" role="tab" data-tabs-persist="pkgmgr:pnpm">pnpm</a>

<a href="#quickstart-run-5-yarn" role="tab" data-tabs-persist="pkgmgr:yarn">Yarn</a>

</div>

<div id="quickstart-run-5-npm" role="tabpanel">

<syntax-highlight language="bash">

npx @11ty/eleventy --serve

</syntax-highlight>

</div>

<div id="quickstart-run-5-pnpm" role="tabpanel">

<syntax-highlight language="bash">

pnpm exec eleventy --serve

</syntax-highlight>

</div>

<div id="quickstart-run-5-yarn" role="tabpanel">

<syntax-highlight language="bash">

yarn exec eleventy -- --serve

</syntax-highlight>

</div>

</seven-minute-tabs>

<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>

Your command line might look something like:

```11ty-output

[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 ({% latestVersion versions, config %})

[11ty] Watching…

[11ty] Server at http://localhost:8080/

```

Open `http://localhost:8080/` or `http://localhost:8080/README/` in your favorite web browser to see your Eleventy site live! When you save your template files—Eleventy will refresh the browser with your new changes automatically!

## <span class="numberflag"><span class="sr-only">Step</span> 6</span> Put it online (optional)

Your output folder (`_site`) now contains all of the statically built files for your new web site. You can upload this folder to any web host! Head over to our [deployment documentation](/docs/deployment/) to read more about putting your Eleventy project online for everyone to see.

## <span class="numberflag"><span class="sr-only">Step</span> 7</span> Continue Learning…

Congratulations—you made something with Eleventy! Now put it to work:

1. Add more content! In the above tutorial we used [HTML](/docs/languages/html/) and [Markdown](/docs/languages/markdown/). Why not [JavaScript](/docs/languages/javascript/) or [WebC](/docs/languages/webc/) (for components) next? [Nunjucks](/docs/languages/nunjucks/) and [Liquid](/docs/languages/liquid/) are also very popular. Maybe you’re feeling super adventurous and want to [add your own custom type?](/docs/languages/custom/).

1. Use [a layout file so that you don’t have to repeat boilerplate on every template](/docs/layouts/).

1. Add a [configuration file](/docs/config/) to unlock advanced Eleventy capabilities!

1. Add [CSS, JavaScript, or Web Fonts](/docs/assets/) to your project.

1. It’s super easy to add automated [Image optimization](/docs/plugins/image/) too!

1. Learn more of the [command line options for Eleventy](/docs/usage/).

1. Perhaps you’d like to [consume data from third party APIs](/docs/data-js/) in your project?

</template>

<h3>Tutorials and Starter Projects</h3>

<p>For folks wanting to <strong>build a blog</strong>, you can learn how to <a href="https://www.youtube.com/watch?v=kzf9A9tkkl4">start from scratch</a> <em>(learn how it works)</em> or use our <a href="https://github.com/11ty/eleventy-base-blog">official Blog starter project</a> <em>(get up and running faster)</em>:</p>

<sites-list @size="lg">

<site-card @url="https://www.youtube.com/watch?v=kzf9A9tkkl4" @name="6 Minutes to Build a Blog from Scratch with Eleventy" @date="2023-03-20" @medialength="6m"></site-card>

<site-card @url="https://github.com/11ty/eleventy-base-blog" @name="eleventy-base-blog (Official Starter Project)" @date=""></site-card>

<site-card @url="https://www.filamentgroup.com/lab/build-a-blog/" @name="Build your own Blog from Scratch using Eleventy" @date="2018-12-26"></site-card>

</sites-list>

<p>You can also use one of the many <a href="/docs/starter/"><strong>Starter Projects</strong></a> or read some of our excellent Community-contributed <a href="/docs/tutorials/"><strong>Tutorials</strong></a> (a curated few of which are included below):</p>

<sites-list @size="md">

<site-card @url="https://www.youtube.com/watch?v=BKdQEXqfFA0" @name="Build an 11ty Site in 3 Minutes" @date="2021-02-20" @medialength="3m"></site-card>

<site-card @url="https://www.learnwithjason.dev/lets-learn-eleventy" @name="Let’s Learn Eleventy! on Learn with Jason" @date="2020-01-08" @medialength="1h32m"></site-card>

<site-card @url="https://www.youtube.com/watch?v=rZyNBd1WgVM" @name="Templating: Eleventy’s Superpower" @date="2021-07-17" @medialength="15m"></site-card>

<site-card @url="https://learneleventyfromscratch.com/" @name="Learn Eleventy from Scratch" @date="2020-05"></site-card>

<site-card @url="https://tatianamac.com/posts/beginner-eleventy-tutorial-parti/" @name="Beginner’s Guide to Eleventy" @date="2020-04-02"></site-card>

<site-card @url="https://sia.codes/posts/itsiest-bitsiest-eleventy-tutorial/" @name="Itsiest, Bitsiest Eleventy Tutorial" @date="2021-05-24"></site-card>

<site-card @url="https://www.youtube.com/watch?v=4wD00RT6d-g" @name="Turn static HTML/CSS into a blog with CMS using the JAMStack" @date="2021-06-24" @medialength="1h23m"></site-card>

</sites-list>

<template webc:type="11ty" 11ty:type="njk" webc:raw webc:nokeep>

<h3>More From the Community</h3>

{% include "11tybundle.njk" %}

</template>