Git do tworzenia stron internetowych: poznaj typowy przepływ pracy w projekcie

Tworzenie stron internetowych jest nierozerwalnie związane ze współpracą. Przez większość czasu będziesz pracować z innymi programistami, a nawet jeśli nie, Git może ci pomóc na wiele innych sposobów.

Git to oprogramowanie, które kontroluje wersję tworzonych przez nas aplikacji. Używają go solo programiści, duże firmy, a nawet Linux, największy projekt open source na świecie.

Jako programista stron internetowych niezwykle ważne jest, aby wiedzieć, jak prawidłowo używać Git do tworzenia stron internetowych. Nie mówimy tylko o „dodaniu git”, „zatwierdzeniu git” i „wypychaniu git”. Powinieneś znać cały przepływ pracy przy tworzeniu projektu internetowego za pomocą Git.

Nie jesteś jeszcze przekonany? Zaczynajmy!

Dlaczego warto korzystać z Gita?

To tylko niektóre z powodów, dla których warto zacząć korzystać z Git:

• Organizacja: zamiast zarządzać projektem w folderach takich jak v1, v2, v3 itp., masz jeden projekt ze specjalną bazą danych, która przechowuje wszystkie wersje plików
• Współpraca: Git pozwala Tobie i innym osobom jednocześnie pracować nad tym samym projektem bez tworzenia konfliktów.
• Open-source: Git jest oprogramowaniem typu open source, ale jest to również narzędzie, którego używamy do współpracy i tworzenia wspaniałego oprogramowania typu open source. Każdy może wysyłać żądania ściągnięcia do projektów typu open source na platformach takich jak GitHub lub Bitbucket.
• Elastyczność platformy: obecnie masz do wyboru wiele różnych usług hostingowych Git, takich jak Gitlab, GitHub, Bitbucket i SourceForge. Możesz nawet użyć rozwiązania z własnym hostingiem do wszystkich swoich projektów.
• Łatwe kopie zapasowe: z łatwością usuwaj błędy i nigdy nie trać bazy kodu projektu.

Wspomnieliśmy o terminie GitHub raz lub dwa razy, więc jaka jest różnica między Git a GitHub?

To może cię zmylić, jeśli jesteś zupełnie nowy w Git. Mówiąc prościej, Git i GitHub to powiązane, ale różne narzędzia.

Git to system kontroli wersji (VCS), którego używamy do kontrolowania zmian w naszych plikach, podczas gdy GitHub to usługa, której używamy do przechowywania naszych plików projektu i ich historii Git online (znajduje się w folderze .git/ Twojego projektu) .

Git jest instalowany lokalnie, na twoim komputerze, a bez usług hostingowych, takich jak GitHub czy GitLab, bardzo trudno byłoby współpracować z innymi programistami.

GitHub doładowuje Git, dodając inne funkcje usprawniające współpracę, takie jak klonowanie, rozwidlenie i scalanie. Razem te dwa narzędzia łączą się, aby zapewnić stosunkowo przyjazny ekosystem do opracowywania, zarządzania i pokazywania swojego projektu innym osobom.

Podstawowy Git dla przepływu pracy przy tworzeniu stron internetowych

W następnych sekcjach dowiesz się więcej o przepływie pracy Git do tworzenia stron internetowych poprzez praktyczne ćwiczenia.

Wymagania instalacyjne

Jeśli jeszcze nie zainstalowałeś Git, to jest idealny moment. Jest łatwy w instalacji i dostępny w większości systemów operacyjnych.

Pobierz go z oficjalnej strony pobierania lub zainstaluj za pomocą menedżera pakietów, jeśli używasz systemu Linux lub macOS:

Aby sprawdzić, czy wszystko poszło dobrze podczas instalacji, uruchom terminal w systemie Linux lub macOS, wyszukując „Terminal” w menu aplikacji lub otwierając Git bash w systemie Windows (który jest domyślnie instalowany z Git).

Następnie wpisz:

 git --version

Jeśli w odpowiedzi otrzymasz wersję Git, możesz już iść.

Będziemy również potrzebować konta GitHub, więc zarejestruj się lub zaloguj do GitHub:

Po zainstalowaniu Git i zalogowaniu się na swoje konto GitHub, możesz przejść do następnej sekcji.

Podstawowy przepływ pracy Git dla projektów grupowych

Jak wspomniano wcześniej, przez większość czasu nie będziesz rozwijał projektów solowych. Współpraca to kluczowa umiejętność, a Git i GitHub pomagają nam uczynić to prostym, ale skutecznym procesem.

Typowy przepływ pracy projektu Git wygląda tak:

1. Uzyskaj lokalną kopię projektu, klonując repozytorium lub repozytorium. Jeśli współpracujesz, najpierw powinieneś rozwidleć repozytorium.
2. Utwórz oddział z reprezentatywną nazwą funkcji, nad którą będziesz pracować.
3. Edytuj projekt.
4. Zatwierdź zmiany na swoim komputerze lokalnym.
5. Prześlij zmiany do zdalnego repozytorium.
6. Utwórz żądanie ściągnięcia do pierwotnego repozytorium.
7. Połącz i rozwiąż konflikty w głównej gałęzi oryginalnego repozytorium.

Instruktaż

Teraz czas pobrudzić sobie ręce!

W tym przewodniku utworzysz prostą witrynę HTML. Ze względów praktycznych rozwidlisz projekt podstawowy z repozytorium witryny HTML na swoje konto GitHub. Można to zrobić dla wszystkich dostępnych publicznie repozytoriów.

Aby rozwidlić witrynę HTML, przejdź do tego repozytorium GitHub i kliknij przycisk rozwidlenia znajdujący się w prawym górnym rogu strony:

Teraz masz widelec oryginalnego repozytorium, który jest dostępny tylko na Twoim koncie GitHub. To dokładnie to samo repozytorium — dopóki nie zaczniesz zatwierdzać zmian.

Jak widać, rozwidlenie publicznego repozytorium zajmuje tylko kilka sekund. Jest to świetne w przypadku projektów typu open source, ale pamiętaj, że jeśli Twoja organizacja ma prywatne repozytorium, przed próbą rozwidlenia musisz zostać uwzględniony jako współtwórca.

Czas przenieść widelec na lokalny komputer. Aby to zrobić, musisz go sklonować za pomocą polecenia git clone , które pobiera repozytorium Git ze zdalnego serwera:

 git clone remote_url

Musisz zastąpić remote_url adresem URL swojego forka. Aby uzyskać dokładny adres URL repozytorium GitHub, przejdź do jego strony i kliknij Kod . Następnie wybierz SSH i skopiuj link, który Ci daje:

Polecenie, które uruchomisz, aby sklonować rozwidlone repozytorium, to:

 git clone [email protected]:yourusername/HTML-site.git

Kiedy sklonujesz repozytorium, otrzymasz folder z jego nazwą. Wewnątrz tego folderu znajduje się kod źródłowy projektu (w tym przypadku witryna HTML) i repozytorium Git, które znajduje się w folderze o nazwie .git .

Możesz zobaczyć listę plików w nowym katalogu, otwierając nowy folder w graficznym menedżerze plików lub wyświetlając je bezpośrednio z terminala za pomocą poleceń ls lub dir :

 # Linux/macOS ls HTML-site/ # Windows dir HTML-site\ .git images .gitignore index.html LICENSE README.md styles.css

Ta strona HTML jest bardzo prosta. Wykorzystuje Bootstrap do celów praktycznych i kilka zdjęć z Unsplash, z którego możesz pobrać darmowe obrazy dla swojej witryny.

Jeśli otworzysz plik index.html w przeglądarce, zobaczysz prostą stronę z kilkoma obrazami:

Czas pobawić się tym projektem. Czuje się bardzo pusty i być może nagłówek z nazwą witryny może poprawić wrażenia użytkownika.

Aby to zrobić, wejdź do katalogu HTML-site i utwórz gałąź o nazwie header . W tej nowej gałęzi możemy edytować wszystkie pliki i zaimplementować tyle kodu, ile chcemy, ponieważ nie wpłynie to na główną (oryginalną) gałąź.

Uruchom następujące polecenie:

Zapisz się do newslettera

Chcesz wiedzieć, jak zwiększyliśmy ruch o ponad 1000%?

Dołącz do ponad 20 000 innych osób, które otrzymują nasz cotygodniowy biuletyn z poufnymi wskazówkami dotyczącymi WordPressa!

Zapisz się teraz

 git checkout -b header

Spowoduje to utworzenie gałęzi o nazwie „header” i przejście do niej zaraz po tym. Jest to odpowiednik:

 git branch header git checkout header

Aby potwierdzić, że wszystko poszło dobrze, uruchom:

 git status # On branch header # nothing to commit, working tree clean

Zobaczysz, że zostałeś przeniesiony z gałęzi „głównej” do gałęzi „nagłówkowej”, ale drzewo robocze jest nadal czyste, ponieważ nie edytowaliśmy żadnych plików.

W swoim ulubionym edytorze kodu otwórz plik index.html w swoim rozgałęzionym projekcie. Ten plik zawiera linki do Bootstrap 5, dzięki czemu możemy skorzystać z gotowych do użycia komponentów frameworka.

Dodaj następujący kod do pliku index.html wewnątrz tagu <body> i powyżej kontenera obrazu:

 <header> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">HTML site</span> </div> </nav> </header>

O wiele lepiej wygląda! Zapraszam do wprowadzania innych gałęzi i zmian, które sobie życzysz.

Po zakończeniu edycji projektu nadszedł czas, aby zatwierdzić wszystkie zmiany w lokalnym repozytorium. W katalogu projektu wpisz do swojego terminala:

 git add --all git commit -m "Added simple header in index.html file"

Kiedy po raz pierwszy zaczynasz projekt, często pojawiają się opisowe komunikaty o zatwierdzeniu, ale wraz z upływem czasu i przesunięciem uwagi jakość komunikatów zwykle spada. Upewnij się, że nadążasz za dobrą praktyką nazewnictwa.

Teraz, gdy wykonałeś zatwierdzenie w lokalnym repozytorium (które nadal jest dostępne tylko na twoim komputerze), nadszedł czas, aby wypchnąć go do zdalnego repozytorium.

Jeśli spróbujesz wypchnąć zatwierdzenie w normalny sposób, nie zadziała, ponieważ aktualnie pracujesz nad gałęzią header . Musisz ustawić gałąź upstream dla header :

 git push --set-upstream origin header

Od 13 sierpnia 2021 r. GitHub wymaga korzystania z uwierzytelniania SSH, więc upewnij się, że masz poprawnie skonfigurowane klucze.

Po tym powinieneś być w stanie zobaczyć nową gałąź o nazwie header w twoim repozytorium rozwidlonym (np. https://github.com/yourusername/HTML-site/branches ):

Aby utworzyć pull request do oryginalnego repozytorium, kliknij Porównaj , na dole w sekcji Aktywne gałęzie .

To poprowadzi Cię do żądania ściągnięcia, w którym musisz wybrać gałąź (oryginalną lub widelec), z którą chcesz się połączyć. Domyślnie pokazuje opcję połączenia z bazowym repozytorium:

Po kliknięciu opcji żądania ściągnięcia musisz napisać krótki opis dokonanych zmian, tak jak w przypadku wcześniejszych zatwierdzeń. Jeszcze raz spróbuj być zwięzły, ale opisowy:

Kliknij przycisk Utwórz żądanie ściągnięcia i poczekaj, aż właściciel podstawowego repozytorium zaakceptuje lub przekaże Ci opinię na temat zmian.

Gratulacje — właśnie ukończyłeś wszystkie etapy wspólnego przepływu pracy Git do tworzenia stron internetowych!

To był naprawdę podstawowy przykład, ale logika ta rozciąga się na projekty każdej wielkości. Upewnij się, że ściśle wdrażasz ten przepływ pracy również w większych projektach współpracy.

Jak korzystać z Gita w Kinsta

Jeśli jesteś użytkownikiem Kinsta, masz już dwa sposoby korzystania z Git i GitHub z poziomu swojego portalu MyKinsta.

Zacznijmy od pierwszej opcji. Możesz łatwo połączyć się przez SSH i pobrać repozytorium z dowolnej usługi hostingowej Git, takiej jak GitHub, Gitlab lub Bitbucket.

Aby to zrobić, przejdź do zakładki Witryny , wybierz witrynę, przejdź do sekcji szczegółów SSH i skopiuj polecenie terminala SSH.

Zaloguj się przez SSH do swojej witryny, wklejając powyższe polecenie w swoim terminalu i wchodząc do publicznego folderu swojej witryny (znajdującego się pod /www/yoursitename/ ). Tutaj znajdują się wszystkie Twoje pliki WordPress, dzięki czemu możesz rozwinąć repozytorium Git z niestandardowym motywem lub wtyczką, nad którą pracujesz.

Oto jak możesz ściągnąć repozytorium Git za pomocą prostego polecenia:

 ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

Teraz, wprowadzając nową funkcję wdrażania GitHub w Kinsta, możesz wdrożyć pełną witrynę WordPress z repozytorium GitHub.

Twoje repozytorium GitHub powinno zawierać kopię podstawowych plików WordPress i oczywiście zawartość Twojej witryny w folderze wp-content .

Rzućmy okiem na tę opcję.

Przejdź do jednej z witryn swojej firmy i stwórz środowisko pomostowe. To nie zajmie więcej niż kilka minut.

Po przejściu do witryny testowej przejdź do zakładki Wdrożenie i kliknij przycisk Rozpocznij konfigurację . Zobaczysz moduł GitHub, który pozwoli Kinsta połączyć się z Twoim kontem GitHub.

Teraz wybierz repozytorium, z którego zamierzasz pobrać swoją witrynę.

Na koniec wdróż swoją witrynę i odwiedź ją za pośrednictwem adresu URL witryny testowej.

Ta funkcja jest nadal w wersji beta , ale wkrótce każdy użytkownik Kinsta będzie miał do niej dostęp.

Używanie Git i Kinsta może być potężną kombinacją, jeśli wiesz, jak ich dobrze używać. Chociaż nasz samouczek przedstawia tylko prosty przykład, możesz dowiedzieć się znacznie więcej z naszego artykułu w bazie wiedzy Git.

Streszczenie

W dzisiejszych czasach Git jest niezbędnym narzędziem do tworzenia stron internetowych, ponieważ przez większość czasu będziesz współpracować z innymi, aby stworzyć najlepszy projekt, jaki możesz.

W tym artykule omówiliśmy kilka ważnych powodów, dla których warto używać usługi Git w projektach, a także pokazaliśmy podstawowy przepływ pracy związany ze współpracą w repozytorium Git.

Git jest tak potężnym narzędziem, że możesz rozszerzyć jego użycie nawet na hosting WordPress, więc nauczenie się i wdrożenie go może przynieść tylko korzyści w ramach twojego arsenału umiejętności tworzenia stron internetowych.

Czy masz jakieś inne sugestie dotyczące ulepszenia tego podstawowego przepływu pracy Git do tworzenia stron internetowych? Daj nam znać w sekcji komentarzy!