Генератор статических сайтов Hugo
Hugo это платформа для создания статических сайтов, кто то скажет что это фреймворк для сайта или конструктор блогов. И все перечисленное будет правдой. К сожалению в российском сегменте интернета о нем нет практически никакой информации, как впрочем и поисковых запросов по нему. Но я надеюсь, что смогу хоть немного популяризировать проект. В частности этот самый сайт сделан на Hugo.
Если вдруг вам нужно выбрать конструктор сайтов или конструктор блогов, я вам советую выбрать Hugo. Hugo подходит как начинающим веб мастерам, так и продвинутым, хотя надо сказать что последним все же больше.
Общие сведения
Hugo написан на ныне популярном языке Golang и распространяется бесплатно по лицензии Apache License Version 2.0. Проект опубликован на Github и на момент написания статьи имел 762 Контрибьютера и около 360 активных пользователей, которые так или иначе вносят вклад в проект. К сожалению о происхождении названия Hugo мне узнать не удалось, хотя интересно что оно под собой подразумевает. Ясно что частица go на конце это отсылка к языку программирования Golang, а вот с Hu вопрос остается открытым. Движок подходит как для создания статических сайтов типа этого, так и для более сложных проектов или порталов. Нужно понимать что это такой “крутой” статический генератор.
Возможности Hugo
С одной стороны это конструктор сайтов или блогов, с другой это целый фреймворк для создания сайтов и блогов и вот почему:
Помимо возможности собирать статические страницы HTML, движок позволяет делать шаблоны
Есть возможность создавать и хранить контент в файлах формата Markdown
Есть возможность настроить автоматическую сборку и деплой с помощью тех же GitlabCI, CircleCI и тому подобных решений
Подготовка изображений под необходимые размеры и форматы для статьи, превью и других элементов.
Возможность создавать уникальные и полностью гибкие шаблоны, как будто вы работаете с чистым HTML.
Возможность реализовать самые необычные желания для построения страниц, например пагинация без всяких движков на PHP, Ruby или других языках программирования
Возможность собирать SASS и SCSS в CSS прямо “из коробки”
Встроенная поддержка создания sitemap.xml из созданного контента
Встроенное создание файлов для RSS лент и турбо-страниц поисковых систем типа Yandex или Google
Создание структура для постраничной навигации и разделов с так называемым листингом контента
Создать сайт по одному из множества готовых шаблонов без знания программирования и даже HTML.
Исходя из последнего пункта, я могу сказать, что он подходит и начинающим веб мастерам. С помощью всего нескольких команд можно собрать простой сайт и наполнять его, только лишь владея терминалом операционной системы, без знаний HTML или каких либо языков программирования. Однако стоит заметить, что если готового шаблона недостаточно, то знания HTML и CSS все же понадобятся. Обычно веб-мастера среднего уровня уже владеют этими знаниями и вполне способны разобраться с документацией проекта и сделать уже что то посложнее и интереснее шаблонного решения.
Создаем простейший сайт на Hugo
Чтобы не быть голословным я возьму примеры прямо из официальной документации проекта и покажу, как с помощью всего нескольких команд можно создать небольшой сайт.
Установка необходимых пакетов
Hugo поддерживает несколько популярных пакетных менеджеров для Windows, поэтому выбираем один из способов
choco install hugo-extended
scoop install hugo-extended
winget install Hugo.Hugo.Extended
Ну и конечно есть готовые сборки под Docker
docker pull klakegg/hugo
Далее нужно установить GIT
Для Linux’а же есть почти на все популярные платформы, поэтому берем под свою и ставим, ссылки я оставлю внизу, а покажу на примере Debian
sudo apt install hugo
После установки нужно будет проделать всего несколько действий чтобы получился сайт и ваш коструктор сайта был готов к дальнейшей работе, итак поехали:
- Создаем папку для сайта и всем необходимым для начала:
hugo new site quickstart
- Переходим в папку сайта
cd quickstart
- Инициируем Git репозиторий
git init
- Скачиваем шаблон как подмодуль git
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
- Записываем в файл настройки нашу скаченную тему
echo "theme = 'ananke'" >> config.toml
- И запускаем сервер для разработки
hugo server
После этой команды мы увидим в терминале примерно следующую информацию:
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
| EN
-------------------+-----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 1
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Built in 77 ms
Watching for changes in /home/user/projects/quickstart/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/user/projects/quickstart/config.toml, /home/user/projects/quickstart/themes/ananke/config.yaml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
После этого переходим в браузер и переходим по адресу http://localhost:1313/ и видим
В целом пот и простой, хоть и пустой сайт у нас уже собрался и мы его видим в своем браузере. Теперь нужно заняться наполнением и простейший сайт на конструкторе Hugo готов.
Для добавления контента используется команда
hugo new posts/my-first-post.md
Она создаст в папке проекта файл content/posts/my-first-post.md с содержимым:
---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---
Этот самый файл и будет нашим первым постом на сайте. Здесь можно добавлять мета теги такие как description, title уже есть, нужно только заполнить по вкусу поисковых систем, а так же добавить сам контент страницы. Файл в разметке Markdown, что очень удобно, так как имея любой редактор Markdown на своем компьютере или даже онлайн, можно легко сконвертировать текст из формата .docx в этот без проблем, просто скопировав и вставив.
Заполним файл вот таким содержимым:
---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---
## Introduction
This is **bold** text, and this is *emphasized* text.
Visit the [Hugo](https://gohugo.io) website!
Сохраним файл и запустим сервер с новым параметром, который будет рендерить в том числе черновики постов:
hugo server -D
Теперь мы увидим наш пост прямо на главной странице.
На этом процесс создания для обзорной статьи можно закончить. Текста больше, чем действий для создания сайта. Сборка уже готового к размещению сайта делается просто командой
hugo
После нее в папке проекта появится папка public в которой и будет статическая сборка вашего сайта, которую можно просто перенести на сервер и ваш сайт окажется в общем доступе в интернете.
Теперь мы увидим наш пост прямо на главной странице.
Заключение
Надо сказать, что для создания сайта с уникальным дизайном или какими-то дополнительными требованиями к нему уже нужно изучать документацию проекта. Возможности очень обширные, шаблонизатор просто пушка, может собрать для вас все что угодно вашему воображению, но нужно уже подробно и внимательно читать и изучать как это работает, здесь уже нужен опыт работы с HTML и CSS, но повторюсь, что думаю, что среднему специалисту в деле веб мастерства это вполне под силу.
Естественно я рассмотрел не все возможности программы, а только лишь самые основы. Но, если вы проявите интерес к ней, будете писать в наш телеграм канал, или здесь в комментариях под статьей, я могу отдельно рассмотреть ваши кейсы работы с конструктором сайтов Hugo под ваши нужды. Спасибо что дочитали!
Ссылки
🖥️ Linux | MacOs | Windows
comments powered by Disqus