Развертывание сайта Hugo для Статические веб-приложения Azure

Статья
01/10/2024

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

В этом руководстве описано следующее:

Создание приложения Hugo
Настройка Статических веб-приложений Azure
Развертывание приложения Hugo в Azure

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

Необходимые компоненты

Учетная запись Azure с активной подпиской. Если ее нет, можно создать учетную запись бесплатно.
Учетная запись GitHub. Если ее нет, можно создать учетную запись бесплатно.
Установленная программа установки Git. Если у вас его нет, можно установить Git.

Создание приложения Hugo

Создайте приложение Hugo с помощью интерфейса командной строки (CLI) Hugo.

Выполните инструкции из руководства по установке Hugo в вашей операционной системе.
Откройте окно терминала.
Запустите интерфейс командной строки Hugo, чтобы создать новое приложение.
```
hugo new site static-app
```
Перейдите к созданному приложению.
```
cd static-app
```
Инициализируйте репозиторий Git.
```
git init
```
Убедитесь, что имя ветви — main.
```
git branch -M main
```
Затем добавьте тему на сайт, установив ее в качестве подмодуля Git и указав ее в файле конфигурации Hugo.
```
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
```
Зафиксируйте изменения.
```
git add -A
git commit -m "initial commit"
```

Отправьте приложение в GitHub.

Для подключения к Статическим веб-приложениям Azure требуется репозиторий на сайте GitHub. Ниже показано, как создать репозиторий для своего сайта.

Создайте пустой репозиторий GitHub (не создавая файл сведений) со страницы https://github.com/new с именем hugo-static-app.
Добавьте репозиторий GitHub в локальный репозиторий в качестве удаленного. В следующей команде не забудьте добавить имя пользователя GitHub вместо заполнителя <YOUR_USER_NAME>.
```
git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
```
Отправьте локальный репозиторий на сайт GitHub.
```
git push --set-upstream origin main
```

Развертывание веб-приложения

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

Создание приложения

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

На вкладке Основные сведения введите приведенные ниже значения.

Свойство	Значение
Подписка	Имя подписки Azure.
Группа ресурсов	my-hugo-group
Имя	hugo-static-app
Тип плана	Бесплатно
Область для API Функций Azure и промежуточных сред	Выберите ближайший к вам регион.
Источник	GitHub

Выберите Войти по учетным данным GitHub и выполните аутентификацию с помощью GitHub.

Введите следующие значения GitHub.

Свойство	Значение
Предприятие	Выберите нужную организацию GitHub.
Репозиторий	Выберите hugo-static-app.
Ветвь	Выберите Main.

Примечание.

Если вы не видите репозитории, возможно, потребуется авторизовать Статические веб-приложения Azure на GitHub. Перейдите к репозиторию GitHub и перейдите к Параметры приложениям>, авторизованным Приложение OAuth>, выберите Статические веб-приложения Azure и выберите "Предоставить". Чтобы предоставить разрешения для репозиториев организации, необходимо быть владельцем организации.

В разделе Сведения о сборке выберите Hugo в раскрывающемся списке Варианты сборки и сохраните значения по умолчанию.

Проверка и создание

Нажмите кнопку "Проверить и создать" , чтобы проверить правильность сведений.
Выберите "Создать", чтобы начать создание Служба приложений статического веб-приложения и подготовить GitHub Actions для развертывания.
После завершения развертывания выберите "Перейти к ресурсу".
На экране ресурса выберите ссылку URL-адреса , чтобы открыть развернутое приложение. Возможно, потребуется подождите минуту или два для завершения действий GitHub.

Пользовательская версия Hugo

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

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          HUGO_VERSION: 0.58.0

Использование функции Git Info в приложении Hugo

Если приложение Hugo использует функцию Git Info, файл рабочего процесса по умолчанию, созданный для статического веб-приложения, использует проверка out GitHub Action для получения мелкой версии репозитория Git с глубиной по умолчанию 1. В этом сценарии Hugo видит все файлы содержимого как поступающие из одной фиксации, поэтому они имеют одинаковый автор, метку времени последнего изменения и другие .GitInfo переменные.

Обновите файл рабочего процесса, чтобы получить полный журнал Git, добавив новый параметр на шаге actions/checkout , чтобы задать fetch-depth значение 0 (без ограничения):

      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

Получение полной истории увеличивает время сборки рабочего процесса GitHub Actions, но ваши .Lastmod и переменные являются точными и .GitInfo доступными для каждого файла содержимого.

Очистка ресурсов

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

Откройте портал Azure .
На панели поиска вверху найдите приложение по имени, которое вы указали ранее.
Щелкните приложение.
Нажмите кнопку Удалить.
Нажмите кнопку Да, чтобы подтвердить действие удаления.

Следующие шаги

Добавить личный домен