Установка Hugo с помощью Cloud Apps

С помощью этого руководства вы установите и настроите статический сайт на Hugo — генераторе статических сайтов — используя сервис Cloud Apps. Приложение развернет сайт в Object Storage и настроит доступ по домену с автоматическим выпуском SSL-сертификатов.

Чтобы установить Hugo:

1. Подготовьте облако к работе.
2. Настройте DNS-зону.
3. Установите Hugo с помощью Cloud Apps.
4. Подготовьте репозиторий сайта.
5. Проверьте результат.

Если созданные ресурсы вам больше не нужны, удалите их.

Подготовьте облако к работеПодготовьте облако к работе

Зарегистрируйтесь в Yandex Cloud и создайте платежный аккаунт:

1. Перейдите в консоль управления, затем войдите в Yandex Cloud или зарегистрируйтесь.
2. На странице Yandex Cloud Billing убедитесь, что у вас подключен платежный аккаунт, и он находится в статусе ACTIVE или TRIAL_ACTIVE. Если платежного аккаунта нет, создайте его и привяжите к нему облако.

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

Подробнее об облаках и каталогах.

Необходимые платные ресурсыНеобходимые платные ресурсы

В стоимость поддержки создаваемой инфраструктуры входят:

• плата за использование публичной DNS-зоны и за публичные DNS-запросы (тарифы Yandex Cloud DNS);
• плата за хранение данных в Yandex Object Storage, операции с ними и исходящий трафик (тарифы Yandex Object Storage);
• плата за хранение секретов в Yandex Lockbox (тарифы Yandex Lockbox).

Настройте DNS-зонуНастройте DNS-зону

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

Установите Hugo с помощью Cloud AppsУстановите Hugo с помощью Cloud Apps

Установите статический сайт на Hugo с помощью Cloud Apps. Приложение развернет сайт в Object Storage и настроит доступ по домену.

Подготовьте репозиторийПодготовьте репозиторий

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

1. Если у вас еще не установлен Git, установите его по инструкции.

2. Создайте репозиторий из шаблона cloudapp-hugo.

3. На локальном компьютере перейдите в рабочую директорию, где будет размещен проект сайта.

4. Клонируйте репозиторий, созданный из шаблона.

5. Перейдите в склонированный репозиторий. Дальнейшую работу (настройку окружения, сборку и выгрузку) выполняйте внутри этого каталога.

Разверните сайтРазверните сайт

Откройте файл README в корне репозитория и выполните описанные там шаги:

1. Настройте сервисное подключение. Укажите сервисный аккаунт, созданный при установке приложения.

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

2. Обновите конфигурационные файлы в редакторе, например в Visual Studio Code:

   1. Файл hugo.toml:

      baseURL = 'https://<домен>'
      title = '<название_сайта>'
      ...
      [deployment]
      [[deployment.targets]]
      name = 'production'
      url = 's3://<домен>?region=ru-central-1&endpoint=https://storage.yandexcloud.net'
      ...
      

      Где:

      • <домен> — домен, на котором будет доступен сайт. Обычно совпадает с именем бакета, созданного при установке приложения.
      • <название_сайта> — название вашего сайта.

   2. Файл .sourcecraft/ci.yaml:

      tokens:
        SERVICE_CONNECTION:
          service_connection: <сервисное_подключение>
          scope: org
      
      workflows:
        hugo-deploy:
          env:
            DOMAIN_NAME: <домен>
      

      Где:

      • <сервисное_подключение> — имя сервисного подключения.
      • <домен> — домен, на котором будет доступен сайт. Обычно совпадает с именем бакета, созданного при установке приложения.
      • scope — уровень сервисного подключения. Возможные значения:
        • repo — для подключений на уровне репозитория.
        • org — для подключений на уровне организации.

3. Запустите пайплайн CI/CD для развертывания статического сайта. Для этого последовательно выполните команды в ветку main:

   git commit -a
   

   Введите название коммита.

   git push
   

   После успешного выполнения пайплайна сайт станет доступен по адресу https://<домен>. Результат сборки автоматически загрузится в бакет Object Storage.

Настройте сайтНастройте сайт

1. Установите локально Hugo нужной версии для локальной разработки.

2. Запустите dev-сервер:

   hugo server
   

   Сайт будет доступен по адресу http://localhost:1313.

3. Для сборки продакшен-версии выполните команду:

   hugo
   

   Результат сборки будет сохранен в папке public/.

4. Для локального просмотра продакшен-сборки выполните команду:

   hugo server --disableFastRender
   

5. Чтобы опубликовать изменения, запустите пайплайн CI/CD, как описано в разделе Разверните сайт.

Проверьте результатПроверьте результат

Убедитесь, что ваш статический сайт на Hugo успешно опубликован и доступен по публичному домену:

1. Откройте в браузере домен или поддомен, который указывали при установке приложения (например, https://site.example.com).

2. Проверьте, что открывается главная страница вашего Hugo-сайта и работает его навигация.

3. Если в шаблоне была добавлена тестовая страница или раздел, перейдите по соответствующей ссылке и убедитесь, что она также открывается по публичному URL.

Если сайт открывается, все изображения, стили и страницы загружаются корректно — развертывание выполнено успешно.

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

Чтобы остановить работу и перестать платить за созданные ресурсы:

1. Удалите все объекты из бакета Object Storage, созданного при установке приложения.

2. Удалите приложение Статический сайт в Object Storage в Cloud Apps:

   1. В консоли управления выберите каталог, в котором установлено приложение.
   2. В списке сервисов выберите Cloud Apps.
   3. Найдите в списке приложение Статический сайт в Object Storage.
   4. Нажмите на значок рядом с приложением и выберите Удалить.
   5. Подтвердите удаление и дождитесь завершения. Пустой бакет и остальные ресурсы этого экземпляра приложения удаляются вместе с ним.

3. Если вы создавали сервисный аккаунт при установке приложения, удалите его.

4. Удалите публичную DNS-зону.

5. Удалите сервисное подключение SourceCraft:

   1. Откройте главную страницу SourceCraft.
   2. На вкладке Домой в секции Ваша мастерская перейдите в раздел Репозитории.
   3. Выберите репозиторий, созданный из шаблона cloudapp-hugo.
   4. В разделе Настройки репозитория перейдите в секцию Сервисные подключения и выберите нужное сервисное подключение.
   5. В правом верхнем углу нажмите Удалить и подтвердите удаление.

6. Удалите репозиторий, созданный из шаблона в SourceCraft.