Що таке HUGO?⌗

HUGO - інструмент написаний мовою Go для генерації статичних сайтів. З основних переваг можна виділити:

  • дуже швидку генерацію HTML сторінки <1мс на сторінку
  • робота з простими технологіями, як от HTML та MD
  • можливість використовувати шорткоди мовою Go
  • вбудована підтримка локалізацій

Звісно цим можливості не обмежуються, а розробка HUGO почалась ще у 2013 році, тож інструмент можна вважати доволі зрілим у якого сформувалась велике комʼюніті, яке наприклад згенерувало купу безкоштовних шаблонів, які можна використовувати як є, або є дуже просто відредагувати за допомогою HTML.

Додаткової популярності HUGO набув з моменту набору популярності JAMStack. І, наприклад, Cloudflare, переписав свій розділ з документацією з колись популярного Gatsby на HUGO.

Аналоги⌗

З поміж аналогів хочеться виділити, як мінімум, два - вже згаданий GatsbyJS та NextJS. Обидва працюють на основі ReactJS.

GatsbyJS на хвилі гайпу JAMStack та GraphQL набрав шалених обертів але згідно з опитуванням State of JS втратив всю любов спільноти і навіть не потрапив у підсумковий графік. Основна причина спаду зацікавленості це розуміння, що засади, на яких побудований інструмент, занадто складні як для кінцевої мети - сгенерувати простий HTML документ.

NextJS, у свою чергу, більш гнучкий і з ним сильно легше додавати динаміку у свій Web застосунок, бо окрім статичної генерації фреймворк дозволяє з коробки працювати з серверним рендеренгом сторінок, а також розробляти SPA застосунки. Тобто інструмент може стати громіздким для деяких задач.

Кому варто використовувати HUGO?⌗

Якщо у вас статичний сайт на який час від часу треба додавати контент - то це буде найкращий вибір з наступних причин:

  • HUGO дуже легко встановити це буквально один файл, або один рядок в терміналі
  • контент додається за допомогою MD файлів, розмітка яких знайома більшості хто на ти з інтернетом
  • на відміну від умовного Wordpress можна обрати один з безлічі хостингів статичних файлів від компаній на кшталт Google або Netlify, які ще й будуть безкоштовними допоки ваш сайт не набере певних обертів
  • є великий вибір безкоштовних шаблонів, які можна легко редагувати, або ж якщо є знання або ресурси можна зробити свій за дуже детальною документацією

Звісно, як і все HUGO не позбавлений недоліків і варто зважати на два головних - по перше, Go, хоч і популярна мова програмування, але все одно більш нішева ніж JavaScript або PHP, а по друге процес додавання матеріалів на сайт не стандартизований і не доступний з коробки, як в умовному Wordpress, хоча певного рівня зручності можна досягти завдяки пропорційно вкладеним зусиллям.

Персональний блог, сайт фестивалю, інформаційний сайт про товари або компанію та багато іншого можна будувати за допомогою HUGO.

Швидкий старт з HUGO⌗

Для початку треба встановити HUGO на компʼютер або скачавши інсталятор або за допомогою терміналу

brew install hugo # homebrew macos або linux

choco install hugo -confirm # windows з Chocolatey

Далі в терміналі генеруємо початкові файли

hugo new site my-site # де my-site довільна назва яка буде у проєкта

Після треба обрати одну з тем, або ж створити свою, а коли обрали скопіювати будь яким зручним способом вміст теми у папку my-site/themes/

Ось приклад як скопіювати тему terminal за допомогою Git

cd my-site
git init
git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal

і додати обрану тему в конфігураційний файл

echo theme = \"terminal\" >> config.toml

Настав час щоб додати перший матеріал на сайт. Весь головний контент зберігається в папці content яка може містити, як файли формата .md так і вкладені папки з файлами. Наприклад content/posts/my-first-post.md

Подібні файли можна створювати власноруч, або генерувати за допомогою термінала наступним чином

hugo new posts/my-first-post.md

Щод подивитись сайт локально у режимі розробника достатньо запустити наступну команду

hugo server -D

і ваш сайт з обраною темою запуститься на локальному домені http://localhost:1313/

А для того щоб отримати файли готові для заливки на сервер достатньо написати

hugo -D

Для більш детального розуміння раджу звернутись до офіційної документації (англ.)

І якщо ви хочете додатковий матеріал на цю тему, то пишіть мені в twitter