Инструменты пользователя

Инструменты сайта


генератоh_сайтов_hugo

Генератор сайтов Hugo

Статический генератор сайта — программа, которая из различных исходных файлов (картинок, шаблонов в разных форматах, текстовых файлов и т.п) генерирует статический HTML-сайт. Один из ярких представителей — Hugo. Разработчики позиционируют Hugo, как самая быстрая в мире платформа для создания сайтов.

Ознакомиться с документацией можно на официальном сайте фреймворка.

На момент написания статьи доступная версия фреймворка — v0.81.0.

Установка

Для OS Windows

В системе должен быть установлен chocolatey консоли PowerShell

choco install hugo -confirm

Для OS Linux

# Debian
sudo apt-get install hugo
# Fedora
sudo dnf install hugo
# Arch
sudo pacman -Syu hugo

Структура

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

hugo new site megatest

Далее hugo сгенерирует следующую структуру проекта:

 tree /F
F:.
└───megatest
    │   config.toml
    │
    ├───archetypes
    │       default.md
    │
    ├───content
    ├───data
    ├───layouts
    ├───static
    └───themes
  • content – Основной контент или содержимое сайта храниться в формате .md в папке content. В роле контента могут выступать ваши статьи, новости, etc…
  • data – Данный каталог используется для хранения файлов конфигурации, которые Hugo может использовать при создании веб-сайта. Эти файлы могут быть записаны в формате YAML, JSON или TOML.
  • Archetypes – используют для создания содержимого сайта на основе заготовок. Это экономит время и обеспечивает единообразие для сайтов, использующих несколько типов контента. Также можно создавать свои собственные архетипы с предварительно настроенными полями основного материала.
  • I18n – каталог предназначен для хранения конфигурации сайта на различных языках.
  • Resources – Hugo использует этот каталог для хранения кеша. Это ускоряет сборку сайта.
  • Static – Здесь храниться весь статический контент (CSS, JavaScript, и т.п).
  • Layouts – Хранит шаблоны в виде файлов .html, которые определяют, как просмотры вашего контента будут отображаться на статическом веб-сайте.
  • Themes – Для хранения различных тем.
  • Public – Сгенерированные исходники веб-сайта. Именно эту директорию следует заливать на хостинг.

Работа с сайтом Hugo

Посмотрим на содержание config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
  • baseURL – означает адрес сайта
  • languageCode – отражает основной язык, используемый на сайте. Если планируется писать на русском, изменим это значение на «ru-ru»
  • title – содержание этого поля используется в заголовках страниц и, возможно, в шапке сайта (зависит от темы). Измените значение на собственное («megatest» в моём случае).

Добавляем тему

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

Для примера возьмем тему Minos. Перейдём в каталог themes и установим тему

git clone https://github.com/carsonip/hugo-theme-minos.git themes/minos
# windows
del themes\minos\.git
# linux
rm -rf themes/minos/.git

Теперь необходимо изменить config.toml и указать какую тему хотим использовать. Добавьте в конец файла:

theme = "minos"

Запускаем сервер

Запускаем сервер из корня сайта

hugo server -D

и переходим по адресу http://localhost:1313 И видим, что очень пустенько

Добавляем контент

Находясь в корневой директории нашего проекта (Megatest в моем случае) вводим

hugo new post/hello-world.md

Эта команда не делает ничего сверхъестественного, она лишь создаёт в директории content директорию post, а внутри неё файл hello-world.md со следующим содержимым:

---
title: "Hello World"
date: 2021-03-04T17:17:43+03:00
draft: true
---

Часть, заключенная между ---, называется front matter и содержит основную мета-информацию о статье. title будет использован при формировании списка статей и в качестве заголовка на странице статьи. date будет использована везде, где указывается дата написания статьи. draft: true означает, что статья не попадёт на сайт при публикации, но будет видна локально при построении сайта командой hugo server -D (-D означает построить черновики).

Изменяем содержимое файла в любимом текстовом редакторе

Сибирский хаски — заводская специализированная порода собак, выведенная чукчами северо-восточной части Сибири
и зарегистрированная американскими кинологами в 1930-х годах как ездовая собака, полученная от аборигенных собак
Дальнего Востока России, в основном из Анадыря, Колымы, Камчатки у местных оседлых приморских племён — юкагиров,
кереков, азиатских эскимосов и приморских чукчей — анкальын (приморские, поморы — от анкы (море)). Эта аборигенная
ездовая собака Дальнего Востока является одной из древнейших пород собак.

Подробнее почитать о [Хасях](https://ru.wikipedia.org/wiki/8).

Далее добавим страницу About. Для этого выполним:

hugo new about.md

И изменим content\about.md

---
title: "About"
date: 2021-03-04T17:33:08+03:00
draft: true
hidden: true
---
О пейсателе этого уютненького [Nevvad]
(https://nevvad.com/)

Свойство hidden: true позволит скрыть страницу из списка всех постов. Теперь необходимо добавить ссылку на неё в шапку сайта. Для этого допишите в конец config.toml:

[menu]

  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = -110

Публикация сайта







Нeader_3




генератоh_сайтов_hugo.txt · Последнее изменение: 2021/03/04 18:07 — admin