Развертывание сайта Jekyll на платформу статических веб-приложений Azure

2025-05-20

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

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

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

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

Предпосылки

Установка Jekyll
- При необходимости можно использовать подсистему Windows для Linux и следовать инструкциям Ubuntu.
Учетная запись Azure с активной подпиской. Если ее нет, можно создать учетную запись бесплатно.
Учетная запись GitHub. Если ее нет, можно создать учетную запись бесплатно.
Установленная программа установки Git. Если у вас его нет, можно установить Git.

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

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

В терминале запустите интерфейс командной строки Jekyll, чтобы создать новое приложение.
```
jekyll new static-app
```
Перейдите к созданному приложению.
```
cd static-app
```
Инициализируйте новый репозиторий Git.
```
 git init
```
Зафиксируйте изменения.
```
git add -A
git commit -m "initial commit"
```

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

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

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

Ваша ветка Git может быть названа по-другому, чем main. Замените main в этой команде правильным значением.

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

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

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

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

На вкладке "Основные сведения" введите следующие значения.

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

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

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

Недвижимость	Ценность
Предприятие	Выберите нужную организацию GitHub.
Репозиторий	Выберите jekyll-static-app.
Филиал	Выберите Main.

Замечание

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

В разделе "Сведения о сборке" выберите "Пользовательский" в раскрывающемся списке "Предустановки сборки " и сохраните значения по умолчанию.
В поле "Расположение приложения" введите ./.
Оставьте поле Расположение API пустым.
В поле "Расположение вывода " введите _site.

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

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

Пользовательские параметры Jekyll

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

Чтобы настроить переменные среды, например JEKYLL_ENV, добавьте раздел env в GitHub Actions для статических веб-приложений Azure в рабочем процессе.

- 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 source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

Очистите ресурсы

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

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

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

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