{"id":68568,"date":"2023-04-27T11:34:11","date_gmt":"2023-04-27T10:34:11","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=68568&preview=true&preview_id=68568"},"modified":"2023-10-27T09:37:35","modified_gmt":"2023-10-27T08:37:35","slug":"eleventy","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/eleventy\/","title":{"rendered":"Comment cr\u00e9er un site web statique \u00e9l\u00e9gant avec Eleventy (11ty)"},"content":{"rendered":"

Avec l’essor des g\u00e9n\u00e9rateurs de sites statiques<\/a> (Static Site Generator ou SSG) comme Eleventy, la cr\u00e9ation d’un site web statique<\/a> \u00e9l\u00e9gant et efficace n’a jamais \u00e9t\u00e9 aussi facile.<\/p>\n

Dans cet article, nous verrons comment utiliser Eleventy pour cr\u00e9er un site web statique de portfolio \u00e0 la fois \u00e9tonnant et fonctionnel, sans avoir besoin d’un langage c\u00f4t\u00e9 serveur ou d’une base de donn\u00e9es.<\/p>\n

Vous apprendrez \u00e9galement comment d\u00e9ployer votre site web statique directement depuis votre d\u00e9p\u00f4t GitHub vers l’h\u00e9bergement de site statique<\/a> de Kinsta, obtenant ainsi rapidement la production de votre site web sur un domaine gratuit .kinsta.page<\/em>.<\/p>\n

Voici une d\u00e9monstration en direct<\/a> du site de portfolio statique que vous construirez avec Eleventy.<\/p>\n

\"Site
Site de portfolio statique et \u00e9l\u00e9gant<\/figcaption><\/figure>\n

Vous pouvez acc\u00e9der au d\u00e9p\u00f4t GitHub<\/a> de ce projet si vous souhaitez l’examiner de plus pr\u00e8s.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu’est-ce qu’Eleventy ?<\/h2>\n

Eleventy, \u00e9galement connu sous le nom de 11ty, est un g\u00e9n\u00e9rateur de sites statiques qui cr\u00e9e des sites web aliment\u00e9s par HTML<\/a>, CSS<\/a> et JavaScript<\/a> sans avoir besoin de bases de donn\u00e9es ni de langages de programmation backend<\/a>.<\/p>\n

Eleventy est connu pour sa simplicit\u00e9 et sa flexibilit\u00e9, car il ne vous oblige pas \u00e0 utiliser un seul langage de mod\u00e8le ou un seul framework. Il prend en charge plus de 10 langages de mod\u00e8les et vous permet m\u00eame d’en utiliser autant que vous le souhaitez dans un m\u00eame projet :<\/p>\n

\"Onze
Onze langages de mod\u00e8les<\/figcaption><\/figure>\n

Eleventy, comme la plupart des SSG, vous permet de construire le contenu de votre site statique en utilisant des composants r\u00e9utilisables plut\u00f4t que de cr\u00e9er des documents HTML complets pour chaque page.<\/p>\n\n

Comment installer Eleventy<\/h2>\n

Il est facile d’installer Eleventy. Voici comment proc\u00e9der :<\/p>\n

    \n
  1. Assurez-vous que Node.js<\/a> est install\u00e9 sur votre ordinateur. Vous pouvez le v\u00e9rifier en lan\u00e7ant la commande node -v<\/code> dans votre terminal. Vous n’\u00eates pas disponible ? Voici comment installer Node.js<\/a> sur votre ordinateur.<\/li>\n
  2. Cr\u00e9ez un nouveau r\u00e9pertoire pour votre projet.<\/li>\n
  3. Ouvrez votre terminal et ex\u00e9cutez la commande npm init -y<\/code> dans le r\u00e9pertoire de votre projet pour initialiser un nouveau projet Node.js, en cr\u00e9ant un fichier package.json<\/strong> avec les r\u00e9glages par d\u00e9faut.<\/li>\n
  4. Ex\u00e9cutez la commande npm install @11ty\/eleventy --save-dev<\/code> pour installer le package en tant que d\u00e9pendance de d\u00e9veloppement dans votre projet.<\/li>\n
  5. Voil\u00e0, c’est fait ! Vous pouvez maintenant lancer Eleventy en ex\u00e9cutant la commande npx @11ty\/eleventy<\/code> dans le r\u00e9pertoire de votre projet. Cette commande g\u00e9n\u00e9rera les fichiers de votre site et les placera dans un r\u00e9pertoire _site<\/strong> (ou dans le r\u00e9pertoire que vous avez configur\u00e9) dans le dossier de votre projet.<\/li>\n<\/ol>\n

    Note :<\/strong> Lorsque vous ex\u00e9cutez la commande npx @11ty\/eleventy<\/code>. Vous obtiendrez ce r\u00e9sultat :<\/p>\n

    [11ty] Wrote 0 files in 0.01 seconds (v2.0.0)<\/code><\/pre>\n
    Ici, 0 fichier est \u00e9crit car il n’y a pas de mod\u00e8les dans le dossier de votre projet.<\/p>\n
    Commandes et configuration d’Eleventy<\/h2>\n
    Vous avez maintenant cr\u00e9\u00e9 votre projet Eleventy, mais ce n’est pas tout. Vous devez cr\u00e9er quelques configurations et conna\u00eetre quelques commandes de base pour votre site statique qui peut \u00eatre servi au navigateur.<\/p>\n
    Commandes Eleventy<\/h3>\n
    Voici quelques-unes des principales commandes d’Eleventy que vous devez conna\u00eetre :<\/p>\n