() translation by (you can also view the original English article)
Jekyll - це статична система генерації сайтів, яка дозволяє вам приймати текстові файли і перетворювати їх в складний красивий блог, не переймаючись про бази даних, проблеми безпеки, оновлення та інші труднощі, які можуть виникати з багатьма CMS і платформами блогів.
Подібно до більшості систем управління сайтами, теми Jekyll можна використовувати на сайтах. Проте на даний момент Jekyll не використовує теми в тому вигляді, до якого ми звикли.
На сьогодні теми Jekyll не є самостійними пакетами, які необхідно використовувати за допомогою інсталятора. Коли ви завантажуєте тему Jekyll, ви також завантажуєте всі файли, необхідні для запуску всього сайта Jekyll.
Це буде змінюватися в майбутній версії Jekyll, а зараз вам потрібно знати, як бути з тим, що теми Jekyll надаються з усім сайтом, прикріпленим до них.
У цьому уроці ми розглянемо налаштування теми Jekyll з самого початку, починаючи з деяких основних рекомендацій по установці, далі перейдемо до питання, як ознайомитись з функціями нової теми і пройдемся по порадам налаштування нового сайту або повторного використання вже існуючої теми.
Давайте почнемо!
Jekyll на Envato ринку
В категорії Jekyll на Envato Market є багато тем вартістю від $19 до $24. Пізніше ми будемо використовувати “Writer” і “Astro” (на даний момент два бестселери), щоб продемонструвати установку.
Установка Jekyll
Jekyll розроблена для установки в автономному режимі на вашому власному комп'ютері, вбудована в статичний HTML-сайт з її подальшим застосуванням. Під час додавання контенту, основний процес заключається в створенні записаного файла, додаванні переднього елемента вверху, заповненні решти файла контентом, і потім - перебудовою вашого сайту.
Після того, як ваш сайт буде створено, ви зможете розмістити його будь-яким способом, чи то за допомогою FTP, чи git-команд. Проте ми не будемо фокусуватися на розміщенні в цьому уроці, тому, якщо ви хочете дізнатися більше по цій темі, відвідайте розділ документації Jekyll.
Скоріше за все, ми зосередимось на частині вашого процесу установки сайту Jekyll, який відбувається в автономному режимі на вашому комп'ютері і починається з установки.
Попередні вимоги
Робота з Jekyll включає певне використання командного рядка, але якщо ви ніколи не працювали з командним рядком, нехай вас це не лякає. Для зручності я рекомендую "пробігтись" по деяким навчальним матеріалам: The Command Line for Web Design.
Якщо ваш комп'ютер працює з Windows, на жаль, офіційно Jekyll не підтримується. Це не означає, що ви не можете змусити його працювати, проте вам, можливо, доведеться подолати деякі перешкоди. Якщо ви хочете запустити Jekyll на Windows, ознайомтесь з подробицями в документації Jekyll.
В іншому випадку, якщо ви використовуєте Mac OS X, Linux або Unix, вам необхідно переконатись, що у вас встановлені необхідні ресурси:
Щоб перевірити, чи є встановленим Ruby, запустіть команду ruby -v. Щоб перевірити, що Ruby Gems запускається - gem -v. В обох випадках ці команди перевіряють номер версії, поки ви бачите число, повернене в ваш термінал, і ви можете рухатись далі.
Ми будемо працювати з Jekyll 3.1.x, тому вам не знадобиться NodeJS або Python, як вказується на сторінці документації по установці Jekyll.
Запуск установки Jekyll
Тепер, щоб встановити Jekyll на ваш комп'ютер, запустіть команду: gem install jekyll.
Якщо ви бачите повідомлення про те, що ви не підписали дозвіл, почніть команду з sudo і введіть ваш пароль при появі запиту.
Далі ви побачите декілька рядків, написаних в терміналі, де показаний процес установки. Коли він вказує, що "1 gem встановлено", тоді все готово.
Створення сайту Jekyll по замовчуванню
Давайте швидко створимо сайт Jekyll, щоб ви могли побачити, як він виглядає в стандартному, не тематичному вигляді, і ознайомитись зі структурою його файлів і папок. Створіть папку для розміщення сайту, а потім відкрийте термінал, який вказує на папку, і запустіть jekyll new.
Примітка: якщо в якийсь момент ви захочете створити новий сайт Jekyll у вкладеній папці, використовуйте команду: jekyll new subfolder_name.
коли налаштування сайту буде завершено, ви побачите повідомлення в своєму терміналі: “New jekyll site installed in <path>”. На цьому етапі всередині вашої папки ви побачите стандартний вміст сайта Jekyll.
Тепер запустіть команду jekyll serve, щоб оновити ваш сайт і запустити його в автономному режимі.
Коли ви побачите повідомлення "Сервер працює... натисніть ctrl-c, щоб зупинити" в своєму терміналі, ви можете перейти по посиланню http://localhost:4000 в браузері і перевірити сайт Jekyll по замовчуванню.
Тепер, коли ви бачили, як виглядає структура файлів і папок на сайті Jekyll по замовчуванню, а також його не тематичний вигляд, ви зможете краще зрозуміти, що ви бачите всередині типової завантаженої теми Jekyll.
Швидка демонстрація нових тем
Як ви знаєте з того, що ми говорили в цьому уроці, на даний момент теми Jekyll надаються з усіма файлами, необхідними для запуску всього сайта. І як ви бачили в останньому розділі, як тільки у вас будуть всі ці файли, ми можете запустити jekyll serve, щоб дозволити перегляд цього сайту в браузері.
Це означає, що при завантаженні нової теми Jekyll, ми можете просто розпакувати її, запустити jekyll serve і демонструвати теми одразу на повнофункціональному сайті Jekyll. Багато тем надаються навіть з уже включеним демонстраційним контентом.
Давайте подивимося на деякі приклади, використовуючи теми "Writer" і "Astro" (або будь-яку іншу, якій віддаєте перевагу).
Після розпакування виконайте пошук через структуру теми, поки не знайдете кореневу папку, в якій зберігаються всі файли сайта Jekyll. Ви повинні розпізнати цю папку в своїй стандартній ранішій установці Jekyll. Пошукайте файл _config.yml, каталог _includes і так далі.
Потім відкрийте термінал всередині папки і запустіть jekyll serve.
Якщо все успішно, ви побачите повідомлення "Адреса сервера:" з URL, який відображається в кінці терміналу. Скопіюйте та вставте цей URL в браузер і ви повинні побачити демо нової теми.
Відсутня залежність?
В деяких випадках ви можете побачити повідомлення про помилку під час спроби запустити jekyll serve. У такому разі подивіться, чи не скаржиться повідомлення на відсутність залежності, тобто, щось, що потрібно темі, щоб функціонувати, відсутнє в вашому налаштуванні.
У цьому прикладі, ви можете побачити в червоному тексті помилки, що “jekyll-paginate” є відсутнім.
Швидкий пошук в Google включає репозиторій Github для gem в питанні, надаючи команду, необхідну для його установки.
Після запуску вказаної команди і установки відсутньої залежності jekyll serve зможе працювати з темою як очікується.
Якщо демо не завантажується
Якщо ви перейдете по вказаному URL і не побачите сайт, наприклад, як тут:
то перевірте значення baseurl в файлі _config.yml. Цей файл, про який ми розповімо пізніше, контролює загальну конфігурацію всього сайту.
Змінна baseurl додається до основного домену, коли ми працюємо в автономному режимі, це http://localhost:4000.
У наведеному вище прикладі ми хочемо, щоб наш сайт показував http://localhost:4000. У файлі _config.yml наше значення baseurl встановлено на:
1 |
baseurl: "http://localhost" |
Спочатку це може здатися правильним, але оскільки це значення додається до основного домену, воно фактично заставляє сайт завантажити http://localhost:4000http://localhost.
Отже нам потрібно змінити значення на пустий рядок таким чином:
1 |
baseurl: "" |
Ваш сайт буде завантажуватись, як ви очікуєте.
Якщо замість цього ви хочете завантажити ваш сайт з підкаталогу, змініть значення baseurl на ім'я підкаталогу, обов'язково почніть і закінчіть скісною рискою:
1 |
baseurl: "/themedemo/" |
Ознайомтесь з темою
Згідно з однієї з причин, було б непогано почати роботу з теми прямо з її існуючої структури (окрім перевірки її роботи як і очікувалось), це дає вам можливість ознайомитися з функціями і робочими процесами.
Оскільки Jekyll забезпечує значну гнучкість, його теми можуть пропонувати функціональні можливості, які досить сильно відрізняються один від одного. Після запуску демонстрації нової теми, знайдіть хвилинку, щоб подивитися і побачити, який тип структури у теми. Шукайте, чи є в темі сторінки категорій, зображення, авторські сторінки і т.д. Зверніть увагу на ці функції, щоб ви змогли знайти документацію по темі і навчитися їх використовувати.
Ви також потрібно подивитися на структуру файлів і папок теми. Основні напрямки, які ви напевно хотіли б досліджувати, це:
- Будь-які макети сторінок, які можуть бути в темі, в папці _layouts.
- Будь-які користувацькі змінні, які вам потрібно задати на початку вашого контенту.
Вам також необхідно визначити, які розширені параметри конфігурації ви можете встановити в файлі сайту _config.yml, щоб використовувати особливості теми, такі як URL соцмереж, інформацію про автора, навігаційні посилання і т.д.
Зробіть її вашою
Тепер, коли ви маєте можливість переглянути тему і ознайомитись з нею, прийшов час використати її на вашому сайті. Залиште демо-версію, яку ви вже створили, без змін, щоб у вас була можливість порівняти ваш нещодавно створений сайт.
Очистіть демо-контент
Створіть нову папку на вашому комп'ютері і повторно розпакуйте з неї всі файли теми.
На цей раз, зайдіть в папку _posts і видаліть там всі файли так, щоб демо-повідомлення були ліквідовані.
Після цього видаліть будь-які файли .md (markdown) з кореневої папки, так щоб всі демо-сторінки також зникли.
Якщо захочете, ви можете знайти і видалити будь-які зображення, які використовуються в демо-контенті, такі як опубліковані мініатюри, якщо ви плануєте замінити їх на свої власні. Відображення демо-зображень залежить від самої теми.
Якщо ваша тема має демо-зображення, які ви хочете видалити, але ви не знаєте, де вони знаходяться, перегляньте документацію по темі, в якій все повинно бути написано. В іншому випадку, можливо, вам потрібно буде переглянути код в шаблонах теми і розібратися з цим.
Налаштування конфігурації сайта
Далі, вам слід відкрити файл _config.yml з кореневої папки і налаштувати будь-які розширені змінні, які потребує тема. Інколи деякі налаштування є загальними для всіх файлів _config.yml, таких як title, email, description і деякі інші. Проте деякі настройки будуть специфічними для даної теми.
Те, що вам потрібно зробити у файлі конфігурації сайту, залежить від теми, тому на даний момент рекомендується посилатися на документацію, де вказано, що робить кожне налаштування.
Наприклад, у темі Writer це можливо для налаштування користувацького меню навігації з використанням значення nav_list для визначення переліку елементів меню. Кожен з них має мітку, постійне посилання і клас, в результаті чого поруч з ними з'явиться позначення шрифта Awesome.
В темі Astro, навпаки, не використовується особлива змінна Writer nav_item, але є свої спеціальні змінні, які дозволяють вам додавати посилання на ваші різні акаунти в соцмережах, а також активувати коментарі Disqus тощо.
Працюйте зі змінними в файлі _config.yml вашої теми, поки не налаштуєте на свій смак.
Зверніть увагу, якщо ви вносите такі зміни після першого запуску вашого нового сайту за допомогою jekyll serve, вам потрібно зупинити процес за допомогою CTRL + C і перезапустити його, щоб побачити, як саме відбуватимуться подальші зміни.
Налаштуйте вашу домашню сторінку (якщо потрібно)
В деяких темах дається можливість вибрати вашу домашню сторінку з декількох макетів і встановити елементи управління, які впливають на їх відображення. Якщо це так, ви, напевно, вирішите, що параметри можна змінити в головному файлі кореневої папки index.html.
Якщо доступно декілька макетів, можливо, ви помітите, що можете обрати інший, змінивши значення налаштувань layout, вам потрібно буде звернутися до документації теми, щоб дізнатися, які можливі значення можна використовувати.
Поки ви редагуєте файл, перегляньте, чи є інші змінні, значення яких потрібно змінити, щоб створити контент, який відображатиметься на домашній сторінці. Наприклад, в темі Writer можна вказати заголовок, який можна налаштовувати і опис, які будуть відображатися тільки на домашній сторінці настільки ж добре, як і включене зображення.
Додайте ваші власні сторінки
Якщо ви хочете додати такі сторінки, як "Про нас" або "Контакти" зараз саме час це зробити. Додайте документ .md (markdown) в кореневу папку сайта для кожної сторінки, яку ви хочете налаштувати.
Примітка: деякі теми налаштовані так, що всі сторінки розміщуються у вкладеній папці (зазвичай вона називається “pages”), а не в кореневій, тому перевірте в документах теми, щоб переконатись, що це так.
Наприклад, тут я додав сторінку "Про сайт" (about.md), сторінку профіля автора "Про нас" (автор kezz.md) і сторінку "Контакти" (contact.md).
Коли ви додаєте файли сторінки, вам потрібно знати, чи є особливі шаблони макета і/або параметри вступної статті, які ви повинні використовувати разом з ними. Щоб дізнатися про це, можна звернутися до документації теми або просто скопіювати і вставити файли розмітки з демонстраційної установки теми, яку ви зробили та переробити їх.
Наприклад, тут я скопіював існуючу сторінку автора з демо Writer і перебудував її в свою, перейменував її, а потім відредагував її вступну статтю і контент.
Додавання повідомлень
Тепер у вас є все необхідне для налаштування структури сайта, прийшов час додати пости. Я рекомендую скопіювати повідомлення з папки _posts вашого демо-сайта і вставити його в установку, над якою ви працюєте. Потім ви можете перейменувати його з датою і постійним посиланням для вашої нової статті. Повторно використовуючи демонстраційне повідомлення, вся необхідна вступна стаття повинна бути на місці і вам потрібно тільки обновити її.
Категорії, теги та інші додаткові функції
Деякі теми пропонують підтримку для категорій і тегів. Проте це не завжди так, тому реалізація може відрізнятись в однієї чи іншої теми. Перевірте документи вашої теми: що вам може знадобитися для роботи з категоріями і тегами на вашому сайті.
Наприклад, у темі Writer для кожної категорії, яку ви хочете використовувати, необхідно вручну налаштувати папку та файл шаблону у вкладеній папці на сайті з іменем "категорія".
Там також може бути будь-яка кількість додаткових функцій, доступних для конкретної теми. Обов'язково прочитайте список функцій і документацію вашої теми, щоб переконатися, що ви використовуєте все, що вона включає.
Перехід між темами на існуючому сайті
Якщо у вас вже є сайт Jekyll и ви просто хочете використовувати нову тему, вам доведеться пройти практично такий же процес, про який ми говорили вище. Зміни вступлять в дію після видалення демонстраційного контенту, коли замість додання нових сторінок і повідомлень, ви можете просто скопіювати вміст вашого існуючого сайту.
Якщо у вас є сайт Jekyll зі сторінками, які уже присутні, скопіюйте і вставте пов'язані файли розмітки зі старого сайту в новий. Пройдіться по кожній сторінці і обновіть вступну статтю, щоб використовувати макети нової теми і необхідні змінні.
Далі скопіюйте всі ваші файли повідомлень зі старої папки _posts в нову. Це буде дещо нудно, але вам скоріше за все доведеться переглядати кожен файл повідомлення один за одним і оновлювати вашу вступну статтю налаштуваннями, які необхідні для нової теми, і видаляти все, що потрібно було старій темі, але більше не використовується.
Якщо у вас є папка з зображеннями і іншими медіа на вашому старому сайті, скопіюйте всю папку в нову структуру сайта. Ваші повідомлення і сторінки повинні як і раніше посилатися на ті ж місця розташування зображень, що дозволить їм і далі відображатися в вашому контенті.
Завершення
Отже, це біли основні моменти того, як ви можете налаштувати тему Jekyll! Більш дрібні деталі процесу будуть варіюватися в залежності від теми, але ви все рівно можете слідувати цим основним етапам в кожному випадку. Давайте швидко розглянемо, що це за етапи.
- Швидка демонстрація нової теми, шляхом запуску:
jekyll serve - Установка відсутньої залежності, що перешкоджає запуску теми.
- Перегляд вступної частини демонстраційного сайта і запис особливостей, які ви повинні навчитися використовувати.
- Перегляд структури файла, а конкретно, папки _layouts, щоб побачити які макети і змінні користувача вам можуть знадобитися.
- Створення другої установки теми і очистка сторінки демонстраційного контенту, повідомлень (при необхідності), зображень.
- Введення налаштувань _config.yml в відповідності до вашого сайта.
- Налаштування домашньої сторінки (якщо потрібно) шляхом редагування значень вступної статті в файлі index.html в кореневій папці.
- Створення файлів розмітки сторінки з необхідною вступною статею (або їх копіювання і вставка з вашого демонстраційного/існуючого сайта).
- Створення файлів розмітки сторінки в папці _posts з необхідною вступною статею (або їх копіювання і вставка з вашого демонстраційного/існуючого сайта).
- Виконання будь-яких інших налаштувань, необхідних для теми, наприклад, створення шаблонів категорій.
Я сподіваюсь, що даний урок допоміг вам отримати впевненість в тому, щоб взятися за створення нового сайта Jekyll з налаштованою темою і переходом на нову тему.
Для детального знайомства з інструкцією по використанню Jekyll, ознайомтесь з курсом від Guy Routledge:
Дякую, що прочитали дану статтю, і - до зустрічі!
