Создаём статичный сайт на 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
Программа, которая превратит вашу Windows в продвинутый MacOS — и даже больше
Программа, которая превратит вашу Windows в продвинутый MacOS — и даже больше

Самая полезная программа для настройки работы в Windows

easy
Пинг-понг на JavaScript

Да, вдвоём тоже можно.

easy
Что означает ошибка SyntaxError: Unexpected token '{'. import call expects exactly one argument
Что означает ошибка SyntaxError: Unexpected token '{'. import call expects exactly one argument
easy
Создаём статичный сайт на Hugo
Создаём статичный сайт на Hugo

Превращаем простой текст в полноценный сайт.

medium
Простейший генератор креативного текста

Без нейросетей, регистрации и СМС.

hard
Объективный таймер обратного отсчёта на PHP

Если нужно взять дату напрямую с сервера

medium
Как добавить кнопки «Поделиться» на страницу
Как добавить кнопки «Поделиться» на страницу

Простой рецепт от Яндекса.

easy
Генератор статей для Кода
Генератор статей для Кода

Почти настоящие статьи на цепях Маркова

medium
Задачка с собеседования: как перевести число в римскую систему счисления и обратно
Задачка с собеседования: как перевести число в римскую систему счисления и обратно

Простая задача с приятным решением

easy
Что означает ошибка Exception has occurred: TypeError
Что означает ошибка Exception has occurred: TypeError

Неочевидная ошибка в типах данных Python.

easy
medium