Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Static Websites

Легкое создание сайтов с Hugo

by
Read Time:9 minsLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Статические сайты популярны по многим причинам: избегаем overkill решений и создаем простой проект без баз данных, зависимостей или конкретных конфигураций на стороне сервера (без PHP, без MySQL / MSSQL, .NET, Python, Ruby и т.д.) Очень просто развертывать и получаем надежное решение против множества возможных уязвимостей; поскольку в конечном итоге это всего лишь HTML-страницы, которые обслуживаются пользователем.

В этом руководстве я покажу вам, как настроить среду разработки с помощью Hugo и создать свой первый статический веб-сайт Hugo.

Совершенно новый подход к статическим сайтам

Легендарный аббревиатура дизайна KISS - Keep It Simple, Stupid может быть хорошо применена здесь к Hugo и как он приближается к статическому пространству генератора веб-сайтов.

Построенный на Go, Хьюго быстро быстро скомпилирует ваши статические страницы (для компиляции небольшого сайта требуется долей миллисекунд) и может создавать тысячи страниц за считанные секунды)

Кроме того, Hugo обеспечивает необходимый инструментарий для статического веб-сайта (включая средства развертывания и миграции), позволяя разработчикам и дизайнерам сосредоточиться на забавных частях - создании сайтов и создании творчества. Без необходимости увязнуть в какой-либо из этих проблем установки / зависимости / топологии архитектуры.

Почему статические веб-сайты?

В конечном счете, когда мы создаем веб-сайты, основанные на контенте, мы можем предположить некоторые общие особенности на всех сайтах, и Хьюго дает основу для этого; где мы можем брать типы контента, будь то сообщения, категории, обзоры или продукты, а также организовывать данные, давать им конкретный вид с помощью шаблона и применять таблицы стилей. Далее мы можем по-настоящему вести его везде, где нужно, в статике HTML / CSS / JS пространство веб-сайта - и когда вы думаете об этом прагматично - это действительно очень большое пространство, которое предлагает огромную площадь для творчества.

jQuery будет работать нормально, и нет ничего, что помешает вам использовать сторонние (или собственные) службы на вашей статической странице, если они вам понадобятся. Поэтому не ограничивайте себя, думая, что вы не можете интегрировать другие репозитории / приложения в свои статические сайты. Это действительно не так, и вы можете использовать любой из JS!

Таким образом, для нескольких страниц веб-сайта типа брошюры компании со ссылкой на формы google для связи с нами (hugo еще не может обработать формы) или по электронной почте это будет идеально, и если вам нужны некоторые данные, отображаемые также из фида вы можете использовать javascript для обработки этой части.

Как это работает для моего бизнеса/моих клиентов?

Если у вас например небольшой магазин / бутик или вы фрилансер, с несколькими продуктами или услугами, которые еще не требуют решения для всей электронной коммерции, - просто некоторые сведения о продукте и ссылка на нас. Хьюго может сделать за пару часов. И не нужно будет искать хостинг - это всего лишь статический html.

Так что действительно для единоличных владельцев бизнеса, которые могут работать в технологическом пространстве или за его пределами, для чего требуются простые сайты типа визитных карточек - в бюджетах с низким до нуля или даже в немного большем масштабе, он может отлично работать для проектной документации по проектам GNU. Хьюго можно полностью использовать для создания высококачественного веб-сайта.

Каковы ограничения статических сайтов?

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

Для создания блогов в реальном времени, таких как новостные сайты, охватывающие события, которые в настоящее время разрабатываются, Хьюго может стать отличным решением для быстрой смены страницы для этого покрытия, которое будет связано с вашим основным сайтом, через Интернет за считанные минуты. И это означает, что вы можете быстро обновлять и деплоить его. Но для создания целого новостного сайта с поиском и несколькими авторами было бы не очень удобно использовать Hugo.

Так же Hugo не подойдет в случаях когда используется более продвинутые инструменты для обработки ресурсов, такие как EcmaScript6 и SASS, - если вы хотите, чтобы вам нужно было включить Gulp или Grunt, чтобы выполнить задание.

Формы обратной связи и поиск могут быть реализованы, но только с использованием сторонних методов (например, Google). Альтернативно, хотя ничто не останавливает вас, вы встраиваете свое собственное решение из своего собственного сервиса.

Ваша домашняя среда разработки

Hugo написан на Go и имеет поддержку для многих платформ. Все релизы вы можете найти здесь.

Для пользователей MacOS с HomeBrew установка может быть выполнена следующим образом:

brew update && brew install hugo

Дополнительная информация об установке для Mac OSX и Windows

После установки Hugo мы можем протестировать установку, запустив hugo help в командной строке или hugo version

Создание вашего первого статического сайта с Hugo

Теперь мы установили hugo, мы можем начать создавать веб-сайт. Выполните следующую команду, заменив имя вашего сайта именем "your-sitename-here"

Это создаст заготовку для вашего сайта, которую вы можете просмотреть в папке

Hugos default filesHugos default filesHugos default files

или в вашем терминале с помощью команды tree

Viewing the hugo files with tree in the terminalViewing the hugo files with tree in the terminalViewing the hugo files with tree in the terminal

Hugo создал 5 подкаталогов и 1 файл, который он использует для создания окончательного веб-сайта, вот что они означают:

  • archetypes: здесь мы определяем, что такое наш контент, мы можем устанавливать теги или категории по умолчанию и определять такие типы, как пост, учебник или продукт
  • config.toml: здесь находится основная конфигурация, мы можем определить все название сайта, язык, URL и т. д.
  • content: здесь хранятся страницы контента сайта, sections используются для разделов, чтобы помочь организовать контент, создайте content/products для вашего контента продукта
  • data: данные сайта, такие конфигурации локализации
  • layouts: макеты для библиотеки Go html / template, которую использует Хьюго
  • static: любые статические файлы здесь будут скомпилированы в последний веб-сайт. Здесь у вас полная свобода, чтобы вы могли обслуживать любые css, js или файлы изображения
  • themes: Создавайте новые темы или клонируйте темы из github в этот каталог, чтобы использовать их с вашим сайтом.

«Привет мир» в Хьюго

Нам нужно добавить сообщение, чтобы увидеть только что созданный сайт, сделав это, используя следующую команду:

Теперь отредактируйте файл в content/post/first-post.md, он по умолчанию будет содержать что-то похожее на следующее:

Передняя часть

Содержимое внутри +++ - это конфигурация TOML для поста. Эта конфигурация называется front matter. Он позволяет вам определять конфигурацию поста вместе с его содержимым. По умолчанию каждый пост будет иметь свойства конфигурации, показанные выше.

Добавьте текст после +++, например:

Обслуживание данных и Live Reload

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

Сначала запустите сервер, запустив

Теперь, если вы внесете некоторые изменения в свой файл, вы увидите, что Hugo мгновенно перезагрузится.

Ваш сайт будет доступен по адресу http://localhost:1313, но погодите - на этом этапе вы увидите только пустую белую страницу, потому что мы не определили тему!

Добавим тему

У Hugo есть очень надежная и универсальная библиотека тем, которая использует библиотеку Go's html/template. С темами довольно легко работать, установка выполняется путем простого клонирования репозитория темы в каталог themes вашего сайта Hugo.

У Hugo нет темы по умолчанию, поэтому вы должны установить ее.

Есть множество тем с открытым исходным кодом, которые вы можете выбрать здесь: https://themes.gohugo.io/

Давайте добавим множество тем на наш сайт, чтобы мы могли выбрать из них, что нам нравится. Сделайте это, запустив следующее в нашем каталоге hugo:

Теперь вы увидите целую кучу тем, клонированных на ваш сайт. Их много, так что у вас будет время для перерыва, пока они клонируются ...

A bare amount of themes are available for HugoA bare amount of themes are available for HugoA bare amount of themes are available for Hugo

Использование темы

Чтобы использовать тему, просто запустите Hugo с параметром -t или --theme, например, так

Или вы можете добавить в свой config.toml:

Имя темы должно совпадать с именем каталога внутри /themes.

Когда вы выбрали имя темы из каталога, запустите сервер с hugo server --theme=ThemeName и откройте http://localhost:1313

Вот некоторые примеры из некоторых тех тем, которые мы клонировали, я использовал beg, crisp и cactus !

The beg theme on your mobile device screen will work greatThe beg theme on your mobile device screen will work greatThe beg theme on your mobile device screen will work great
An example of the crisp theme from Hugos theme repositoryAn example of the crisp theme from Hugos theme repositoryAn example of the crisp theme from Hugos theme repository
An example of testing out a theme in Hugo with your first postAn example of testing out a theme in Hugo with your first postAn example of testing out a theme in Hugo with your first post

Итак, теперь вы создали веб-сайт с приветственным сообщением, что еще мы можем сделать?

Создание блога

Создание базового блога очень простое и его можно сделать даже за один день. Сначала вам нужно будет определить архетип для поста по умолчанию, поэтому создайте новый файл в archetypes/default.md и добавьте следующее как front matter

Здесь мы устанавливаем некоторые теги по умолчанию, для блога мы можем быть уверены, что хотим, чтобы эти теги находились на всех наших постах, и мы создаем категорию posts.

Теперь добавьте свой первый пост через терминал, например

Это создаст пост с ранее определенным архетипом, теперь вы можете открыть его в текстовом редакторе и начать писать в формате markdown!

Давайте добавим еще несколько постов.

Снова для добавления контента просто откройте файл Hugo и добавьте контент в конец файла после front matter.

Создание фотогалереи

Чтобы построить фотогалерею с Hugo, мы будем использовать превосходный инструмент hugo-gallery, доступный на GitHub.

Это так:

hugo-gallery <Source Path> <Destination> <Title> [BaseUrl]

Инструмент hugo-gallery создаст новую директорию постов, содержащую файл разметки для каждого изображения в исходном каталоге, для создания упорядоченного слайд-шоу. Он будет считывать все файлы из директории Source Path и сохранять их в статическом каталоге сайта hugo.

Он создаст новый каталог внутри каталога содержимого на основе Title, например, content/welding

Например:

Посетите localhost:1313/welding для просмотра содержимого.

Развертывание

У Hugo есть несколько инструментов для развертывания, таких как hugomac, который представляет собой меню OSX menubar, позволяющее пользователю легко публиковать на хосте EC2. Никакой командной строки не требуется.

Кроме того, hugodeploy предоставляет установку SFTP для развертывания, или вы можете просто использовать автоматизированные развертывания, с которыми работает Hugo.

Заключение

Статические генераторы сайтов существуют некоторое время, и Хьюго действительно использует набор инструментов, благодаря которым он быстро и легко создает сайты или даже переносит существующий сайт с wordpress на hugo. Существует множество инструментов для Hugo, в том числе front-end редакторы: https://gohugo.io/tools/

В будущем было бы неплохо увидеть больше модулей для Hugo, дающих поддержку для таких вещей, как контактная форма и поддержка галереи.

В дорожной карте Hugo есть много интересных идей, таких как изменение динамического изображения, поддержка импорта rsync и изображений у хостинг-провайдеров и упрощение хостинга с интеграцией AWS EC2 и github. Поэтому, если вы не используете Hugo, не забудьте проверить проект по мере его развития!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.