Hugo – це такий генератор статичних сайтів. Статичні сайти – це сайти що складаються з набору фіксованих сторінок і не генеруються з шаблонів і запитів до бази даних при кожному завантаженні. Це з одного боку менш зручно бо немає можливості наприклад опублікувати щось автоматично встановивши час публікації, а з іншого боку – менш вимогливо до ресурсів, і краще з точки зору комп’ютерної безпеки. Крім того, wordpress.com зі своїми оновленнями інтерфейсу починає трохи дратувати. Хочеться markdown, свого javascript і стилів. А ще він не підсвічує синтаксис go. Але ця стаття публікується на WordPress, яка іронія… Тому що я ще не вирішив що публікуватиму там.

До цього, мій статичний сайт на github генерувався самописним скриптом на python, який перетворював шаблони Mako в HTML, дозволяв вставляти javascript разом з залежностями, і так як я коли це придумував не знав ні про який node.js з npm (точніше знав, але не дуже цікавився), то залежності в мене описувались не в package.json, а в external_assets.py, і збирав їх не webpack чи gulp, чи browserify чи bower, а requirejs.py.

Але це я відхиляюсь від теми. Мова про те що велосипеди треба не винаходити, треба брати і їздити. Тому поїхали!

Якщо у вас встановлене go, я зараз розкажу як встановити hugo, інакше читайте інструкцію для своєї системи.

Виконуємо:

go get github.com/magefile/mage
go get -d github.com/gohugoio/hugo
cd ${GOPATH:-$HOME/go}/src/github.com/gohugoio/hugo
mage vendor
HUGO_BUILD_TAGS=extended mage install

HUGO_BUILD_TAGS=extended потребує встановлених gcc, та g++, щоб скомпілювати libsass. Я сам писатиму просте CSS без всяких там SASS, але не знаю чи якимось темам його не треба буде, тому на всяк випадок скомпілював з його підтримкою.

Перевіряємо версію:

$ hugo version
Hugo Static Site Generator v0.48-DEV-FFF13253/extended linux/amd64 BuildDate: 2018-08-22T22:49:10+0300

Свіже щойно збілджене.

$ cd ~/projects # чи де ви там свій код тримаєте
$ hugo new site blog # створюємо новий сайт що називається "blog".
$ cd blog

Додаємо тему. Вибрати можна тут.

git init # можна звісно й без git її скачати, але так зручніше
git submodule add https://github.com/Vimux/Mainroad.git themes/mainroad
echo 'theme = "mainroad"' >> config.toml

Додаємо якусь публікацію:

hugo new posts/my-first-post.md

Запускаємо сервер

hugo server -D

Можна запускати без -D, але тоді щоб побачити публікацію, треба забрати з неї рядок “draft: true” (його рано чи пізно варто буде забрати, а то нащо сайт, якщо на ньому нема закінчених публікацій?). Всі публікації знаходяться в директорії content (ну а потім posts/my-first-post.md).

В браузері дивимось як виглядає наш сайт. В темі Mainroad ви публікацій спершу не побачите, бо вона їх чомусь за замовчуванням шукає в директорії content/post, хоча документація Hugo каже створювати в posts. Це не страшно, в файлі config.toml додаємо ще секцію “Params” з наступним вмістом:

[Params]
  postSections = ["posts"] # the section pages to show on home page and the "Recent articles" widget

Було б добре ще додати якусь сторінку about і т.п. Це теж просто:

hugo new about/_index.md

Редагуємо content/about/_index.md і додаємо вгорі menu: main, інакше посилання на нашу сторінку не буде в меню. Тепер є меню з одного пункта, але нема посилання назад на головну зі списком публікацій.

Щоб виправити це – додайте наступне в конфіг:

[menu]

  [[menu.main]]
    identifier = "home"
    name = "Home"
    url = "/"
    weight = -110

Можна посилання ще кудись, додавши ще секцію:

  [[menu.main]]
    identifier = "bunyk"
    name = "Блог одного кібера"
    url = "https://bunyk.wordpress.com/"
    weight = 100

“weight” (вага) – це число за яким сортуються пункти меню в зростаючому порядку.

Ще, мені не подобається що в цій темі посилання червоні і не підкреслені. Я люблю щоб були сині з підкресленням. Для цього створюємо файл static/style.css, який перевантажуватиме стилі нашої теми:

.content a {
	color: blue;
	text-decoration: underline;
}

Правда його існування ще нічого не міняє, бо тема про нього не в курсі. Аби була в курсі, треба скопіювати файл теми themes/mainroad/layouts/_default/baseof.html в layouts/_default/baseof.html, і додати там після рядка:

	<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">

рядок:

	<link rel="stylesheet" href="{{ "style.css" | relURL }}">

Тепер досить бавитись на localhost, давайте опублікуємо все десь в інтернеті. Я спробую на Github Pages, бо там в мене вже був велосипед.

Виявляється, це майже елементарно. Якщо у вас нема репозиторію що називається .github.io – створіть. Там буде публікуватись відрендерений сайт. Тоді видаліть з проекту директорію public (потім hugo її перестворить), і створіть на її місці підмодуль що вказуватиме на репозиторій сайту:

git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public

Підмодуль – це таке посилання на конкретний комміт в іншому git репозиторії. Щоб його оновити – перебудовуємо сайт (команда hugo без параметрів), переходимо в public, комітимо і пушимо. Готово. Можна автоматизувати останні дії таким скриптом:

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

hugo 

cd public

git add .
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

git push origin master

cd ..