# Installation 11ty

Arborescence cible

```
mon-projet-11ty/
├── .git/                   # Dossier Git (créé après `git init`)
├── .gitignore              # Fichier pour ignorer node_modules, etc.
├── node_modules/           # Dossier des dépendances (généré après `npm install`)
├── src/
│   ├── _includes/
│   │   ├── layouts/
│   │   │   └── base.njk     # Layout principal
│   │   ├── components/
│   │   └── partials/
│   │       ├── header.njk
│   │       └── footer.njk
│   ├── _data/
│   │   └── site.json        # Données globales
│   ├── assets/
│   │   ├── css/
│   │   │   └── style.css
│   │   ├── js/
│   │   └── img/
│   ├── posts/
│   │   └── mon-premier-post.md
│   ├── pages/
│   │   └── about.md
│   └── index.md             # Page d'accueil
├── .eleventy.js             # Configuration d'11ty
├── package.json             # Dépendances et scripts
└── README.md                # Documentation du projet
```

### 1\. Initialiser le projet

Ouvre un terminal et exécute :

`# Créer un dossier pour ton projet mkdir mon-projet-11ty cd mon-projet-11ty # Initialiser Git git init # Créer un fichier .gitignore echo "node_modules/ dist/ .DS_Store" > .gitignore # Initialiser un projet Node.js npm init -y`

---

### 2\. Installer 11ty

Installe Eleventy en tant que dépendance de développement :

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

---

### 3\. Configurer 11ty

Crée un fichier `eleventy.config.js` à la racine avec une configuration de base :

```js
export default async function (eleventyConfig) {
    return {
        dir: {
            input: "src", // Dossier source
            output: "dist", // Dossier de sortie
            includes: "_includes", // Dossier des layouts/partials
            data: "_data", // Dossier des données globales
        },
        templateFormats: ["njk", "md", "liquid"],
        markdownTemplateEngine: "njk",
        htmlTemplateEngine: "njk",
    };
}
```

---

### 4\. Ajouter des scripts dans `package.json`

Ouvre `package.json` et ajoute ces scripts sous la clé `"scripts"` :

```js
{
    "scripts": {
        "start": "npx @11ty/eleventy --serve",
        "build": "npx @11ty/eleventy"
    },
}
```


---

### 5\. Créer une structure de base

Crée les dossiers et fichiers nécessaires :

```sh
mkdir src/_includes/layouts 
mkdir src/_includes/partials 
mkdir src/_data 
mkdir src/assets/css 
mkdir src/posts 
mkdir src/pages 
echo "" > src/index.md 
echo "" > src/_includes/layouts/base.njktouch  
echo "" > src/_includes/partials/header.njk
echo "" > src/_includes/partials/footer.njk
echo "" > src/_data/site.json
echo "" > src/assets/css/style.css
```

---

### 6\. Exemple de fichier `src/index.md`

```md
---
layout: "base.njk"
title: "Accueil"
---
# Bienvenue sur mon site ! 

Ceci est la page d'accueil.
```


---

### 7\. Exemple de layout `src/_includes/layouts/base.njk`

`<!DOCTYPE html> <html lang="fr"> <head>   <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>{{ title }}</title>  <link rel="stylesheet" href="/assets/css/style.css"> </head> <body>   {% include "partials/header.njk" %}  <main>    {{ content | safe }}  </main>  {% include "partials/footer.njk" %} </body> </html>`

---

### 8\. Lancer le serveur de développement

Exécute la commande suivante pour démarrer 11ty en mode développement (avec rechargement automatique) :

`npm start`

Ton site sera disponible à l’adresse [http://localhost:8080](http://localhost:8080).

---

### 9\. Générer le site pour la production

Pour générer une version optimisée du site (dans le dossier `dist/`), utilise :

`npm run build`

---

### 10\. Versionner avec Git

Ajoute tes fichiers et fais un premier commit :

`git add . git commit -m "Initialisation du projet 11ty"`

---

## Résumé des commandes utiles

`npm start`

Lance le serveur de développement.

`npm run build`

Génère le site pour la production.

`git add .`

Ajoute tous les fichiers modifiés à Git.

`git commit -m "..."`

Commite les changements.