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

Статья
10/22/2023

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

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

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

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

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

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

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

Создайте приложение Jekyll с помощью интерфейса командной строки (CLI) 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 (не создавая файл сведений) со страницы https://github.com/new с именем jekyll-azure-static.
Добавьте репозиторий 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 раздел в Статические веб-приложения Azure GitHub Actions в рабочем процессе.

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

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

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

Поделиться через