← Cloudflare Pages / pages / framework-guides

Hugo

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

В этом руководстве вы создадите новое приложение Hugo и развернете его с помощью Cloudflare Pages. Вы будете использовать hugo CLI для создания нового сайта на Hugo.

Прежде чем продолжить

Все руководства по фреймворкам предполагают, что у вас уже есть базовое понимание Git ↗. Если вы новичок в Git, обратитесь к этому краткое руководство по Git ↗ о том, как настроить Git на локальном компьютере.

Если вы клонируете по SSH, необходимо сгенерировать ключи SSH ↗ на каждом компьютере, с которого вы отправляете или получаете данные из GitHub.

См. документация GitHub ↗ и Документация Git ↗, где это описано подробнее.

Перейдите в Развернуть с помощью Cloudflare Pages если у вас уже есть сайт Hugo, размещенный в вашем Провайдер Git.

Установите Hugo

Установите Hugo CLI, следуя инструкциям для вашей операционной системы.

Если вы используете пакетный менеджер Homebrew ↗, выполните brew install в терминале, чтобы установить Hugo:

brew install hugo

Если вы используете пакетный менеджер Chocolatey ↗, выполните choco install в терминале, чтобы установить Hugo:

choco install hugo --confirm

Если вы используете пакетный менеджер Scoop ↗, выполните scoop install в терминале, чтобы установить Hugo:

scoop install hugo

Менеджер пакетов вашего дистрибутива Linux может включать Hugo. В этом случае установите Hugo напрямую через менеджер пакетов дистрибутива, например в Ubuntu выполните следующую команду:

sudo apt-get install hugo

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

Ручная установка

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

Подробные инструкции по установке этих версий см. в документация Hugo ↗.

Создайте новый проект

После установки Hugo обратитесь к Быстрый старт Hugo ↗ чтобы создать проект или создать новый проект, выполнив hugo new в терминале:

hugo new site my-hugo-site

Сайты на Hugo используют темы для настройки внешнего вида статически собранного HTML-сайта. Список доступных тем можно найти на themes.gohugo.io ↗ : пока используйте тема Ananke ↗ выполнив следующие команды в терминале:

cd my-hugo-site
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml

Создайте пост

Создайте новый пост, чтобы наполнить свой сайт на Hugo начальным содержимым. Выполните hugo new команду в терминале, чтобы создать новый пост:

hugo new content posts/hello-world.md

Внутри hello-world.md, добавьте немного исходного содержимого, чтобы создать публикацию. Удалите draft строку в frontmatter поста, когда будете готовы его опубликовать. Любые посты с draft: true набор будет пропущен в процессе сборки Hugo.

Создайте репозиторий GitHub

Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория перейдите в каталог только что созданного проекта, чтобы подготовить локальное приложение и отправить его в GitHub, выполнив в терминале следующие команды:

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

Развернуть с помощью Cloudflare Pages

Чтобы развернуть сайт в Pages:

На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.
Перейдите в Workers & Pages ↗
Выберите Создать приложение.
Выберите Pages на вкладке.
Выберите Импорт существующего репозитория Git.
Выберите созданный вами новый репозиторий GitHub, а затем нажмите Начало настройки.
В Настройка сборок и деплоев раздел и укажите следующую информацию:

Параметр конфигурации	Значение
Продакшен-ветка	`main`
Команда сборки	`hugo`
Директория сборки	`public`

Хотя public является каталогом сборки по умолчанию для сайтов на Hugo, это значение можно настроить с помощью publishDir настройка ↗.

Настройка базового URL

Hugo позволяет настроить baseURL вашего приложения. Это позволяет использовать absURL вспомогательная функция для построения полных канонических URL-адресов. Чтобы сделать это с Pages, необходимо указать -b или --baseURL флаги вместе с CF_PAGES_URL переменную окружения в hugo команда сборки.

Итоговая команда сборки может выглядеть так:

hugo -b $CF_PAGES_URL

После завершения настройки деплоя выберите Save and Deploy. Вы должны увидеть, что Cloudflare Pages устанавливает hugo и зависимостей проекта, а также сборки сайта перед его развёртыванием.

После деплоя сайта вы получите уникальный поддомен для своего проекта на *.pages.dev. Каждый раз, когда вы фиксируете новый код в своем сайте Hugo, Cloudflare Pages автоматически пересоберет ваш проект и развернет его. Вы также получите доступ к развёртывания предпросмотра для новых pull request, чтобы вы могли увидеть, как изменения выглядят на сайте, прежде чем разворачивать их в продакшен.

Использование определённой или более новой версии Hugo

Чтобы использовать определённую версию Hugo или более новую ↗, создайте HUGO_VERSION переменную окружения в вашем проекте Pages > Настройки > Переменные окружения. Укажите в качестве значения нужную версию Hugo (см. Предварительные требования ↗ для минимальной рекомендуемой версии).

Например, HUGO_VERSION: 0.128.0.

Подробнее

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