Как создать молниеносно быстрый статический сайт с Hugo

Hugo — это генератор статических сайтов (SSG), написанный на Go (также известном как Golang), высокопроизводительном скомпилированном языке программирования, который часто используется для разработки серверных приложений и сервисов.

Сегодня Hugo способен генерировать большинство веб-сайтов за секунды (<1 мс на страницу). Это объясняет, почему Hugo позиционирует себя как «самую быструю в мире платформу для создания веб-сайтов».

В этой статье мы рассмотрим историю Hugo, что делает его таким быстрым и как вы можете начать создавать свой собственный статический сайт Hugo.

Что такое Хьюго? И почему это популярно?

Стив Франсиа первоначально разработал генератор статических сайтов Hugo в 2013 году, а Бьорн Эрик Педерсен стал ведущим разработчиком проекта в 2015 году. Hugo — это проект с открытым исходным кодом, что означает, что его код может просматривать и улучшать любой.

Как генератор статического сайта, Hugo берет файлы контента Markdown, пропускает их через шаблоны тем и выдает HTML-файлы, которые вы можете легко развернуть в Интернете — и все это он делает очень быстро.

В 2021 году насчитываются десятки, если не сотни статических генераторов. Каждый генератор статических сайтов имеет свою привлекательность. Jekyll популярен среди разработчиков Ruby, и хотя он не такой быстрый, как другие варианты, он был одним из первых генераторов статических сайтов, получивших широкое распространение. Gatsby — еще одна популярная SSG, которая хорошо подходит для разработки статически развертываемых сайтов с динамичной функциональностью.

Итак, с таким количеством SSG, что выделяет Hugo?

Hugo позиционирует себя как «самый быстрый в мире фреймворк для создания веб-сайтов». Поэтому, если вы ищете способ быстро создать статический сайт, начните здесь. Нажмите, чтобы твитнуть

Хьюго быстрый

С точки зрения производительности Hugo — лучший генератор статических сайтов в мире. По данным Forestry, по сравнению с Джекиллом Хьюго работает в 35 раз быстрее. Точно так же Хьюго может отобразить сайт на 10 000 страниц за 10 секунд, а на выполнение этой задачи у Гэтсби ушло бы более получаса. Hugo не только самый быстрый SSG с точки зрения времени сборки, но и быстро устанавливается.

Hugo поставляется как автономный исполняемый файл, в отличие от Jekyll, Gatsby и других SSG, требующих установки зависимостей с помощью менеджера пакетов. Это означает, что вы можете сразу загрузить и использовать Hugo, не беспокоясь о программных зависимостях.

Создание шаблонов в Hugo — это просто

В жаргоне SSG «шаблонирование» относится к процессу добавления заполнителей для вставки динамического контента на HTML-страницу. Чтобы получить доступ к заголовку страницы, вы можете использовать переменную {{ .Title }} . Таким образом, в HTML-шаблоне Hugo часто можно увидеть {{ .Title }} заключенный в теги H1, например:

 <h1>{{ .Title }}</h1>

Во время сборки Hugo автоматически захватит заголовок из файла содержимого и вставит заголовок между двумя тегами <h1> . Hugo имеет множество встроенных переменных шаблонов, и вы даже можете написать собственные функции для обработки данных во время сборки. Для создания шаблонов Хьюго использует встроенные в Go библиотеки html/template и text/template . Это помогает уменьшить раздувание приложений, поскольку Hugo не нужно устанавливать сторонние библиотеки для создания шаблонов.

Вот пример шаблона домашней страницы index.html из популярной темы Ananke. Как видите, он похож на стандартный HTML-файл с дополнительным кодом шаблона:

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

Как установить Хьюго

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

Как установить Hugo на macOS и Linux

Для рекомендуемого метода установки для macOS и Linux требуется Homebrew, менеджер пакетов для установки и обновления приложений. Если у вас еще не установлен Homebrew, вы можете установить его, выполнив следующую команду в Терминале:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

После установки Homebrew выполните следующую команду, чтобы установить Hugo:

 brew install hugo

Как установить Хьюго на Windows

Для пользователей Windows Hugo можно установить с помощью менеджеров пакетов Chocolatey или Scoop. Поскольку инструкции по установке Chocolatey и Scoop немного сложнее, чем Homebrew, мы рекомендуем обратиться к их страницам официальной документации здесь и здесь.

После установки Chocolatey или Scoop вы можете установить Hugo с помощью одной из следующих команд (в зависимости от вашего менеджера пакетов):

 choco install hugo-extended -confirm

 scoop install hugo-extended

Как проверить правильность установки Hugo

Чтобы убедиться, что Hugo установлен правильно, выполните следующую команду:

 hugo version

Эта команда терминала должна выводить информацию об установленной в данный момент версии Hugo следующим образом:

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Команды и конфигурация Hugo

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

Хьюго CLI-команды

• hugo check — запускает различные проверки верификации
• hugo config — отображает конфигурацию сайта Hugo.
• hugo convert — конвертирует контент в разные форматы
• hugo deploy — развертывает ваш сайт на облачном провайдере
• Hugo hugo env — отображает версию Hugo и информацию об окружении
• hugo gen — предоставляет доступ к различным генераторам
• hugo help — отображает информацию о команде
• hugo import — позволяет импортировать сайт из другого места
• hugo list — отображает список различных типов контента
• hugo mod — предоставляет доступ к различным хелперам модулей
• hugo new — позволяет создавать новый контент для вашего сайта
• hugo server — запускает локальный сервер разработки
• hugo version Hugo — отображает текущую версию Hugo

Интерфейс командной строки Hugo также имеет множество флагов для указания дополнительных параметров для некоторых команд. Для просмотра полного списка флагов Hugo (их очень много) рекомендуем использовать команду hugo help для отображения списка всех доступных флагов.

Конфигурационный файл Хьюго

Файл конфигурации Hugo поддерживает три формата: YAML, TOML и JSON. Точно так же файл конфигурации Hugo называется config.yml , config.toml или config.json , и вы можете найти его в корневом каталоге проекта Hugo.

Вот как выглядит типичный файл конфигурации Hugo в формате YAML:

 DefaultContentLanguage: en theme: - kinsta-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Kinsta Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"

Если вы раньше использовали WordPress или другую CMS, некоторые параметры конфигурации могут показаться вам знакомыми. Например, kinsta-static-site — это название темы сайта, Kinsta Static Site — мета-заголовок SEO, а paginate (количество постов на странице) — 5 .

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

Как создать сайт Хьюго

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

Чтобы создать сайт Hugo, используйте приведенную ниже команду (не стесняйтесь изменить my-hugo-site на что-то другое, если хотите):

 hugo new site my-hugo-site

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

Файл config.toml Хьюго

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

Папка с архетипами Хьюго

Папка архетипов — это место, где вы храните шаблоны контента, отформатированные в Markdown. Архетипы особенно полезны, если на вашем сайте несколько форматов контента. С помощью архетипов Hugo вы можете создать шаблон для каждого типа контента на вашем сайте. Это позволяет предварительно заполнить сгенерированные файлы Markdown всеми необходимыми параметрами конфигурации.

Например, если у вас есть тип контента подкаст для отображения эпизодов подкаста, вы можете создать новый архетип в archetypes/podcast.md со следующим содержимым:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

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

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

Теперь, если вы откроете только что созданный пост, вы должны увидеть это:

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

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

Папка содержимого Хьюго

Папка с контентом — это место, где находится ваш фактический контент публикации. Hugo поддерживает форматы Markdown и HTML, причем Markdown является более популярным вариантом из-за простоты использования. Помимо того, что это общее место для хранения сообщений, вы можете использовать папку содержимого для дальнейшей организации содержимого сообщений.

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

Папка макетов Хьюго

Папка layouts содержит HTML-файлы, определяющие структуру вашего сайта. В некоторых случаях вы можете увидеть сайт Hugo без папки макетов , потому что он не обязательно должен находиться в корневом каталоге проекта и вместо этого может находиться в папке темы.

Подобно темам WordPress, которые используют PHP для создания шаблонов, шаблоны Hugo состоят из базового HTML с дополнительными динамическими шаблонами, основанными на встроенных библиотеках Golang html/template и text/template . Различные файлы шаблонов HTML, необходимые для создания HTML-разметки вашего сайта, находятся в папке layouts .

Папка Темы Хьюго

Для сайтов, которые предпочитают более автономный способ хранения файлов шаблонов и ресурсов, Hugo поддерживает папку тем . Темы Hugo похожи на темы WordPress тем, что они хранятся в каталоге тем и содержат все необходимые шаблоны для работы темы.

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

Папка данных Хьюго

В папке данных Hugo вы можете хранить дополнительные данные (в формате JSON, YAML или TOML), необходимые для создания страниц вашего сайта. Файлы данных удобны для больших наборов данных, которые неудобно хранить непосредственно в файле содержимого или шаблоне.

Например, если вы хотите создать список уровней инфляции в долларах США с 1960 по 2020 год, для представления данных потребуется около 80 строк (по одной строке на каждый год). Вместо того, чтобы помещать эти данные непосредственно в файл контента или шаблона, вы можете создать их в папке данных и заполнить необходимой информацией.

Статическая папка Hugo

Статическая папка Hugo — это место, где хранятся статические ресурсы, не требующие дополнительной обработки. В статической папке пользователи Hugo обычно хранят изображения, шрифты, файлы проверки DNS и многое другое. Когда сайт Hugo создается и сохраняется в папке для удобства развертывания, все файлы в статической папке копируются как есть.

Если вам интересно, почему мы не упомянули файлы JavaScript или CSS, это потому, что они часто динамически обрабатываются через конвейеры во время разработки сайта. В Hugo файлы JavaScript и CSS обычно хранятся в папке темы , поскольку требуют дополнительной обработки.

Как добавить тему на сайт Hugo

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

Сначала перейдите в папку темы вашего проекта в Терминале:

 cd <hugo-project-directory>/themes/

Затем используйте Git для клонирования темы Hyde в каталог тем вашего проекта.

 git clone https://github.com/spf13/hyde.git

Затем добавьте следующую строку в файл config.toml , чтобы активировать тему Hyde:

 theme = "hyde"

На данный момент тема Hyde установлена ​​и настроена. Следующим шагом является запуск встроенного веб-сервера разработки Hugo для просмотра сайта в веб-браузере.

Как просмотреть сайт Hugo

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

Чтобы запустить веб-сервер Hugo, выполните приведенную ниже команду в корневом каталоге вашего проекта:

 hugo server -D

Затем Hugo создаст страницы вашего сайта и сделает их доступными по адресу http://localhost:1313/ :

Если вы посетите URL-адрес в своем веб-браузере, вы должны увидеть свой сайт Hugo с темой Hyde:

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

Как добавить контент на сайт Hugo

Добавление контента на сайт Hugo сильно отличается от полнофункциональной CMS, такой как WordPress или Ghost. В Hugo нет встроенного уровня CMS для управления вашим контентом. Вместо этого вы должны управлять и организовывать вещи так, как считаете нужным.

Другими словами, в Hugo не существует явно «правильного» способа управления контентом. В этом разделе мы расскажем об одном методе добавления контента и управления им, но не стесняйтесь вносить изменения по мере того, как вы лучше знакомитесь с Hugo.

Разделы контента в Hugo

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

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

Как добавить сообщения в Hugo

Имея это в виду, давайте создадим раздел контента для постов в блоге и добавим несколько фрагментов контента. Создайте новую папку с именем posts в папке содержимого вашего проекта — это раздел содержимого.

Давайте создадим еще один организационный слой внутри папки сообщений , создав папку 2021 . На этом этапе ваш каталог содержимого должен выглядеть так:

Теперь давайте создадим наш первый пост. Как мы обсуждали ранее, Hugo поддерживает как файлы Markdown, так и файлы HTML для контента. В общем, лучше придерживаться файлов Markdown, потому что их легче писать, форматировать и читать.

В папке content/posts/2021 создайте новый файл с расширением .md (расширение файла Markdown). Вы можете назвать файл как угодно, но рекомендуемый синтаксис для именования файла содержимого Hugo — ГГГГ-ММ-ДД-a-sample-post.md .

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

 hugo new posts/2021/2021-08-30-a-sample-post.md

Обратите внимание, что в приведенном выше пути отсутствует папка содержимого . Это связано с тем, что Хьюго предполагает, что все файлы содержимого по умолчанию помещаются в папку содержимого.

Если вы откроете только что созданный файл содержимого, вы должны увидеть несколько строк метаданных в верхней части документа, которые выглядят примерно так:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

Эти метаданные, отформатированные в YAML, называются «вступительной частью». Автоматически генерируемые вступительные материалы — одно из значительных преимуществ использования интерфейса командной строки Hugo. Передняя часть — это место, где хранятся уникальные данные для сообщения (название сообщения, данные, статус черновика, теги, категории и т. д.). Формат по умолчанию для вступительной части может быть настроен для каждого раздела с использованием архетипов.

Теперь давайте добавим текст к сообщению. При написании поста всегда следите за тем, чтобы ваш контент был ниже основного текста, например:

Как только вы сохраните файл содержимого, вы должны увидеть, как Hugo перестраивает ваш сайт в Терминале. На скриншоте ниже видно, что Хьюго перестроил весь сайт за 22 мс!

Если вы посетите свой сайт Hugo в своем веб-браузере, вы должны увидеть новую публикацию.

Как добавить страницу в Хьюго

Теперь, когда мы добавили сообщение на наш сайт Hugo, давайте добавим страницу. Большинство систем управления контентом, включая WordPress, различают посты и страницы. Как правило, пост представляет собой устаревший контент, а страница состоит из вечнозеленого или статического контента.

Чтобы создать страницу, нам сначала нужен раздел содержимого страницы . Для этого создайте папку с именем pages в папке содержимого Hugo. После этого используйте приведенную ниже команду, чтобы добавить новую страницу «О нас» на свой сайт:

 hugo new pages/about.md

Обратите внимание, как соглашение об именах для страниц отличается от сообщений. В отличие от постов, страницы не привязаны к конкретной дате, поэтому указывать дату создания в имени файла необязательно.

Теперь давайте добавим текст на страницу «О нас»:

На этом этапе вы должны увидеть страницу «О программе» в своем веб-браузере:

Теперь, когда у нас есть два раздела контента — посты и страницы — давайте рассмотрим, как сделать несколько настроек сайта, таких как редактирование заголовка и описания, добавление страницы «О нас» в боковое меню, изменение формата постоянных ссылок и удаление страницы из ленты постов.

Как изменить название и описание сайта

Точный способ изменения названия и описания сайта зависит от конфигурации вашего сайта и/или активной темы. В случае с темой Hyde название и описание сайта можно изменить в конфигурационном файле Hugo ( config.toml ).

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

 <aside class="sidebar"> <div class="container sidebar-sticky"> <div class="sidebar-about"> <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <p class="lead"> {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}} </p> </div> <nav> <ul class="sidebar-nav"> <li><a href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Menus.main -}} <li><a href="{{.URL}}"> {{ .Name }} </a></li> {{- end }} </ul> </nav> <p>{{ with .Site.Params.copyright }}{{.}}{{ else }} {{ now.Format "2006"}}. All rights reserved. {{end}}</p> </div> </aside>

Две части, на которых следует сосредоточиться:

 {{ .Site.Title }}

И…

 {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Ручки {{ }} являются частью механизма шаблонов Hugo и позволяют динамически генерировать данные на отображаемых страницах. Например, {{ .Site.Title }} указывает Hugo проверить файл config.toml и получить значение, сопоставленное с ключом Title .

Поскольку конфигурация Hugo по умолчанию использует My New Hugo Site в качестве названия сайта, это то, что показывает боковая панель. Если мы изменим заголовок сайта в config.toml на что-то другое, это изменение также отразится на внешнем интерфейсе.

Давайте продолжим и изменим параметр title в config.toml с My New Hugo Site на Kinsta's Hugo Site .

Переходя к описанию сайта, вы можете увидеть, что механизм шаблонов Hugo поддерживает условную логику. В приведенном ниже коде, переведенном на простой английский язык, Хьюго указывает, что нужно проверить, присвоено ли значение Params ключу описания в файле config.toml . Если нет, используйте вместо этого строку по умолчанию.

 {{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Поскольку у нас нет описания, настроенного в файле config.toml , Hugo по умолчанию отображает «Элегантную тему с открытым исходным кодом и мобильную тему для Hugo, созданную @mdo. Изначально сделано для Джекила».

Теперь давайте обновим наш файл config.toml из:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

К:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde" [params] description = "Kinsta is a premium managed WordPress hosting company."

Как и ожидалось, изменения теперь видны и на интерфейсе:

Как удалить страницы из ленты сообщений

В большинстве блогов в ленте сообщений на главной странице обычно отображаются только сообщения. По умолчанию тема Hyde включает в себя все файлы контента в ленте сообщений. Чтобы изменить это поведение, вам нужно отредактировать функцию range в шаблоне index.html , который создает домашнюю страницу.

Функция range Хьюго перебирает определенный набор элементов, а затем что- то делает с данными. По умолчанию шаблон index.html темы Hyde находится в диапазоне .Site.RegularPages и отфильтровывает данные, такие как постоянная ссылка, заголовок сообщения и сводка сообщения, перед рендерингом HTML.

Поскольку .Site.RegularPages включает в себя все обычные страницы на Hugo, включая как посты, так и страницы, отображается страница «О нас». Изменив элементы range на .Site.RegularPages "Section" "posts" , мы можем указать Hugo фильтровать только обычные страницы в разделе сообщений — файлы содержимого в папке сообщений , которую мы создали ранее.

Давайте внесем это изменение сейчас, отредактировав шаблон следующим образом:

 {{ define "main" -}} <div class="posts"> {{- range .Site.RegularPages -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

К этому:

 {{ define "main" -}} <div class="posts"> {{- range where .Site.RegularPages "Section" "posts" -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

После внесения этого изменения на главной странице будут отображаться только такие сообщения:

Как использовать части в Hugo

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

Например, часто можно увидеть разные разделы страницы (верхний и нижний колонтитулы и т. д.) в отдельных частичных файлах, которые затем вызываются в файле шаблона baseof.html темы.

В файле baseof.html темы Ananke вы можете увидеть пример партиала в строке 18 — {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

В этом случае {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} указывает Хьюго заменить содержимое строки 18 файлом site-style.html в папке /layouts/partials . Если мы перейдем к /partials/site-style.html , мы увидим следующий код:

 {{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }} <link rel="stylesheet" href="{{ .RelPermalink }}" > {{ end }} {{ range site.Params.custom_css }} {{ with partialCached "func/style/GetResource" . . }}{{ else }} <link rel="stylesheet" href="{{ relURL (.) }}"> {{ end }} {{ end }}

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

Как использовать короткие коды в Hugo

Шорткоды Hugo похожи на партиалы тем, что позволяют повторно использовать код на разных страницах. Шорткоды — это файлы HTML, которые находятся в папке /layouts/shortcodes . Основное отличие состоит в том, что частичные коды применяются к HTML-шаблонам, а короткие коды применяются к страницам контента Markdown.

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

Если вы ведете блог, скорее всего, вам придется просмотреть основное содержание ваших сообщений, чтобы обновить ссылки на текущий год. В зависимости от того, сколько сообщений у вас есть на вашем сайте, эта задача может занять много времени!

Используя шорткод Hugo в своих файлах контента, вам больше не придется беспокоиться об обновлении ссылок на год!

Начнем с создания шорткода в /layouts/shortcodes/current_year.html со следующим содержимым:

 {{ now.Format "2006" }}

Шорткоды могут быть встроены в сообщения с этим синтаксисом — {{< shortcode_name >}} . В нашем случае мы можем вызвать шорткод current_year.html с помощью {{< shortcode_name >}} следующим образом:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true --- This post was created in the year {{< current_year >}}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu. Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

Если вы просматриваете сообщение в веб-браузере, вы должны увидеть текущий год в первой строке сообщения, например:

Как добавить изображения в пост в Hugo

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

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

Первое, что нам нужно сделать, это создать организационную структуру для нашей библиотеки изображений. Хотя это звучит сложно, все, что требуется, — это создать несколько дополнительных каталогов в папке /static .

Начнем с создания папки для загрузки в /static . В папке загрузок создайте папку с именем 2021 для хранения всех изображений, загруженных в 2021 году.

Далее добавим два изображения ( blue1.jpg и blue2.jpg ) в папку 2021 .

В HTML изображения отображаются с помощью <img> . Например, для отображения blue1.jpg мы можем использовать приведенный ниже HTML-код:

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

Хотя можно добавить этот HTML-код непосредственно в файл содержимого Markdown, лучше создать шорткод, который можно использовать для отображения любого изображения из папки загрузки. Таким образом, если вам когда-нибудь понадобится обновить тег img , вы сможете отредактировать шаблон шорткода, не редактируя каждый экземпляр тега img .

Чтобы создать шаблон шорткода, создайте новый файл в /layouts/shortcodes/img.html со следующим содержимым:

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

Затем добавьте приведенный ниже шорткод в запись блога:

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

В шаблоне {{ .Get "src" }} и {{ .Get "alt" }} Hugo на получение содержимого параметров src< и alt< при вызове шорткода.

Теперь, если вы перезагрузите сообщение в блоге, вы должны увидеть такое изображение:

Как развернуть сайт Hugo

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

Поскольку Hugo является генератором статических сайтов, вы можете развернуть сгенерированные им HTML, CSS и JS в любом месте с помощью веб-сервера. Поскольку технические требования к обслуживанию статических сайтов очень низкие, вы можете бесплатно размещать их у широкого круга провайдеров, таких как Netlify, Vercel, Cloudflare Pages и других.

Ранее мы использовали hugo server -D для запуска локального сервера разработки для предварительного просмотра изменений на нашем сайте в режиме реального времени. Чтобы полностью сгенерировать сайт, мы можем использовать команду hugo в корневом каталоге нашего проекта. После завершения создания сайта вы должны увидеть новую общую папку в каталоге вашего проекта. Внутри этой папки вы найдете все файлы, которые необходимо загрузить на сервер или в облачное хранилище, например Amazon S3.

Создание вашего сайта локально и ручная загрузка его на Amazon S3 или на сервер с Nginx — это один из способов развертывания статически сгенерированного сайта. Однако он не самый эффективный, поскольку требует ручной загрузки новых файлов каждый раз, когда вы вносите изменения.

Вместо этого лучше связать папку проекта Hugo с репозиторием GitHub, а репозиторий GitHub связать со службой автоматического развертывания, такой как Netlify. С помощью этой настройки вы можете редактировать свой сайт, отправлять изменения в GitHub и запускать новую сборку и развертывание на Netlify без какого-либо ручного вмешательства. Теперь давайте рассмотрим, как все это сделать!

Как загрузить свой проект Hugo на GitHub

Во-первых, вам нужно создать репозиторий GitHub для вашего проекта. Для этого создайте учетную запись GitHub (если у вас ее еще нет) и загрузите официальное настольное приложение GitHub. После установки приложения GitHub нажмите « Файл» в строке меню и выберите « Новый репозиторий» . Дайте репозиторию имя по вашему выбору, оставьте остальные параметры в состоянии по умолчанию и нажмите « Создать репозиторий ».

По умолчанию (в macOS) приложение GitHub создает новые репозитории в /Users/username/Documents/GitHub . Поскольку мы назвали наш репозиторий my-hugo-site , наш репозиторий можно найти в /Users/brianli/Documents/GitHub/my-hugo-site .

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

Если вы вернетесь к приложению GitHub, вы увидите список измененных файлов. Чтобы загрузить репозиторий на GitHub, добавьте сводку, нажмите « Зафиксировать в основной » и нажмите « Опубликовать репозиторий » в правом верхнем углу.

По умолчанию установлен флажок «Сохранить этот код в секрете». If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Поскольку Hugo — такой быстрый генератор статических сайтов, развертывание базового сайта займет всего несколько секунд. После завершения развертывания вы сможете увидеть промежуточный URL-адрес на панели инструментов Netlify. Щелкните URL-адрес, чтобы просмотреть развернутый сайт.

Вот наш сайт Hugo на Netlify. Как видите, он идентичен сайту в нашей локальной среде:

На этом этапе вы можете настроить собственный домен и SSL-сертификат для своего сайта, размещенного на Netlify. Для этого мы рекомендуем обратиться к официальной документации Netlify.

Поскольку мы связали Netlify с GitHub, новая фиксация в репозитории GitHub проекта Hugo автоматически вызовет новое развертывание на Netlify!

Готовы создать статический сайт в рекордно короткие сроки? Начните с Хьюго ️ Нажмите, чтобы твитнуть

Резюме

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

В этом руководстве вы узнали, как настроить Hugo, создать новый проект, добавить файлы контента, отредактировать файлы темы и развернуть готовый статический сайт. Мы рекомендуем ознакомиться с официальной документацией Hugo, чтобы узнать больше о Hugo и его более продвинутых функциях, таких как пользовательские функции, вступительные материалы и пакеты сборки CSS/JS.

Что вы думаете о Hugo и других генераторах статических сайтов? Пожалуйста, дайте нам знать в комментариях ниже!