Меню категорій

Створення статичного сайту за допомогою Eleventy

Кілька слів про дуже простий і водночас потужний генератор статичних сайтів Eleventy. Ти просто мусиш спробувати його!
Категорії: Eleventy

Eleventy – дуже простий і водночас багатофункціональний генератор статичних сайтів. Я перепробував досить велику кількість схожих конструкторів, та в результаті зупинився саме на Eleventy, оскільки він має багато беззаперечних переваг у порівнянні з конкурентами. Перелічу основні.

Легкий старт

Дійсно, почати працювати з Eleventy більш ніж просто. Вистачає встановити його з допомогою менеджера пакунків npm:

npm install -g @11ty/eleventy

І після цього відразу можна починати писати сайт. Наприклад, створити у теці з майбутнім сайтом файл index.md та додати в нього простий шматок коду в розмітці Markdown:

# Site Title

Після цього в тій же теці запустити команду:

eleventy

У нас з'явиться ще одна тека з назвою _site, у якій і буде генеруватися готовий статичний сайт, а в ній буде створений файл index.html із наступним вмістом:

<h1>Site Title</h1>

Просте формування URL-адрес сторінок

Ти можеш створювати будь-яку кількість вкладених тек, вони автоматично додаватимуться до URL-адреси майбутньої сторінки. Наприклад, файл /web/eleventy/start.md згенерується у файл _site/web/eleventy/start/index.html.

Автоматичне копіювання додаткових файлів до теки сторінки

Додай до команди генерування сайту перелік форматів файлів, попередньо створених чи скопійованих у робочу теку, і вони всі будуть перенесені в теку з готовим сайтом:

eleventy --formats=md,jpg,mp3

Якщо, наприклад, файл image.jpg знаходився за шляхом /web/eleventy/first-steps, його кінцевий шлях виглядатиме отак: _site/web/eleventy/first-steps/image.jpg.

Інший спосіб полягає в тому, що можна відразу внести типи файлів, які повинні копіюватися при генеруванні сайту, у файл конфігурації .eleventy.js. Для цього всередину функції module.exports необхідно додати наступний код:

eleventyConfig.setTemplateFormats([
    "md",
    "jpg",
    "mp3"
]);

А можна вказати цілу теку, яка скопіюється з усім вмістом. Наприклад, теку з CSS-файлами:

eleventyConfig.addPassthroughCopy('css');

У цій же функції можна змінити вихідну теку для згенерованого сайту (за замовчуванням він генерується в підтеку _site). Наприклад, я маю дві локальні адреси сайтів https://test1 та https://test2, які розміщені поряд у теках test1 та test2 відповідно. Я будую структуру сайту на test1, а готовий результат хочу бачити за адресою test2. Щоб таке організувати, достатньо повернути один параметр у вищезгаданій функції module.exports:

return {
    dir: {
        output: "../test2"
    }
}

Раджу прочитати:

Прокоментувати

На сайті відображається лише твоє ім'я та коментар. Електронна пошта зберігається виключно для зв'язку з тобою за потреби та в жодному разі не передається стороннім особам.

Цей сайт захищений системою reCAPTCHA від Google. Політика конфіденційності та Загальні положення та умови.