Мне нравится идея использования статических сайтов для личных блогов или сайтов, которые не требуют частых обновлений или большой команды для управления контентом. Хотя в настоящее время я использую 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-адресу, чтобы увидеть свой блог!