Створення статичних вебсайтів – це простий та швидкий процес. Освоївши Hugo, ви зможете з легкістю розробляти вебсайти на основі різноманітних тем у Linux. Веб-розробка знову стане захопливою!
Генератор вебсайтів Hugo
Статичний вебсайт — це ресурс, який не створює та не змінює вебсторінки динамічно. Він не потребує фонової бази даних, обробки електронної комерції чи PHP. Всі сторінки сайту генеруються заздалегідь, що забезпечує їх швидкий доступ для відвідувачів.
Проте, статичні сайти можуть бути цікавими та інтерактивними. Вони можуть використовувати всі можливості HTML, а також каскадні таблиці стилів (CSS) та JavaScript. Це дозволяє створювати ефекти каруселі зображень, анімації фону та інші динамічні елементи.
Генератор сайтів Hugo працює, поєднуючи створені вами шаблони та контент, щоб згенерувати готовий вебсайт. Далі, ви можете розмістити його на хостинговій платформі і одразу отримати повноцінний онлайн ресурс.
Hugo використовує Markdown для форматування сторінок і записів блогу. Markdown – це дуже проста мова розмітки, що спрощує підтримку сайту.
Конфігураційні файли Hugo використовують TOML та YAML, які є інтуїтивно зрозумілими та легкими у використанні. Крім того, Hugo надзвичайно швидкий: деякі сайти завантажуються менше ніж за секунду. Він має велику кількість готових тем, що постійно поповнюється, тож почати роботу дуже просто. Виберіть тему та додайте свій контент, щоб зробити сайт унікальним.
Hugo також працює як міні-вебсервер прямо на вашому комп’ютері. Це дозволяє переглядати сайт під час його розробки, а також відстежувати зміни в реальному часі після кожного редагування. Вебсайт автоматично оновлюється, коли ви натискаєте “Зберегти” у редакторі, тож ви одразу бачите результат своїх правок у браузері.
Розміщення вашого сайту
Коли справа доходить до хостингу вашого статичного сайту, у вас є великий вибір. Багато компаній пропонують безкоштовний хостинг для особистого або відкритого використання. Звісно, ви можете скористатися послугами звичайної хостингової компанії.
Ось деякі з популярних варіантів:
- Amazon S3
- Azure
- CloudFront
- DreamHost
- Firebase
- GitHub Pages
- GoDaddy
- Google Cloud Storage
- Heroku
- GitLab Pages
- Netlify
- Render
- Surge
Встановлення Hugo
Для роботи з Hugo вам також знадобиться Git. Git вже може бути встановлений на вашій системі, наприклад, у Fedora 32 та Manjaro 20.0.1. В Ubuntu 20.04 (Focal Fossa) він додається автоматично як залежність Hugo.
Щоб встановити Hugo в Ubuntu, використайте таку команду:
sudo apt-get install hugo
На Fedora введіть:
sudo dnf install hugo
Команда для Manjaro:
sudo pacman -Syu hugo
Створення вебсайту з Hugo
Коли Hugo створює новий сайт, він генерує набір каталогів з різними елементами. Проте, це не є готовий до завантаження сайт. Ці каталоги містять тему, файли конфігурації, контент та зображення, які Hugo використовує для створення повноцінного вебсайту.
Це схоже на різницю між вихідним кодом та скомпільованою програмою. Вихідний код – це матеріал, який компілятор використовує для створення кінцевого продукту. Аналогічно, Hugo бере вміст цих каталогів і створює робочий вебсайт.
Команда, яку ми збираємось запустити, створить каталог з назвою сайту. Цей каталог з’явиться в директорії, з якої ви запускаєте команду.
Отже, перейдіть до каталогу, де ви хочете створити свій сайт. Якщо це домашній каталог, введіть:
hugo new site geek-demo
Це створить каталог “geek-demo”. Перейдіть до цього каталогу та запустіть команду ls:
cd geek-demo/
ls
Ви побачите файл конфігурації “config.toml” та створені каталоги. Наразі вони порожні, оскільки це лише структура майбутнього сайту.
Ініціалізація Git та додавання теми
Для коректного відображення сайту, нам потрібно додати тему. Для цього необхідно ініціалізувати Git. У кореневій папці сайту (там, де є файл “config.toml”), виконайте команду:
git init
Існує велика кількість тем на вибір, кожна з яких має свій опис та інструкції щодо встановлення. Ми використаємо тему Meghna.
Щоб встановити цю тему, перейдіть до папки “themes” та виконайте команду git clone:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
Git виведе повідомлення в процесі роботи. Після завершення, використовуйте ls для перегляду каталогу з темою:
ls
Теми Hugo містять робочий приклад вебсайту. Скопіюйте цей приклад до каталогів вашого сайту.
Спочатку поверніться до кореневого каталогу сайту. Використайте параметр -r (рекурсивний) для cp, щоб скопіювати підкаталоги, та параметр -f (примусово) для перезапису існуючих файлів:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Запуск вашого сайту локально
Тепер ви можете запустити сайт локально. Він буде містити текст-заповнювач та зображення, але це лише косметичні зміни. Давайте перевіримо технічну складову.
Використайте Hugo для запуску вебсервера та параметр -D (чернетка), щоб відобразити файли, які можуть бути позначені як чернетка:
hugo server -D
Зображення нижче показує результат роботи команди hugo.
Hugo згенерував сайт за 142 мілісекунди. Він також пропонує натиснути Ctrl+C, щоб зупинити сервер, але поки що залишимо його запущеним.
Відкрийте браузер та перейдіть за адресою localhost:1313, щоб переглянути свій сайт.
Зміна вмісту сайту за замовчуванням
Під час роботи, Hugo обслуговує вебсторінки з пам’яті. Він не створив сайт на жорсткому диску, а лише тимчасову копію в оперативній пам’яті. Але він відстежує зміни файлів та зображень на жорсткому диску. Якщо будь-який з них змінюється, сайт автоматично оновлюється в браузері без необхідності натискати Ctrl+F5.
Відкрийте інше вікно терміналу та перейдіть до кореневого каталогу вашого сайту. Відкрийте файл “config.toml” у редакторі. Змініть “baseURL” на домен, де буде розміщено сайт, і змініть “title” на назву вашого сайту. Збережіть зміни, але залиште редактор відкритим.
Hugo виявив зміни у файлі “config.toml”, тому перечитав їх, перебудував сайт та оновив браузер.
Тепер ви повинні побачити назву, яку ви вибрали для свого сайту у вкладці браузера. Швидкий зворотний зв’язок від збережених змін значно прискорює процес налаштування вебсайту.
Всі теми різні, але ті, з якими ми мали справу, були досить простими у використанні. Різні розділи сайту мають очевидні назви, як і налаштування всередині кожного розділу, тому завжди зрозуміло, що ви змінюєте.
Знову ж таки, щойно ви збережете зміни, ви побачите їх у своєму браузері. Якщо вам щось не сподобається, просто скасуйте зміни і збережіть знову.
Різні конфігураційні файли, що керують сайтом, призначені для однієї роботи і мають зрозумілі імена. Їх нескладно відстежувати, оскільки вони знаходяться в декількох місцях. Зазвичай вони розміщені в папці “Data”.
Оскільки ми використовуємо багатомовну тему, файли конфігурації англійською знаходяться в підкаталозі “En”.
Відкрийте файл Data > En > banner.yml у редакторі, щоб побачити набір параметрів, які керують банерною зоною сайту.
Змінивши налаштування “Title” та “Content”, ви зміните текст на банері.
Ми також змінили налаштування “Label”, тому текст кнопки тепер звучить як “Дізнатися більше”. Для вашого сайту ви також захочете змінити зображення.
Збережіть зміни та перегляньте результат у браузері.
Зміна інших елементів вебсайту
Аналогічним чином можна змінити всі інші елементи. Знайдіть відповідний файл конфігурації та змініть налаштування та текст згідно з вашими потребами.
Ви також захочете змінити зображення. Посилання на зображення за замовчуванням містяться у файлі конфігурації. Ви можете легко переглянути оригінальне зображення, щоб дізнатися його розміри.
Зображення знаходяться в каталозі “Static > Images” з підкаталогами для різних розділів сайту. Розмістіть значки та логотипи безпосередньо в каталозі “Static > Images”.
Додавання нового контенту блогу
До цього моменту ми розглядали зміни існуючого контенту. А як додати нову публікацію у блог? Hugo використовує концепцію “архетипів” для створення нового контенту. Якщо ми не створимо архетип для записів у блозі, щоразу при створенні нової публікації буде використовуватись стандартний файл.
Це нормально, але з архетипом можна заощадити зусилля і переконатися, що основна інформація заповнена заздалегідь.
У цій темі записи блогу знаходяться в розділі Content > English > Blog. Відкрийте наявний запис блогу, наприклад, “simple-blog-post-1.md”, щоб побачити його структуру.
Скопіюйте верхню частину файлу (з пунктирними лініями), відредагуйте її, щоб використати як шаблон архетипу, і збережіть у папці “Archetypes”. Назвавши його “blog.md”, ви автоматично зробите його шаблоном для нових записів.
У gedit це можна зробити так:
gedit content/english/blog/simple-blog-post-1.md
Виділіть верхній розділ разом з двома пунктирними лініями, а потім натисніть Ctrl+C. Натисніть Ctrl+N, щоб створити новий файл, і Ctrl+V, щоб вставити скопійоване.
Внесіть наступні зміни, залишивши пробіл після двокрапки (:) у кожному рядку:
Title: замініть на “{{ replace .Name “-” ” ” | title }}” (включіть лапки). Заголовок кожної нової публікації буде вставлено автоматично. Він формується з імені файлу, як ви побачите.
Date: замініть на {{ .Date }}. Дата та час створення будуть автоматично заповнені.
Image_webp: це шлях до зображення заголовка у форматі webp. Якщо тема не знайде його, то використає зображення з наступного рядка.
image: це шлях до зображення заголовка у форматі JPEG. Ви можете залишити ці шляхи, що вказують на стандартне зображення. Тоді всі публікації матимуть проміжне зображення, доки ви не знайдете, зміните розмір або збережете власне. Ви потім можете змінити назву файлу на відповідну вашому зображенню.
Author: вкажіть своє ім’я.
Description: короткий опис кожної публікації. Якщо залишити порожній рядок (“”), то ви зможете вводити опис для кожного нового блогу без редагування старого тексту.
Збережіть цей новий файл як “archetypes/blog.md” та закрийте gedit. Hugo тепер буде використовувати цей архетип, коли ви захочете створити новий запис блогу.
Зверніть увагу, що файл має мати розширення “.md”, оскільки для написання блогу ми будемо використовувати markdown:
hugo new blog/first-new-blog-post-on-this-site.md
Тепер відкрийте новий запис блогу в редакторі:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Ваш новий запис відкриється в gedit.
Наступні розділи вже заповнені:
Title: Виведено з назви файлу. Якщо потрібно налаштувати, то змініть тут.
Date: Дата та час додані автоматично.
Зображення за замовчуванням: варто знайти відповідне безкоштовне зображення. Перетягніть його у Static > Images > Blog. Введіть правильну назву файлу.
Author: ваше ім’я додано автоматично.
Description: редагується.
Напишіть свій блог, використовуючи markdown, стандартні засоби для заголовків, жирного шрифту, курсиву, зображень, посилань і так далі. Кожного разу, коли ви зберігаєте файл, Hugo перебудовує сайт та оновлює його у вашому браузері.
Зображення нижче демонструє, як ваш новий запис блогу відображається на головній сторінці.
Зображення нижче демонструє, як новий запис блогу виглядає на окремій сторінці.
Закінчивши писати публікацію, збережіть зміни та закрийте редактор. Ви також можете закрити браузер, оскільки ми зупинимо сервер Hugo.
У вікні терміналу, де запущено Hugo server, натисніть Ctrl+C.
Створення вебсайту
У кореневому каталозі сайту введіть команду для створення вебсайту:
hugo
Hugo створює сайт та показує кількість сторінок та інших компонентів. На створення нашого сайту знадобилося 134 мілісекунди.
Hugo створив новий каталог “Public” у кореневому каталозі сайту. У каталозі “Public” ви знайдете файли, які потрібно перенести на хостингову платформу.
Зверніть увагу, що на хостинг потрібно завантажувати файли та каталоги всередині каталогу “Public”, а не сам каталог.
Тепер ви знаєте основи
Кожна тема потребує дослідження, щоб зрозуміти, як зробити її такою, якою ви хочете, але це найцікавіше! З огляду на швидкість відображення змін у браузері Hugo, нічого не займе забагато часу.
Ви, напевно, помітите, що написання тексту, пошук і обрізання зображень – це процеси, які займають найбільше часу.
Документація Hugo також є корисною, хоч і об’ємною. Сподіваємося, цей основний посібник буде корисним для початку роботи.
Якщо ви використовуєте Git та Github, GitLab або BitBucket, для них також є інтеграції. Вони стежать за вашим віддаленим репозиторієм Hugo і оновлюють ваш сайт кожного разу, коли ви вносите зміни.