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

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

В этом руководстве вы узнаете, как:

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

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

Предпосылки

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

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

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

Следуйте инструкциям по установке 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 (не создавайте README) из 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

Альтернативное развертывание с помощью интерфейса командной строки SWA

Если у приложения Hugo есть зависимости, требующие дополнительной настройки, например модулей GoLang, можно использовать интерфейс командной строки статических веб-приложений Azure для развертывания напрямую. Ниже приведён пример рабочего процесса GitHub Actions, который устанавливает командную строку и развёртывает ваше приложение.

jobs:
   build_and_deploy_job:
      runs-on: ubuntu-latest
      name: Build and Deploy with SWA CLI
      steps:
         - name: Checkout code
            uses: actions/checkout@v3
            with:
               submodules: true

         - name: Install SWA CLI
            run: npm install -g @azure/static-web-apps-cli

         - name: Build Hugo site
            run: |
               # Install Hugo modules
               hugo mod get

               # Minify the supported output formats
               hugo --minify

         - name: Deploy with SWA CLI
            env:
               AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
            run: |
               swa deploy ./public --api-location ./api --env production

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

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

Если ваше приложение Hugo использует функцию Git Info, созданный по умолчанию файл рабочего процесса для статического веб-приложения использует действие извлечения 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
На панели поиска вверху найдите приложение по имени, которое вы указали ранее.
Щелкните приложение.
Нажмите кнопку Удалить.
Нажмите кнопку Да, чтобы подтвердить действие удаления.

Дальнейшие шаги

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

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-09-29