Written by: Geoffrey Callaghan

how to get started with eleventy

How To Get Started With Eleventy

Eleventy (11ty) is a simple, flexible, and powerful static site generator. It allows you to create websites using various templating languages and generates static HTML files for deployment. Here’s a step-by-step guide to get started with Eleventy:


  1. Node.js and npm: Ensure you have Node.js and npm installed. You can download them from nodejs.org.
  2. A code editor: Such as Visual Studio Code, Sublime Text, or any other editor of your choice.

Step 1: Setting Up Your Project

  1. Create a project directory:

    mkdir my-eleventy-site
    cd my-eleventy-site
  2. Initialize a new Node.js project:

    npm init -y

    This command will create a package.json file in your project directory.

Step 2: Installing Eleventy

  1. Install Eleventy as a development dependency:
    npm install @11ty/eleventy --save-dev

Step 3: Creating Your First Eleventy Project

  1. Create a basic file structure:

    mkdir src
    echo '# Hello, Eleventy!' > src/index.md
  2. Configure Eleventy: Create a .eleventy.js configuration file in the root of your project directory:

    module.exports = function(eleventyConfig) {
      return {
        dir: {
          input: "src",
          output: "dist"

Step 4: Building and Serving Your Site

  1. Add build and serve scripts to your package.json:

      "scripts": {
        "build": "eleventy",
        "serve": "eleventy --serve"
  2. Build your site:

    npm run build
  3. Serve your site locally:

    npm run serve

    This will start a local development server, and you can view your site at http://localhost:8080.

Step 5: Developing Your Site

  1. Create pages and templates: You can add more Markdown files (.md), HTML files (.html), or other templating languages supported by Eleventy (such as Nunjucks, Liquid, Pug) in the src directory.

  2. Using layouts: Create a _layouts directory inside src, and add a layout file, e.g., base.njk (using Nunjucks as an example):

    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>{{ title }}</title>
      {{ content | safe }}
  3. Apply layout to your content: Modify src/index.md to use the layout:

    layout: base.njk
    title: Home Page
    # Hello, Eleventy!

    This will apply the base.njk layout to your index.md file.

Step 6: Customizing and Extending

  1. Add custom collections, filters, and shortcodes: You can extend Eleventy’s functionality by adding custom collections, filters, and shortcodes in your .eleventy.js configuration file.

  2. Organize your content: Structure your content into folders, use global data files, and take advantage of Eleventy’s flexible configuration options to suit your project’s needs.


You now have a basic Eleventy site up and running! From here, you can explore more advanced features and tailor your project to your specific needs. The Eleventy documentation is an excellent resource for learning more about what you can do with Eleventy.