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

Создаём статичный сайт на 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-репозиторий. В последнем случае всё сразу работает и размещается в интернете, и обновления тоже сразу будут доступны всем. Этим и займёмся в следующий раз.

Текст:

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

Художник:

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

Корректор:

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

Вёрстка:

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

Соцсети:

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

Веб-разработка — это новый чёрный
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно, а если потом пойдёте работать в Яндекс — вообще всё бесплатно. Попробуйте, вдруг вам понравится.
Изучить
Веб-разработка — это новый чёрный
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Генератор лабиринтов
Генератор лабиринтов

Рисуем лабиринты любого размера.

hard
Как накопить на Айфон ещё быстрее
Как накопить на Айфон ещё быстрее

Excel нам в помощь.

easy
Чат-бот
Делаем своего первого чат-бота

Суперпростой способ создать бота, не зная программирования.

easy
Что означает ошибка SyntaxError: missing ) after formal parameters

На самом деле это не просто пропущенная скобка.

easy
Uncaught TypeError: Cannot read property — что это означает
Uncaught TypeError: Cannot read property — что это означает

Нельзя прочитать то, чего нет.

medium
Запускаем телеграм-бота на сервере

Тогда он будет работать круглые сутки, а вы — отдыхать.

hard
Делаем свой таймер на Python

Код — проще, возможностей — больше.

easy
Успокаивающие звуки на любой странице
Успокаивающие звуки на любой странице

Тревожное время требует кода на JavaScript.

easy
Что означает ошибка TypeError: 'str' object does not support item assignment
Что означает ошибка TypeError: 'str' object does not support item assignment

Ошибка из другого языка

easy
Что означает ошибка TypeError: 'list' object cannot be interpreted as an integer
Что означает ошибка TypeError: 'list' object cannot be interpreted as an integer

Неочевидная ошибка при организации цикла в Python.

easy
Как добавить плавающий блок на страницу
Как добавить плавающий блок на страницу

Иногда это и правда нужно.

easy
Как сделать свой сайт за 10 минут без программирования

Для некоторых это становится источником постоянного дохода, если подойти к процессу с умом.

easy
Улучшаем арканоид
Улучшаем арканоид

Добавляем очки, жизни и нарастание сложности.

medium
medium