Начало работы с Hugo: как создать простой веб-сайт

Последнее обновление 09.01.2023 — Василий Иванов

Hugo — это генератор статических сайтов, который позволяет создавать веб-сайты практически без опыта программирования. Вы можете использовать готовые темы в качестве основы для дизайна вашего сайта. Это позволяет вам больше сосредоточиться на наполнении сайта своим контентом.

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

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

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

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

Мак

Вы можете установить Hugo с помощью Homebrew.

1. Откройте терминал macOS.
2. Установите менеджер пакетов Homebrew.

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

3. Установите Хьюго.

   brew install hugo

Окна

Вам понадобится эквивалентный менеджер пакетов для Windows. Например, вы можете использовать менеджер пакетов Scoop.

1. Откройте Windows PowerShell, которая уже должна быть частью вашей операционной системы Windows.
2. Если вы устанавливаете Scoop в первый раз, вам может потребоваться настроить политику выполнения.

   Set-ExecutionPolicy RemoteSigned -scope CurrentUser

3. Установить Совок:

   iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Установить Хьюго:

   scoop install hugo

Как создать проект Хьюго

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

1. Откройте терминал или командную строку. Перейдите в папку, в которой вы хотите создать свой проект.
2. Выполните команду Hugo New Site:

   hugo new site new-hugo-website

3. Перейдите к местоположению вашего проекта Hugo в проводнике.
4. Откройте папку проекта. Вы увидите, что ваш новый веб-сайт Hugo имеет структуру файлов и папок, необходимую для работы вашего веб-сайта.

Как добавить тему

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

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

1. Выберите тему, которая вам нравится. Каждая тема может иметь немного разные инструкции по настройке, показанные на соответствующей странице предварительного просмотра. В этом уроке в качестве примера будет использована тема «Сказка».
2. Перейдите в корневую папку вашего проекта в терминале или командной строке.

   cd new-hugo-website

3. Запустите команду, чтобы добавить тему сказки. Вы можете добавить тему в качестве подмодуля, который создаст новую папку с именем tale внутри папки темы.

   git init
   git submodule add https://github.com/EmielH/tale-hugo.git themes/tale

   Кроме того, вы можете клонировать репозиторий историй GitHub в папку тем вашего проекта.

   git clone https://github.com/EmielH/tale-hugo.git themes/tale

4. Перейдите в папку вашего проекта. Нажмите на папку с темами, чтобы открыть ее. Независимо от того, какую команду вы использовали, появится новая папка сказок, в которой хранится только что загруженная тема.
5. В файле config.toml добавьте тему сказки как часть конфигурации. Это скажет Hugo использовать HTML, CSS и другие стили, которые включает в себя тема Tale.

   theme = "tale"

Как добавить страницы на свой сайт

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

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

Чтобы добавить новую подстраницу или сообщение на свой веб-сайт, вам нужно будет добавить новый файл Markdown в папку содержимого. Каждая запись или страница будет иметь свой собственный файл Markdown, связанный с ней.

1. Откройте папку содержимого внутри вашего проекта Hugo. Создайте новый файл Markdown с именем myFirstPost.md.
2. Откройте файл в любом текстовом редакторе, таком как Notepad++ или Visual Studio Code.
3. В верхней части файла добавьте некоторые метаданные. Это будет включать важную информацию о публикации. Используемая вами тема будет определенным образом форматировать эту информацию на странице.

   ---
   author: "Your Name"
   title: "My First Post"
   date: "2022-05-17"
   ---

4. После того, как вы добавили метаданные, вы можете начать добавлять свой контент с помощью Markdown.

   This is my very first post on my Hugo website!
   The Hugo theme being used for this site is called Tale.
   It is very simple to install and configure.
   # Subheading
   This is some content.
   # Another Subheading
   This is more content.

5. Не стесняйтесь добавлять больше файлов уценки, чтобы добавить больше страниц на свой сайт.

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

Чтобы запустить свой веб-сайт, используйте команду Hugo serve.

1. Откройте терминал или командную строку.
2. Перейдите в корневую папку вашего проекта Hugo.
3. Запустите команду Hugo serve:

   hugo serve

4. Подождите, пока веб-сайт завершит процесс запуска. Как только это будет завершено, терминал напечатает сообщение о том, с какого локального адреса вы можете получить доступ к веб-сайту. Обычно это http://localhost:1313/.
5. Откройте веб-браузер и введите http://localhost:1313/ или любой другой адрес, который дал вам терминал. Вы увидите главную страницу вашего сайта Hugo.
6. На странице будет список сообщений для каждого файла уценки, который у вас есть. В этом случае есть два файла уценки, заполненные содержимым. Это включает в себя страницу myFirstPost.md, которую вы создали ранее. Он также включает в себя новый пост под названием бананCakeRecipe.md.
7. Нажмите на ссылку заголовка на одном из превью. Это приведет вас к полной странице для этого конкретного сообщения.

Размещение вашего веб-сайта Hugo

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

После того, как вы создали свой веб-сайт Hugo, вы можете начать узнавать больше о том, как его разместить. Существует множество бесплатных вариантов хостинга веб-сайтов, таких как Dropbox, Google Drive или OneDrive.