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

  • Статья

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

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

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

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

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

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

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

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

  1. Из терминала запустите интерфейс командной строки (CLI) Jekyll, чтобы создать новое приложение.

    jekyll new static-app

  2. Перейдите к созданному приложению.

    cd static-app

  3. Инициализируйте новый репозиторий Git.

     git init

  4. Зафиксируйте изменения.

    git add -A
git commit -m "initial commit"

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

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

  1. Создайте пустой репозиторий GitHub (не создавая файл сведений) со страницы https://github.com/new с именем jekyll-azure-static.

  2. Добавьте репозиторий GitHub в локальный репозиторий в качестве удаленного. В следующей команде не забудьте добавить имя пользователя GitHub вместо заполнителя <YOUR_USER_NAME>.

    git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static

  3. Отправьте локальный репозиторий на сайт GitHub.

    git push --set-upstream origin main

    Примечание.

    Ваша ветвь git может называться иначе, чем main. Замените main в этой команде правильным значением.

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

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

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

  1. Перейдите на портал Azure.

  2. Выберите Создать ресурс.

  3. Найдите Статические веб-приложения.

  4. Выберите Статические веб-приложения.

  5. Нажмите кнопку Создать

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

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

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

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

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

    Примечание.

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

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

  10. В поле Расположение приложения введите ./.

  11. Оставьте поле Расположение API пустым.

  12. В поле Расположение выходных данных введите _site.

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

  1. Нажмите кнопку "Проверить и создать" , чтобы проверить правильность сведений.

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

  3. После завершения развертывания выберите "Перейти к ресурсу".

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

    Deployed application

Настраиваемые параметры 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

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

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

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

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

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