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:

Prerequisites

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

Step 1: Setting Up Your Project

Create a project directory:

mkdir my-eleventy-site
cd my-eleventy-site

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

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

Step 3: Creating Your First Eleventy Project

Create a basic file structure:

mkdir src
echo '# Hello, Eleventy!' > src/index.md

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

Add build and serve scripts to your package.json:

{
  "scripts": {
    "build": "eleventy",
    "serve": "eleventy --serve"
  }
}

Build your site:
```
npm run build
```
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

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.

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">
<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>

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

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.
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.

Conclusion

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.