Как автоматически развернуть изменения в теме WordPress с помощью GitHub и Deploy

Хотите ли вы автоматически развернуть изменения темы WordPress на своем сайте?? Большинство профессиональных веб-разработчиков используют системы...

Хотите ли вы автоматически развернуть изменения темы WordPress на своем сайте?? Большинство профессиональных веб-разработчиков используют системы контроля версий, такие как GitHub или BitBucket, и автоматически развертывают свои изменения в staging или live-сайт. В этой статье мы покажем вам, как автоматически развернуть изменения темы WordPress с помощью GitHub и Deploy.

Зачем использовать систему контроля версий для разработки темы WordPress?

Во-первых, нам нужно понять, что контроль версий что это значит:

… система, которая записывает изменения в файле или наборе файлов с течением времени так, что вы можете вспомнить конкретные версии позже http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control

Другими словами, каждый раз, когда мы изменяем шаблон темы WordPress, изображение или файл CSS, система контроля версий отслеживает эти изменения. В определенные моменты мы можем пометить (зафиксировать) пакет изменений. Если эти изменения вызовут проблему, мы можем вернуться (или откатиться) к существующей «версии» нашей WordPress-темы.

Git является распространенной системой контроля версий и позволяет нескольким пользователям (веб-разработчикам) работать над одной и той же базой кода (например, темой WordPress). Если два разработчика редактируют один и тот же файл, Git имеет встроенные средства управления для решения этих проблем (известных как конфликты слияния).

Размещенные на хостинге сторонние системы контроля версий Git, такие как GitHub и BitBucket, позволяют пользователям оставлять вопросы (или тикеты), если они обнаружили проблему в вашем коде. Ваши изменения кода могут быть зафиксированы (помечены) для конкретной проблемы, чтобы показать точные изменения кода, сделанные для устранения проблемы. Это очень полезно, когда вы оглядываетесь назад на код через 6 или 12 месяцев и хотите знать, почему вы сделали что-то определенным образом.

Зачем использовать систему развертывания?

Система развертывания, которая интегрируется с такими сервисами, как GitHub, позволяет автоматически или вручную загружать изменения, внесенные вами в тему WordPress.

Вы можете рассматривать это как одностороннюю систему синхронизации — например, если вы удалите файл из вашей темы WordPress, вам придется не забыть удалить его и через FTP. С системой развертывания это автоматически делается за вас, когда вы фиксируете изменения кода на GitHub.

Настройка репозитория GitHub для вашей темы WordPress

Сначала мы создадим учетную запись на GitHub, используем клиент GitHub для Windows или Mac, чтобы сохранить нашу тему WordPress в GitHub.

Перейдите по ссылке https://github.com и зарегистрировать бесплатный аккаунт.

После того как вы зарегистрировались и подтвердили свой адрес электронной почты, нажмите на значок плюса в правом верхнем углу экрана и выберите Новый репозиторий (хранилище — это контейнер для вашего кода — в данном случае, нашей темы WordPress).

Добавление нового репозитория в GitHub

Начните с установки имя репозитория — имя папки вашей темы WordPress — хорошая идея. Затем выберите, является ли это Публичный или Приватный репозиторий. Публичные репозитории доступны для всех, кто может видеть ваш код, но не может вносить в него изменения. Приватные репозитории доступны только для вашего просмотра.

Наконец, установите флажок ниже Инициализируйте этот репозиторий с помощью README, а затем нажмите кнопку Создать репозиторий кнопка.

Создание нового репозитория для вашей темы WordPress на GitHub

Если все сработало, вы должны увидеть на экране ваш новый репозиторий:

Новый репозиторий GitHub

Установите GitHub для Windows / Mac

Далее нам нужно поместить код нашей темы WordPress в репозиторий. Это можно сделать с помощью клиента GitHub, который устанавливается на ваш компьютер.

Просто посетите сайт GitHub Desktop и загрузите клиент GitHub Desktop, доступный для Windows и Mac.

После загрузки запустите процесс установки, нажав кнопку Продолжить

Экран приветствия установки рабочего стола GitHub

На следующем экране введите логин (имя пользователя) и пароль, которые вы создали при регистрации на GitHub. Нажмите кнопку Войти кнопка после завершения.

Войдите на GitHub

Если данные для входа в систему введены правильно, появится ваша учетная запись. Нажмите на кнопку Продолжить кнопку, чтобы продолжить:

Войти в GitHub

Мы можем оставить опцию Конфигурация Git раздел с настройками по умолчанию. Убедитесь, что вы нажали кнопку Установите инструменты командной строки опция, перед тем как нажать Продолжить кнопка:

Настройте git и установите инструменты командной строки

Наконец, нажмите Готово, и перед вами откроется окно GitHub.

Давайте добавим наш репозиторий GitHub, который мы создали ранее. Для этого нажмите на значок плюса в правом верхнем углу, а затем на значок Клонировать опцию. Вы увидите список ваших репозиториев GitHub, включая тот, который мы создали ранее:

Клонирование репозиториев

Нажмите на репозиторий, который вы создали ранее, а затем нажмите кнопку Клонируйте кнопка.

Выберите, где на вашем компьютере вы хотите хранить этот репозиторий, и нажмите кнопку Clone кнопку после того, как вы выбрали это.

Теперь мы клонировали (скопировали) наш репозиторий, размещенный на GitHub, на наш компьютер.

Далее нам нужно добавить код нашей WordPress Theme в папку репозитория, а затем зафиксировать и синхронизировать этот код с GitHub.

Начните с поиска папки, которую вы выбрали в шаге выше, на своем компьютере. Там должно быть написано README.md файл в папке. В зависимости от настроек вашего компьютера вы можете также увидеть скрытую кнопку .git folder:

Клонируйте папку репозитория на своем компьютере

Скопируйте и вставьте код вашей темы WordPress в эту папку:

Скопируйте и вставьте файлы вашей темы в папку репозитория на вашем компьютере

Откройте приложение GitHub для Mac или Windows, и теперь в окне появятся файлы, которые вы только что добавили:

Непринятые изменения

Вы увидите изменения, выделенные зеленым цветом. Это изменения, которые вы сохранили в локальном репозитории, но еще не зафиксировали их.

Далее нам нужно зафиксировать (загрузить) эти файлы на GitHub. Для этого введите текст в поле Резюме Вставка для объяснения внесенных изменений (e.g. Мой первый коммит), и нажмите кнопку Сделать коммит на master кнопка.

Зафиксировать изменения

Это фиксирует изменения, которые вы внесли в репозиторий. Чтобы загрузить изменения в GitHub, нажмите кнопку Sync в правом верхнем углу окна приложения GitHub.

Синхронизируйте локальный и GitHub репозитории

Чтобы проверить, что ваш коммит был загружен на GitHub, посетите ваш репозиторий на сайте GitHub. Если все сработало, вы увидите свой код:

Изменения успешно загружены на GitHub

Настройка развертывания

Итак, мы настроили GitHub и зафиксировали код нашей темы WordPress в вашем репозитории GitHub. Последний шаг — загрузить все изменения в репозитории GitHub на ваш сайт WordPress.

DeployHQ или просто Deploy — это веб-сервис, который будет отслеживать изменения в вашем репозитории GitHub и автоматически или вручную загружать только эти изменения на ваш сайт WordPress.

Представьте это как соединение между вашим кодом и веб-сервером:

Сначала вам нужно посетить сайт Deploy и зарегистрироваться. Deploy — это платная услуга, но она предлагает бесплатный аккаунт для одного проекта и 10 развертываний в день.

После завершения регистрации вы можете войти в свою панель управления Deploy. Нажмите на кнопку Создать новый проект, чтобы начать работу.

Добавьте новый проект в Deploy

Далее вам нужно указать имя для вашего проекта и выбрать платформу для хостинга кода — GitHub. Нажмите на кнопку создания проекта, чтобы продолжить.

Развернуть имя проекта и хостинг кода

Теперь Deploy перенаправит вас на GitHub. Если вы еще не вошли в систему, то вам будет предложено войти в систему. После этого вам будет предложено разрешить Deploy доступ к вашей учетной записи GitHub.

Дайте разрешение Deploy на доступ к вашей учетной записи GitHub

Нажмите на кнопку ‘Authorize application’, чтобы продолжить.

Deploy получит список ваших репозиториев с GitHub и попросит вас выбрать репозиторий для этого проекта.

Выберите свой репозиторий

Просто нажмите на репозиторий темы WordPress, и Deploy импортирует его для вас.

На следующем шаге Deploy попросит вас предоставить информацию о сервере. Здесь вы указываете Deploy, как загружать файлы на ваш сервер WordPress.

Для этого вам понадобятся ваши учетные данные FTP.

Детали развертывания FTP

  • Имя: Укажите имя для этого соединения
  • Протокол: FTP или, если у вас есть SFTP или SSH, вы можете использовать и их
  • Имя хоста: SFTP/FTP-хост вашего веб-сайта.
  • Порт: SFTP/FTP-порт хостера вашего сайта (обычно SFTP = 22, FTP = 21)
  • Имя пользователя и пароль: Имя пользователя и пароль FTP.
  • Deployment Path: Путь, по которому вы перейдете перед загрузкой файлов темы WordPress. Например, public_html/example.com/wp-content/themes/MyTheme, где MyTheme тема WordPress, которую вы зафиксировали на GitHub.

Нажмите на кнопку сохранения, чтобы продолжить.

Теперь Deploy проверит подключение к серверу, и если все работает правильно, то выдаст сообщение об успехе.

Сервер добавлен перейдите к развертыванию

Теперь вы можете нажать на кнопку Deploy Now, чтобы загрузить файлы GitHub на ваш сайт.

Новое развертывание

Deploy покажет вам детали этого развертывания. Нажмите кнопку Развернуть в нижней части.

Теперь вы увидите прогресс развертывания. После завершения развертывания вы увидите сообщение об успехе.

Успешное развертывание

Вы успешно развернули изменения с GitHub на свой сайт с помощью Deploy. Теперь, когда вы вносите изменения в тему WordPress на своем компьютере, вам нужно зафиксировать их на GitHub. После этого вам нужно посетить сайт Deploy, чтобы начать развертывание вручную.

Давайте посмотрим, как настроить автоматическое развертывание, чтобы все изменения, которые вы фиксируете на GitHub, автоматически развертывались на вашем сайте.

Настройка автоматического развертывания

Сначала вам нужно посетить вашу панель управления Deploy и перейти на страницу Projects. Нажмите на название вашего проекта.

Развертывание проектов

На странице вашего проекта подведите курсор к меню Settings и выберите Servers & Groups.

Настройки проекта - Серверы и группы

Нажмите на значок редактирования рядом с вашим сервером.

Редактирование сервера

Это приведет вас к экрану редактирования сервера. В правой колонке вы найдете настройки автоматического развертывания.

Убедитесь, что эта опция включена. Ниже вы увидите URL. Скопируйте этот URL, так как он понадобится вам на следующем этапе.

Настройки автоматического развертывания

Войдите в свою учетную запись GitHub в новой вкладке браузера. Нажмите на ваш репозиторий, а затем нажмите на Настройки. Нажмите на ссылку Webhooks and Services (Вебхуки и сервисы).

Вебхуки и службы GitHub

Нажмите на кнопку Add Webhook.

Вставьте URL, который вы скопировали со страницы настроек сервера Deploy, в поле Payload URL. Выберите application/x-www-form-urlencoded в качестве типа содержимого и нажмите Добавить веб-крючок.

Добавление вебхука

Вот и все, теперь ваш репозиторий GitHub будет уведомлять Deploy о новых изменениях в вашем репозитории. Затем Deploy автоматически развернет эти изменения на вашем сайте.

Тестирование автоматического развертывания

Для проверки автоматического развертывания просто внесите некоторые изменения в репозиторий тем WordPress на вашем компьютере.

Откройте приложение GitHub для рабочего стола и зафиксируйте изменения.

Тестирование автоматического развертывания путем добавления коммитов на GitHub

Не забудьте нажать на кнопку синхронизации.

Теперь зайдите в свой проект на приборной панели Deploy. Нажмите на развертывания и вы найдете там список ваших автоматических развертываний.

развертывания

Вот и все, мы надеемся, что эта статья помогла вам узнать, как автоматически развернуть изменения темы WordPress с помощью GitHub и Deploy. Вы также можете посмотреть наше руководство о том, как создать среду постановки для сайта WordPress.

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий