Создаём статичный сайт на Hugo — Журнал «Код» программирование без снобизма

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

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

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

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

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

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

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

Для простоты работы мы возьмём недавний проект про пианино на 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 такой командой:

brew install hugo

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

hugo new site thecode

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 установлен и настроен, можно создавать первую страницу.

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

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

Качаем Hugo с официальной страницы проекта.
В проводнике создаём папку C:\Hugo.
В ней создаём две папки — bin и Sites. В первую мы распакуем сам Hugo, а во второй будет лежать наш сайт.
В командной строке PowerShell добавляем новый путь: set PATH=%PATH%;C:\Hugo\bin.
Создаём в 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-файлы в веб-страницы. Давайте проверим, как он работает.

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

cd /Users/mike/thecode/

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

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

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

hugo -D

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

Что дальше

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

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

Текст:

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

Художник:

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

Корректор:

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

Вёрстка:

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

Соцсети:

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

Веб-разработка — это новый чёрный

На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.

Начать бесплатно