Blog

Premiers pas avec Eleventy – SitePoint


Onze (ou 11ty) est un générateur de site statique (SSG) Node.js. Les SSG effectuent la plupart des travaux de rendu au moment de la construction pour créer un ensemble de fichiers HTML, CSS et JavaScript statiques. Les pages résultantes n’ont pas besoin d’avoir des dépendances côté serveur telles que des environnements d’exécution ou des bases de données.

Cela conduit à plusieurs avantages clés:

  • l’hébergement est simple: vous diffusez des fichiers HTML
  • les systèmes sont sécurisés: il n’y a rien à pirater
  • les performances peuvent être excellentes.

Eleventy est devenu de plus en plus populaire et a attiré l’attention de grands noms du développement Web. Il est idéal pour les sites de contenu et les blogs, mais il a été adapté pour les boutiques en ligne et les systèmes de rapports.

Dans la plupart des cas, vous utiliserez Eleventy pour générer des pages HTML à partir de documents Markdown qui insèrent du contenu dans des modèles alimentés par des moteurs tels que Nunchucks. Cependant, ce didacticiel montre également comment utiliser Eleventy comme système de construction complet pour tous les actifs. Vous n’avez pas nécessairement besoin d’un système distinct tel que les scripts npm, le webpack ou Gulp.js, mais vous pouvez toujours profiter des compilations automatisées et du rechargement en direct.

Avez-vous besoin d’un framework JavaScript?

Quelques SSG adoptent des frameworks JavaScript côté client tels que React ou Vue.js. Tu pouvez utilisez un framework avec Eleventy, mais il n’est pas appliqué.

À mon avis, un framework JavaScript est probablement inutile, sauf si vous créez une application complexe. Et si vous créez une application, un SSG n’est pas le bon outil! Gatsby les fans peuvent ne pas être d’accord, alors s’il vous plaît défie-moi / ridicule sur Twitter!

Montre-moi le code

Eleventy prétend être simple, mais cela peut être intimidant lorsqu’on dépasse les bases. Ce tutoriel montre comment créer un site simple avec des pages et des articles de blog / article – une tâche souvent gérée par WordPress.

Le code complet est disponible sur https://github.com/craigbuckler/11ty-starter. Vous pouvez le télécharger, l’installer et le lancer sous Windows, macOS ou Linux en entrant les commandes suivantes dans votre terminal:

git clone https://github.com/craigbuckler/11ty-starter
cd 11ty-starter
npm i
npx eleventy --serve

Accédez ensuite à la page d’accueil à l’adresse http: // localhost: 8080 dans votre navigateur.

Les étapes ci-dessous décrivent comment créer le site à partir de zéro.

Installez Eleventy

Comme tout projet Node.js, commencez par créer un répertoire et initialiser un package.json fichier:

mkdir mysite
cd mysite
npm init

Ensuite, installez Eleventy en tant que dépendance de développement:

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

Remarque: ce projet installe des modules en tant que dépendances de développement car ils ne doivent être exécutés que sur une machine de développement. Certains hôtes dotés de processus de construction automatisés peuvent nécessiter l’utilisation de dépendances d’exécution standard.

Rendre votre première page

Créer un src répertoire dans lequel tous les fichiers source résideront, puis créez un index.md fichier à l’intérieur. Ajoutez du contenu de page d’accueil tel que:

‐‐‐
title: 11ty starter site
‐‐‐

This is a demonstration website using the [11ty static site generator](https://www.11ty.dev/). It shows pages, blog posts, lists, and tags.

The whole build process is managed through 11ty.

Contenu entre le ‐‐‐ les marqueurs de tiret sont connus comme matière première. Il définit les métadonnées nom-valeur de la page qui peuvent être utilisées pour définir les paramètres d’Eleventy et des modèles. Seulement un title est défini ici, mais vous allez bientôt ajouter des descriptions, des dates, des balises et d’autres données.

Un fichier de configuration Eleventy nommé .eleventy.js doit être créé dans le dossier racine de votre projet. Cet exemple de code simple renvoie un objet, qui spécifie ce qui suit:

  1. la source src répertoire des fichiers source
  2. les build répertoire dans lequel les fichiers du site Web seront créés

module.exports = config => {

  
  return {

    dir: {
      input: 'src"https://www.sitepoint.com/,
      output: 'build'
    }

  };
};

Pour créer le site et démarrer un serveur de rechargement en direct alimenté par Browsersync, entrez ce qui suit:

npx eleventy --serve

Eleventy rend tout ce qu’il trouve dans le src répertoire et renvoie le contenu résultant vers build:

$ npx eleventy --serve
Writing build/index.html from ./src/index.md.
Wrote 1 file in 0.12 seconds (v0.11.0)
Watching...
[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:8080
    External: http://172.27.204.106:8080
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ---------------------------------------
[Browsersync] Serving files from: build

Dans ce cas, un seul build/index.html le fichier est créé est accessible en chargeant l’URL http: // localhost: 8080 dans votre navigateur.

premier 11ty rendu

Le fichier HTML créé à build/index.html contient le contenu rendu à partir du fichier de démarque à src/index.md:

<p>This is a demonstration website using the <a href="https://www.11ty.dev/">11ty static site generatora>. It shows pages, blog posts, lists, and tags.p>
<p>The whole build process is managed through 11ty.p>

Le serveur Eleventy peut être arrêté avec Ctrl | Cmd + C.

Remarque: il est rarement nécessaire d’arrêter Eleventy pendant le développement du site, car les nouveaux fichiers sont automatiquement rendus. Cependant, les sections ci-dessous ajoutent d’autres options de configuration, donc un redémarrage est nécessaire.

Création de modèles

Eleventy peut utiliser presque tous les moteurs de création de modèles JavaScript. Nunchucks est une bonne option car elle est complète et utilisée tout au long de documentation sur 11ty.dev.

Changer le sujet principal dans src/index.md pour ça:

‐‐‐
title: 11ty starter site
description: This is a demonstration website generated using the 11ty static site generator.
layout: page.njk
‐‐‐

Cela demande à Eleventy d’utiliser le page.njk Modèle Nunchucks pour la mise en page. Par défaut, Eleventy recherche des modèles dans un _includes sous-répertoire dans le répertoire source (src/). Tous les fichiers qui s’y trouvent ne sont pas rendus eux-mêmes mais sont utilisés pendant le processus de construction.

Créez ce nouveau modèle sur src/_includes/page.njk:

{% include "partials/htmlhead.njk" %}

<main>
{% block content %}

  <h1>{{ title }}h1>

  {{ content | safe }}

{% endblock %}
main>

{% include "partials/htmlfoot.njk" %}

Le modèle place le title défini dans l’introduction de la page dans un

titre et remplace {{ content }} avec HTML généré à partir du Markdown. (Il utilise le safe Filtre Nunchucks pour afficher du HTML sans les guillemets ni les crochets.)

Les deux {% include %} les fichiers de référence des définitions inclus dans le modèle. Créez un fichier d’en-tête HTML à src/_includes/partials/htmlhead.njk, qui utilise également la page title et description:


<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{{ title }}title>
  <meta name="description" content="{{ description }}">
head>
<body>

Créez ensuite le pied de page HTML à src/_includes/partials/htmlfoot.njk:

body>
html>

Arrêtez et redémarrez Eleventy avec npx eleventy --serve.

Le rendu buildindex.html Le fichier contient maintenant une page HTML entièrement formée:


<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>11ty starter sitetitle>
  <meta name="description" content="This is a demonstration website generated using the 11ty static site generator.">
head>
<body>

  <h1>11ty starter siteh1>

  <p>This is a demonstration website using the <a href="https://www.11ty.dev/">11ty static site generatora>. It shows pages, blog posts, lists, and tags.p>
  <p>The whole build process is managed through 11ty.p>

body>
html>

Remarque: lorsque vous affichez la source dans un navigateur, vous verrez également un