Создаём статичный сайт на Hugo

Недав­но мы раз­би­ра­ли, чем отли­ча­ют­ся ста­ти­че­ские сай­ты от дина­ми­че­ских. Сего­дня попро­бу­ем сде­лать свой пол­но­цен­ный сайт, исполь­зуя Hugo — гене­ра­тор ста­ти­че­ских стра­ниц для интернета.

Корот­ко: что такое ста­ти­че­ские сайты

  1. Ста­ти­че­ские сай­ты состо­ят из уже гото­вых HTML-страниц.
  2. Эти стра­ни­цы соби­ра­ют­ся зара­нее, а не гото­вят­ся для поль­зо­ва­те­ля «на лету». Для это­го исполь­зу­ют гене­ра­то­ры ста­тич­ных сайтов.
  3. Так как это почти чистый HTML, то такие сай­ты быст­рее загру­жа­ют­ся и их про­ще пере­но­сить с сер­ве­ра на сервер.
  4. Минус: если нуж­но что-то обно­вить на стра­ни­це, то сна­ча­ла это пра­вят в исход­ном фай­ле, а потом запус­ка­ют обнов­ле­ние в генераторе.
  5. Ещё минус: такие стра­ни­цы не под­хо­дят для интернет-магазинов или сай­тов с лич­ным каби­не­том, пото­му что в ста­ти­ке нель­зя сфор­ми­ро­вать стра­ни­цу для каж­до­го отдель­но­го пользователя.

Что будем делать

Мы собе­рём и запу­стим гене­ра­тор сай­тов, кото­рый будет делать из тек­сто­вых доку­мен­тов пол­но­цен­ные страницы:

  1. Сде­ла­ем доку­мент, кото­рый потом пре­вра­тим в страницу.
  2. Уста­но­вим нуж­ный софт.
  3. Уста­но­вим какую-нибудь тему оформ­ле­ния, что­бы стра­ни­цы выгля­де­ли красиво.
  4. Настро­им и запу­стим генератор.
  5. Посмот­рим на резуль­тат и поду­ма­ем, что мож­но улучшить.

Создаём исходный документ

Для про­сто­ты рабо­ты мы возь­мём недав­ний про­ект про пиа­ни­но на JavaScript и офор­мим нача­ло этой ста­тьи в марк­дауне. Заод­но сохра­ним это в фай­ле piano.md — он нам пона­до­бит­ся, когда мы уста­но­вим и настро­им гене­ра­тор статики.

# Пианино на JavaScript для Chrome

Мы нашли [готовый чужой код](https://codepen.io/gabrielcarol/pen/rGeEbY) и немного его доработали, чтобы он стал проще и понятнее. В результате у нас получилось некое подобие программного пианино, сейчас покажем внутренности.

Зачем? Да просто так.

![Пианино на JavaScript](https://thecode.media/wp-content/uploads/2021/03/image3.png)

## Логика работы

Проект состоит из трёх файлов: HTML-страницы, CSS-стилей и JS-скрипта.

**HTML-страница** отвечает за «мясо» проекта: надписи, заголовки, подключение звуков и сборку всего проекта в одной точке. Но страница сама по себе ничего не сумеет: мы просто разместим на ней нужные блоки, а вся анимация и поведение задаются в двух других файлах.

**CSS-стили** решают две задачи: оформляют страницу и рисуют интерфейс. Плавная анимация нажатия и появления подсказок прописываются именно здесь.

**JS-скрипт** занимается всей работой пианино: отслеживает нажатия на клавиши, чтобы включить звук и показать нужный эффект на экране. 

Устанавливаем софт (MacOS)

Самый про­стой спо­соб уста­но­вить Hugo на мак — уста­но­вить сна­ча­ла мене­джер паке­тов brew, а уже с его помо­щью уста­но­вить Hugo и всё остальное.

Для уста­нов­ки brew откры­ва­ем тер­ми­нал и пишем в команд­ной строке:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Создаём статичный сайт на Hugo

После того как мене­джер паке­тов уста­но­вит­ся, ста­вим сам Hugo такой командой:

brew install hugo

Создаём статичный сайт на Hugo

Теперь созда­дим новый сайт внут­ри Hugo, кото­рый будет назы­вать­ся thecode:

hugo new site thecode

Создаём статичный сайт на Hugo

Hugo создал новый вир­ту­аль­ный сайт thecode и сра­зу сде­лал для нас пап­ку, куда мы будем скла­ды­вать исход­ные фай­лы для обработки.

Послед­нее, что нам оста­лось сде­лать для нача­ла, — уста­но­вить тему, кото­рая будет вли­ять на внеш­ний вид сай­та. Для это­го пишем такие команды:

cd thecode

git init

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Git уже встро­ен в новые вер­сии MacOS, поэто­му его мож­но не уста­нав­ли­вать отдель­но. Пер­вая коман­да пере­хо­дит в пап­ку с нашим сай­том, вто­рая под­го­тав­ли­ва­ет git к рабо­те, а послед­няя кача­ет и уста­нав­ли­ва­ет тему оформ­ле­ния Ananke c git-репозитория.

Создаём статичный сайт на Hugo

Всё, Hugo уста­нов­лен и настро­ен, мож­но созда­вать первую страницу.

Устанавливаем софт (Windows)

С Windows всё немно­го про­ще, хотя пап­ки нуж­но будет сде­лать самим:

  1. Кача­ем Hugo с офи­ци­аль­ной стра­ни­цы про­ек­та.
  2. В про­вод­ни­ке созда­ём пап­ку C:\Hugo.
  3. В ней созда­ём две пап­ки — bin и Sites. В первую мы рас­па­ку­ем сам Hugo, а во вто­рой будет лежать наш сайт.
  4. В команд­ной стро­ке PowerShell добав­ля­ем новый путь: set PATH=%PATH%;C:\Hugo\bin.
  5. Созда­ём в Hugo новый вир­ту­аль­ный сайт командой: 

C:\Hugo\Sites> hugo new site thecode

Если у вас нет Git на ком­пью­те­ре, то перед сле­ду­ю­щей коман­дой его нуж­но ска­чать и уста­но­вить с офи­ци­аль­но­го сай­та.

Тема оформления

Если мы запу­стим Hugo пря­мо сей­час, то он не смо­жет создать нам стра­ни­цу — у него про­сто нет пра­вил, по кото­рым нуж­но собрать и офор­мить HTML-документ из исход­но­го тек­ста. Что­бы эти пра­ви­ла появи­лись, нуж­но уста­но­вить любую тему оформ­ле­ния. Для это­го пишем всё в той же команд­ной строке:

cd quickstart

git init

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Мы выбра­ли тему Ananke, но вы може­те выбрать себе любую дру­гую на стра­ни­це тем для Hugo.

Теперь откро­ем файл config.toml, кото­рый лежит в нашей пап­ке thecode, и поме­ня­ем его содер­жи­мое на такое:

baseURL = "thecode.media"

languageCode = "ru-ru"

title = "Тестовый сервер на Hugo"

theme = "ananke"

Пер­вая строч­ка отве­ча­ет за адрес сай­та, на кото­ром мы пла­ни­ру­ем раз­ме­стить наши стра­ни­цы, вто­рая — за коди­ров­ку язы­ка, тре­тья зада­ёт назва­ние сай­ту, а чет­вёр­тая под­клю­ча­ет тему оформления.

Добавляем служебную информацию в md-файл

Что­бы Hugo пра­виль­но и кра­си­во обра­бо­тал все стра­ни­цы, в них нуж­но доба­вить блок со слу­жеб­ной инфор­ма­ци­ей. Откры­ва­ем файл piano.md и добав­ля­ем это в самое нача­ло файла:

---

title: "Код"

date: 2021-03-16T08:47:11+03:00

draft: false

---

Title — это назва­ние стра­ни­цы, его мож­но делать любым. Date отве­ча­ет за вре­мя пуб­ли­ка­ции. Если его не поста­вить, сер­вер ино­гда может поду­мать, что запись опуб­ли­ко­ва­на 1 янва­ря 1 года. При­знак draft отве­ча­ет за ста­тус чер­но­ви­ка — если бы сто­я­ло true, то Hugo про­пу­стил бы эту стра­ни­цу и не стал её обрабатывать.

Запускаем Hugo

Мы уста­но­ви­ли и настро­и­ли пол­но­цен­ный гене­ра­тор ста­ти­ки, кото­рый может пре­об­ра­зо­вы­вать наши .md-файлы в веб-страницы. Давай­те про­ве­рим, как он работает.

  1. Захо­дим в пап­ку thecode, нахо­дим внут­ри неё пап­ку content.
  2. Созда­ём в ней пап­ку posts и копи­ру­ем в неё наш файл piano.md.
  3. В команд­ной стро­ке захо­дим в пап­ку с нашим сай­том. Для macOS коман­да будет выгля­деть, напри­мер, так:

cd /Users/mike/thecode/
  1. Запус­ка­ем сер­вер коман­дой hugo server -D.
  2. Пере­хо­дим в бра­у­зе­ре по адре­су localhost:1313 или сра­зу на localhost:1313/posts/piano/.

Готовая страница и исходный текст в markdown-разметке Гото­вая стра­ни­ца и исход­ный текст в markdown-разметке 

У нас полу­чи­лась пол­но­цен­ная веб-страница для бло­га. Что­бы её мож­но было загру­зить на сер­вер, попро­сим сер­вер сге­не­ри­ро­вать нам весь сайт в виде HTML-страниц:

hugo -D

После этой коман­ды у нас в пап­ке thecode появит­ся новая пап­ка public — в ней и будут лежать все сге­не­ри­ро­ван­ные стра­ни­цы. Всю пап­ку public мож­но ско­пи­ро­вать и отпра­вить на сервер.

Запускаем Hugo

Что дальше

Если вы хоти­те получ­ше разо­брать­ся, как рабо­та­ет Hugo, и вы зна­е­те англий­ский — почи­тай­те доку­мен­та­цию на офи­ци­аль­ном сай­те про­ек­та. Она напи­са­ла про­стым язы­ком, разо­брать­ся тоже будет просто.

Сей­час наш сер­вер рабо­та­ет толь­ко локаль­но — что­бы стра­ни­цы были доступ­ны в интер­не­те, их нуж­но загру­зить на сер­вер. Это мож­но делать вруч­ную, мож­но напи­сать спе­ци­аль­ный скрипт, а мож­но собрать всё на вир­ту­аль­ном сер­ве­ре и обнов­лять через свой Git-репозиторий. В послед­нем слу­чае всё сра­зу рабо­та­ет и раз­ме­ща­ет­ся в интер­не­те, и обнов­ле­ния тоже сра­зу будут доступ­ны всем. Этим и зай­мём­ся в сле­ду­ю­щий раз.

Текст:

Мак­сим Ильяхов

Худож­ник:

Даня Бер­ков­ский

Кор­рек­тор:

Ири­на Михеева

Вёрст­ка:

Мария Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев