Jak automatycznie wdrożyć zmiany motywu WordPress za pomocą GitHub i Deploy

Większość profesjonalnych twórców stron internetowych korzysta z systemu kontroli wersji, takiego jak GitHub lub Bitbucket, i automatycznie wdraża swoje zmiany w witrynach przejściowych lub działających.

Wypróbowaliśmy wiele narzędzi do automatycznego wdrażania zmian. Opierając się na tym rzeczywistym doświadczeniu, stwierdziliśmy, że można użyć DeployHQ do wypchnięcia rozwoju motywu na swojej stronie. DeployHQ działa jako pośrednik między repozytorium Git a serwerem.

W tym artykule pokażemy, jak automatycznie wdrożyć zmiany w motywie WordPress za pomocą GitHub i Deploy.

Dlaczego warto używać systemu kontroli wersji do tworzenia motywów WordPress?

System kontroli wersji umożliwia rejestrowanie zmian w pliku lub zestawie plików w czasie, dzięki czemu można później przywołać określone wersje. Innymi słowy, za każdym razem, gdy zmieniamy szablon motywu WordPress, obraz lub plik CSS, system kontroli wersji śledzi te zmiany.

Powiedzmy na przykład, że zdecydujesz się na wprowadzenie partii zmian. Jeśli zmiany te spowodują problem, możesz przywrócić (lub wycofać) istniejącą „wersję” naszego motywu WordPress.

Git jest popularnym systemem kontroli wersji i umożliwia wielu użytkownikom pracę nad tą samą bazą kodu, taką jak motyw WordPress. Jeśli dwóch programistów edytuje ten sam plik, Git ma wbudowane mechanizmy kontrolne, aby poradzić sobie z tymi problemami (znanymi jako konflikty scalania).

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących na temat korzystania z Git z WordPress.

Dlaczego warto korzystać z systemu wdrażania?

System wdrażania, który integruje się z usługami takimi jak GitHub, umożliwia automatyczne lub ręczne przesyłanie zmian wprowadzonych w twoim motywie WordPress.

Można to postrzegać jako jednokierunkowy system synchronizacji. Na przykład, jeśli usuniesz plik z twojego motywu WordPress, będziesz musiał usunąć go również przez FTP. W przypadku systemu wdrażania jest to wykonywane automatycznie, gdy zatwierdzasz zmiany w kodzie na GitHub.

W tym artykule będziemy pracować z systemem wdrażania o nazwie DeployHQ lub po prostu Deploy. Deploy współpracuje z innymi dostawcami repozytoriów Git, takimi jak Bitbucket, ale w tym poradniku pozostaniemy przy GitHub.

Konfiguracja repozytorium GitHub dla twojego motywu WordPress

Najpierw należy założyć konto w serwisie GitHub, a następnie użyć klienta GitHub dla systemu Windows lub Mac, aby zapisać zmiany w motywie WordPress.

Aby rozpocząć, możesz przejść na witrynę internetową GitHub i wpisz swój adres e-mail, aby utworzyć nowe konto.

Następnie należy wpisz nazwę użytkownika i hasło.

GitHub poprosi również o wybranie preferencji e-mail.

Następnie możesz przewinąć w dół i zweryfikować twoje konto, rozwiązując łamigłówkę.

To tak jak reCAPTCHA na twojej witrynie WordPress.

Gdy twoje konto zostanie zweryfikowane, zobaczysz kokpit GitHub.

Z tego miejsca można kliknąć ikonkę „+” u góry i wybrać opcję „Nowe repozytorium”.

Następnie możesz zacząć od ustawienia nazwy repozytorium, takiej jak nazwa folderu motywu WordPress.

Następnie należy wybrać, czy ma to być repozytorium publiczne czy prywatne. Repozytoria publiczne pozwalają każdemu zobaczyć kod, ale nie mogą wprowadzać w nim zmian. Repozytoria prywatne są dostępne tylko dla ciebie.

Na koniec możesz zaznaczyć pole wyboru, jeśli chcesz dodać plik README.

Gdy to zrobisz, po prostu kliknij przycisk „Utwórz repozytorium”.

Twoje repozytorium GitHub będzie teraz gotowe do użycia.

Zainstaluj GitHub dla Windows lub Mac

Następnie należy umieścić kod naszego motywu WordPress w naszym repozytorium. Prostym sposobem na zrobienie tego jest skorzystanie z klienta GitHub, który instaluje się na twoim komputerze.

Wystarczy przejść na witrynę internetową GitHub Desktop i pobrać klienta Desktop dostępnego dla systemu Windows lub Mac.

Po zakończeniu pobierania uruchom klienta GitHub.

Następnie musisz zalogować się przy użyciu twojego konta GitHub. Możesz kliknąć przycisk „Zaloguj się na GitHub.com”.

Spowoduje to uruchomienie GitHub w twojej przeglądarce internetowej.

Wystarczy kliknąć przycisk „Autoryzuj pulpit”, aby zezwolić GitHub Desktop na dostęp do twojego konta.

Następnie możesz otworzyć klienta GitHub Desktop.

Następnie należy skonfigurować Git. Wystarczy wybrać opcję „Użyj nazwy mojego konta GitHub i adresu e-mail” i kliknąć przycisk „Zakończ”.

Następnie dodajmy utworzone wcześniej repozytorium GitHub.

Aby to zrobić, kliknij opcję „Sklonuj repozytorium z Internetu”.

Zobaczysz listę twoich repozytoriów GitHub, w tym to, które utworzyłeś wcześniej.

Po prostu wybierz repozytorium i wybierz miejsce, w którym chcesz je przechowywać na twoim komputerze w polu „Ścieżka regionalna”. Gdy to zrobisz, możesz kliknąć przycisk „Klonuj”.

Teraz sklonowałeś (skopiowałeś) twoje repozytorium hostowane na GitHub na nasz komputer.

Następnie należy dodać kod naszego motywu WordPress do katalogu repozytorium, a następnie zatwierdzić i zsynchronizować ten kod z serwisem GitHub.

Możesz zacząć od znalezienia na twoim komputerze katalogu wybranego w powyższym kroku. W katalogu powinien znajdować się plik README.md. W zależności od ustawień twojego komputera, możesz również zobaczyć ukryty katalog .git.

Po wprowadzeniu zmian w kodzie twojego motywu WordPress, po prostu skopiuj i wklej je do tego katalogu.

Następnie możesz otworzyć aplikację GitHub dla komputerów Mac lub Windows i zobaczyć, jak dodane pliki pojawiają się w oknie:

Zobaczysz zmiany podświetlone na zielono. Są to zmiany, które zostały zapisane w lokalnym repozytorium, ale nie zostały jeszcze zatwierdzone.

Następnie należy zatwierdzić (przesłać) te pliki do GitHub. Aby to zrobić, wpisz tekst w polu Podsumowanie, aby wyjaśnić wprowadzone zmiany i kliknij przycisk „Commit to master”.

Spowoduje to zatwierdzenie zmian wprowadzonych w repozytorium.

Aby przesłać te zmiany do GitHub, możesz kliknąć przycisk „Push origin”.

Aby sprawdzić, czy Twój commit został przesłany do GitHub, przejdź na Twoje repozytorium w witrynie internetowej GitHub. Jeśli wszystko działa, zobaczysz zmiany w twoim kodzie.

Konfiguracja wdrożenia

Ostatnim krokiem jest upewnienie się, że wszelkie zmiany w repozytorium GitHub są przesyłane do witryny WordPress.

DeployHQ lub Deploy to usługa internetowa, która monitoruje zmiany w Twoim repozytorium GitHub i automatycznie lub ręcznie przesyła tylko te zmiany do Twojej witryny internetowej WordPress.

Wyobraź to sobie jako połączenie między twoim kodem a serwerem WWW.

Najpierw należy przejść na witrynę internetową Deploy i założyć nowe konto. Deploy jest usługą płatną, ale oferuje darmowe konto dla jednego projektu i 5 wdrożeń dziennie.

Po zakończeniu rejestracji możesz logować się do twojego kokpitu Deploy.

W tym miejscu możesz kliknąć przycisk „Utwórz projekt”, aby rozpocząć.

Następnie musisz podać nazwę twojego projektu.

Następnie możesz wybrać GitHub jako twoją platformę hostingu kodu.

Jeśli przewiniesz w dół, znajdziesz więcej opcji, takich jak wybór strefy dla projektu i opcje zaawansowane.

Po zakończeniu kliknij przycisk „Utwórz projekt”, aby kontynuować.

Wdrożenie przekieruje Cię teraz do GitHub.

Jeśli nie jesteś jeszcze zalogowany, zostaniesz poproszony o zalogowanie się. Następnie zostaniesz poproszony o zezwolenie Deploy na dostęp do twojego konta GitHub.

Wystarczy kliknąć przycisk „Autoryzuj krystal”, aby kontynuować.

Deploy pobierze listę twoich repozytoriów z GitHub i poprosi o wybranie repozytorium dla tego projektu.

Wystarczy kliknąć na twoje repozytorium motywów WordPress, a Deploy zaimportuje je dla ciebie.

W następnym kroku Deploy poprosi o podanie informacji o serwerze. W tym miejscu poinformujesz Deploy, jak przesłać pliki na twój serwer WordPress.

Możesz zacząć od wprowadzenia nazwy i wybrania „FTP” jako opcji protokołu.

Następnie przewiń w dół i wpisz swoje dane uwierzytelniające FTP.

• Nazwa hosta: Host SFTP/FTP twojej witryny internetowej.
• Port: port SFTP/FTP twojego hosta witryny internetowej (zazwyczaj SFTP = 22, FTP = 21).
• Nazwa użytkownika i hasło: Nazwa użytkownika i hasło FTP
• Ścieżka wdrożenia: Ścieżka, do której należy przejść przed przesłaniem plików twojego motywu WordPress. Na przykład public_html/example.com/wp-content/themes/MyTheme, gdzie MyTheme to motyw WordPress, który został zatwierdzony w serwisie GitHub.

Po wpiszeniu tych danych kliknij przycisk „Zapisz 'Utwórz serwer'”.

Deploy przetestuje teraz twoje połączenie z serwerem i jeśli wszystko działa poprawnie, wyświetli komunikat o powodzeniu.

Możesz teraz kliknąć przycisk „Deploy”, aby przesłać twoje pliki GitHub do witryny internetowej.

Zobaczysz teraz postęp wdrażania.

Po zakończeniu wdrażania zostanie wyświetlony komunikat o powodzeniu.

Pomyślnie wdrożyłeś zmiany z GitHub do twojej witryny internetowej za pomocą Deploy. Teraz, po wprowadzeniu zmian w twoim motywie WordPress na komputerze, musisz zatwierdzić je w serwisie GitHub. Następnie należy przejść na witrynę internetową Deploy, aby ręcznie rozpocząć wdrażanie.

Zobaczmy, jak skonfigurować automatyczne wdrażanie, aby wszelkie zmiany wprowadzone w GitHub były automatycznie wdrażane w twojej witrynie internetowej.

Konfigurowanie automatycznego wdrażania

Najpierw musisz przejść na twój kokpit Deploy i przejść na stronę „Projekty”. Następnie wystarczy kliknąć nazwę twojego projektu.

Następnie możesz przejść do karty „Automatyczne wdrożenia” z menu po lewej stronie.

W tym miejscu należy włączyć opcję przy twoim serwerze dla automatycznych wdrożeń.

Następnie należy skopiować adres URL Webhook i dodać go do twojego konta GitHub.

Wystarczy zalogować się na swoje konto GitHub w nowej karcie przeglądarki. Następnie kliknij swoje repozytorium i przejdź do karty „Ustawienia”. Z tego miejsca możesz przejść do sekcji Webhooks z menu po lewej stronie i kliknąć przycisk „Dodaj webhook”.

Teraz wklej adres URL webhooka skopiowany ze strony ustawień serwera Deploy w polu Payload URL.

Następnie wybierz „application/x-www-form-urlencoded” jako „Content type” z listy rozwijanej:

Następnie możesz przewinąć w dół i wybrać, które zdarzenia mają wyzwalać webhook. Można użyć ustawienia domyślnego.

Gdy to zrobisz, po prostu kliknij przycisk „Dodaj webhook”.

To wszystko. Twoje repozytorium GitHub będzie teraz powiadamiać Deploy o nowych zmianach w repozytorium. Deploy automatycznie wdroży te zmiany w twojej witrynie internetowej.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak automatycznie wdrożyć zmiany motywu WordPress za pomocą GitHub i Deploy. Możesz również zapoznać się z naszym przewodnikiem na temat aktualizacji jQuery do najnowszej wersji w WordPress oraz jak sprawdzić i zaktualizować najnowszą wersję WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.