Мне нравится идея использования статических сайтов для личных блогов или сайтов, которые не требуют частых обновлений или большой команды для управления контентом. Хотя в настоящее время я использую Jekyll для thebeerbrother.cl, во время поиска альтернативы JavaScript я наткнулся на Eleventy, который удивил меня своей простотой и множеством «автоматических» или «обычных» вещей, которые он делает. Я буду использовать его для предстоящего проекта :). Теперь позвольте мне показать вам, как установить и использовать его.

Перейти к одиннадцати

Eleventy — мощный генератор статических сайтов, который можно использовать для создания различных типов сайтов, в том числе блогов. Он построен с помощью JavaScript и не требует предварительных знаний о какой-либо конкретной среде веб-разработки. С Eleventy вы можете создавать быстрые, простые и эффективные статические сайты, не беспокоясь о настройке сложной среды разработки.

Начало работы с Eleventy:

Установите Node.js и создайте папку для проекта

Прежде чем начать использовать Eleventy, убедитесь, что на вашем компьютере установлен Node.js. Вы можете загрузить последнюю версию Node.js с официального сайта и следовать инструкциям по ее установке.

Создайте новый каталог на своем компьютере, где вы хотите хранить файлы блога. Вы можете назвать это как хотите.

Инициализируйте свой проект

Откройте терминал и перейдите в новый каталог. Выполните следующую команду, чтобы инициализировать ваш проект с помощью npm:

npm init -y

Это создаст файл package.json в вашем каталоге.

Установить одиннадцать

Выполните следующую команду в своем терминале, чтобы установить Eleventy:

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

Это установит Eleventy в качестве зависимости разработки в вашем проекте.

Создайте свой первый шаблон

Создайте в своем каталоге новый файл с именем index.html. Это будет главная страница вашего блога. Добавьте в этот файл базовый HTML-код, например:

<!DOCTYPE html>
<html>
  <head>
    <title>My Blog</title>
  </head>
  <body>
    <h1>Welcome to my blog!</h1>
  </body>
</html>

Создайте файл конфигурации

Создайте новый файл в вашем каталоге с именем .eleventy.js. Этот файл будет содержать ваши параметры конфигурации для Eleventy. Добавьте в этот файл следующий код:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("assets");

  return {
    dir: {
      input: ".",
      output: "_site",
      includes: "includes",
      layouts: "layouts",
      data: "data"
    }
  };
};

Этот код говорит Eleventy искать шаблоны в текущем каталоге, выводить сгенерированные файлы в каталог с именем _site и использовать каталоги includes, layouts и data для организации ваших шаблонов.

Создайте свой сайт

В терминале выполните следующую команду, чтобы создать сайт с помощью Eleventy:

npx eleventy

Это создаст файлы вашего блога в каталоге _site.

Предварительный просмотр вашего сайта

Для предварительного просмотра вашего блога вы можете запустить локальный веб-сервер в каталоге _site. Один из способов сделать это — использовать пакет http-server. Выполните следующую команду, чтобы установить его:

npm install -g http-server

Затем выполните следующую команду в своем терминале, чтобы запустить сервер:

http-server _site

Это запустит сервер в http://localhost:8080. Откройте веб-браузер и перейдите по этому URL-адресу, чтобы увидеть свой блог!