Статичні веб-сайти легко створювати та надзвичайно швидко використовувати. Якщо ви навчитеся використовувати Hugo, ви зможете створювати статичні веб-сайти на основі тем у Linux. Створення веб-сайтів знову весело!
Генератор веб-сайтів Hugo
Статичний сайт – це сайт, який не створює і не змінює веб-сторінки на льоту. Немає фонової бази даних, обробки електронної комерції або PHP. Усі веб-сторінки повністю попередньо створені і можуть бути доступні відвідувачам дуже швидко.
Але це не означає, що статичний сайт має бути нудним. Вони можуть використовувати все, що надає HTML, а також Каскадні таблиці стилів (CSS), і JavaScript. Вони також можуть легко мати такі речі, як каруселі зображень і веб-сторінки, що ковзають по фоновому зображенню.
Генератор сайтів Hugo працює з шаблоном і будь-яким вмістом, який ви створили, щоб створити готовий веб-сайт. Потім ви можете розмістити його на хостинговій платформі та одразу мати живий веб-сайт.
Г’юго використовує уцінка для створених вами сторінок і записів у блозі. Markdown — це майже найпростіша мова розмітки, яка спрощує обслуговування вашого сайту.
Конфігураційні файли Hugo входять Очевидна, мінімальна мова Тома (TOML) і YAML не мова розмітки (YAML), які так само легко. Ще один бонус — Hugo надзвичайно швидкий — деякі сайти завантажуються менше ніж за секунду. У ньому є багато шаблонів, з яких ви можете вибрати, і постійно додаються нові, тому розпочати роботу легко. Просто виберіть шаблон і додайте вміст, який робить його вашим.
Hugo також діє як крихітний веб-сервер прямо на вашому комп’ютері. Ви можете переглядати реальну версію свого веб-сайту під час його розробки та створення, а також кожного разу, коли ви додаєте нову публікацію. Він також автоматично оновлюється щоразу, коли ви «Зберегти» в редакторі, тож ви можете відразу побачити ефект своїх змін у своєму браузері.
Розміщення вашого сайту
Коли справа доходить до розміщення вашого статичного веб-сайту, у вас є вибір. Більшість компаній пропонують безкоштовний хостинг для особистого або відкритого використання. Звичайно, ви також можете вибрати звичайну компанію з веб-хостингу, наприклад будь-яку з наведених нижче.
Вищий пілотаж
Amazon S3
Лазурний
CloudFront
DreamHost
Firebase
Сторінки GitHub
GoDaddy
Хмарне сховище Google
Героку
Сторінки GitLab
Netlify
Стійка
Сплеск
Установка 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
Команда для Манджаро:
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
Існує сотні тем ви можете вибирати, і кожен має веб-сторінку, яка описує його. Ви можете запустити демонстрацію теми та дізнатися, яка команда для її завантаження. Ми скористаємося одна на ім’я Мегна.
Щоб включити цю тему на наш веб-сайт, нам потрібно перейти до нашої папки «Теми» та запустити команду 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.
Нам сказали, що Хьюго створив сайт за 142 мілісекунди (ми ж казали, що це було швидко, чи не так?). Він також говорить нам натиснути Ctrl+C, щоб зупинити сервер, але поки залишити його працювати.
Відкрийте браузер і перейдіть до localhost:1313, щоб побачити свій веб-сайт.
Змінення вмісту сайту за замовчуванням
Поки він працює таким чином, Hugo обслуговує веб-сторінки з пам’яті. Він не створив веб-сайт на жорсткому диску, а скоріше, робочу копію в RAM. Однак він відстежує файли та зображення на жорсткому диску. Якщо будь-який з них змінено, сайт оновиться у вашому браузері — вам навіть не потрібно натискати Ctrl+F5.
Відкрийте інше вікно терміналу та перейдіть до кореневого каталогу вашого веб-сайту. Відкрийте файл «config.toml» у редакторі. Змініть «baseURL» на домен, на якому буде розміщено ваш веб-сайт, і змініть «заголовок» на назву вашого веб-сайту. Збережіть зміни, але залиште редактор відкритим.
Hugo виявляє, що були зміни у файлі «config.toml», тому зчитує їх, перебудовує сайт і оновлює браузер.
Тепер ви повинні побачити назву, яку ви вибрали для свого сайту на вкладці браузера. Отримання негайного візуального відгуку про збережені зміни значно прискорює процес налаштування веб-сайту.
Усі теми різні, але ми знайшли ті, які раніше були досить простими для виконання. Різні розділи веб-сайту мають очевидні назви, як і налаштування в кожному розділі, тому завжди очевидно, що ви змінюєте.
І знову ж таки, щойно ви збережете зміни, ви побачите, що ви змінили у своєму браузері. Якщо вам це не подобається, просто відмініть зміни та збережіть їх знову.
Різні файли конфігурації, які керують веб-сайтом, призначені для однієї роботи та позначені змістовним чином. Відстежити їх нескладно, оскільки в каталозі не так багато місць, де вони можуть бути. Зазвичай вони знаходяться в папці «Дані».
Оскільки ми використовуємо двомовний шаблон, наші файли конфігурації англійською мовою знаходяться в підкаталозі «En».
Якщо ви відкриєте файл Data > En > banner.yml у редакторі, ви побачите набір параметрів, які керують банерною зоною веб-сайту.
Коли ви змінюєте налаштування «Назва» та «Вміст», ви змінюєте текст на сторінці банера.
Ми також змінили налаштування «Мітка», тому текст кнопки говорить «Дізнатися більше». Для вашого сайту ви, ймовірно, також захочете змінити зображення.
Щойно ви збережете зміни, ви побачите їх у своєму браузері.
Зміна інших елементів веб-сайту
Аналогічно можна змінити всі інші елементи. Просто знайдіть відповідний файл конфігурації та змініть налаштування та текст відповідно до ваших потреб.
Ви також захочете змінити зображення. На зображення за замовчуванням буде посилання у файлі конфігурації. Ви можете легко знайти та подивитися на оригінальне зображення, щоб побачити його розміри.
Зображення розміщуються в каталозі «Статичні > Зображення» з підкаталогами для різних розділів веб-сайту. Розмістіть будь-які значки та логотипи безпосередньо в каталозі «Статичні > Зображення».
Додавання нового вмісту блогу
Поки що ми розглядали можливість змінити те, що вже є. Але як ми додати нову публікацію в блог? Хьюго використовує концепцію під назвою «архетипи» для створення нового контенту. Якщо ми не створимо архетип для наших записів у блозі, для нас буде створено файл за замовчуванням щоразу, коли ми просимо Hugo створити новий запис у блозі.
Це добре, але з архетипом ми можемо заощадити трохи зусиль і переконатися, що якомога більше основної матерії введено для нас заздалегідь.
У цій темі записи блогу розташовані в розділі Вміст > Англійська > Блог. Якщо ми відкриємо наявний запис блогу в редакторі — наприклад, «simple-blog-post-1.md», — ми зможемо побачити суть справи.
Нам потрібно скопіювати цей розділ, відредагувати поточні записи, щоб його можна було використовувати як шаблон архетипу, а потім зберегти його в папці «Архетипи». Якщо ми назвемо його «blog.md», він автоматично використовуватиметься як шаблон для нових записів у блозі.
У gedit ми можемо зробити це наступним чином:
gedit content/english/blog/simple-blog-post-1.md
Виділіть верхній розділ разом із двома пунктирними лініями, а потім натисніть Ctrl+C, щоб скопіювати його. Натисніть Ctrl+N, щоб створити новий файл, а потім Ctrl+V, щоб вставити те, що ви скопіювали.
Тепер внесіть такі зміни та не забудьте залишити пробіл після двокрапки (:) у кожному рядку:
Заголовок: змініть це на «{{ replace .Name “-” ” ” | title }}» (включіть лапки). Заголовок для кожної нової публікації в блозі буде вставлено автоматично. Як ми побачимо, він формується з імені файлу, яке ви передаєте команді hugo new.
Дата: змініть це на {{ .Date }}. Дата і час створення блогу будуть автоматично введені.
Image_webp: Це шлях до зображення заголовка блогу у форматі webp. Якщо тема не може знайти його, вона використовуватиме зображення з наступного рядка.
image: це шлях до зображення заголовка блогу у форматі JPEG. Ви також можете залишити ці зображення, які вказують на зображення за замовчуванням. Тоді всі дописи в блозі матимуть проміжне зображення, навіть до того, як ви знайдете, зміните розмір або збережете власне. Зробивши це, ви можете легко відредагувати ім’я файлу, щоб воно відповідало імені вашого спеціального зображення.
Автор: Змініть це на своє ім’я.
Опис: тут ви вводите короткий опис кожної публікації. Якщо змінити це на порожній рядок («»), ви зможете ввести опис для кожного нового блогу без необхідності редагувати старий текст.
Збережіть цей новий файл як «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.
Для нас додано всі наступні частини передньої частини:
Назва: Це було виведено з назви файлу. Якщо він потребує будь-яких налаштувань, ви можете відредагувати його тут.
Час і дата: вони додаються автоматично.
Зображення за замовчуванням: вам, напевно, захочеться знайти відповідне зображення без гонорарів. Перетягніть його в Статичні > Зображення > Блог. Тут вам потрібно буде ввести справжню назву файлу зображення.
Автор: Ваше ім’я додається автоматично.
Опис: Це було відредаговано.
Напишіть блог за допомогою markdown та використовуйте стандартну розмітку для заголовків, жирного шрифту, курсиву, зображень, посилань тощо. Кожного разу, коли ви зберігаєте файл, Hugo перебудовує веб-сайт і оновлює його у вашому браузері.
На зображенні нижче показано, як наш новий запис у блозі відображається на домашній сторінці.
На зображенні нижче показано, як новий запис блогу виглядає на власній сторінці.
Після того як ви закінчите писати свою публікацію в блозі, збережіть зміни, а потім закрийте редактор. Ви також можете закрити свій браузер, оскільки ми збираємося зупинити сервер Hugo.
У вікні терміналу, в якому запущено сервер Hugo, натисніть Ctrl+C.
Створення веб-сайту
У кореневому каталозі вашого веб-сайту введіть таку команду, щоб створити свій веб-сайт:
hugo
Hugo створює веб-сайт і перераховує кількість створених сторінок та інших компонентів. На створення нашої знадобилося 134 мілісекунди.
Hugo створює новий каталог під назвою «Public» у кореневому каталозі вашого веб-сайту. У каталозі «Public» ви знайдете всі файли, які потрібно перенести на вашу хостинг-платформу.
Зауважте, що ви повинні завантажувати файли та каталоги всередині каталогу «Public» на вашу платформу хостингу, а не сам каталог «Public».
Тепер ви знаєте основи
Кожна тема вимагатиме трохи дослідження, щоб зрозуміти, як зробити так, щоб вона виглядала так, як ви хочете, але це найцікавіше! З огляду на здатність Hugo відображати зміни негайно у вікні браузера, нічого не займає занадто багато часу.
Ви, напевно, помітите, що написання тексту, пошук і обрізка зображень — це ті частини процесу, які займають найдовше.
Г’юго Сайт з документацією також корисний, але обширна. Сподіваємося, цього основного посібника буде достатньо, щоб почати.
Якщо ви використовуєте Git і Github, GitLab, або BitBucket, для цих платформ також доступні інтеграції. Вони спостерігають за вашим віддаленим сховищем Hugo і відновлюють ваш живий сайт щоразу, коли ви вносите до нього зміни.