Eleventy is a fantastic static site generator that gives you the flexibility to build sites your way. In this post, I'll walk you through the basics of getting started.

Installation

First, install Eleventy in your project:

npm install --save-dev @11ty/eleventy

Or with Bun:

bun add -d @11ty/eleventy

Basic Configuration

Create a .eleventy.js file in your project root:

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

Creating Your First Page

Create a simple Markdown file in your src directory:

---
title: Hello World
---

# Welcome

This is my first Eleventy page!

Building Your Site

Run Eleventy to build your site:

npx eleventy

Or use the serve command for development:

npx eleventy --serve

That's it! You now have a basic Eleventy site up and running.