Git pentru dezvoltare web: cunoașteți fluxul de lucru tipic al unui proiect

Publicat: 2022-01-11

Dezvoltarea web este intrinsec legată de colaborare. De cele mai multe ori veți lucra cu alți dezvoltatori și, chiar dacă nu o faceți, Git vă poate ajuta în multe alte moduri.

Git este software-ul care controlează versiunea aplicațiilor pe care le facem. Este folosit de dezvoltatori individuali, companii mari și chiar de Linux, cel mai mare proiect open source din lume.

În calitate de dezvoltator web, este extrem de important să știi cum să folosești Git pentru dezvoltarea web în mod corespunzător. Nu vorbim doar despre „git add”, „git commit” și „git push”. Ar trebui să cunoașteți întregul flux de lucru al creării unui proiect web cu Git.

Inca nu esti convins? Să începem!

De ce să folosiți Git?

Acestea sunt doar câteva dintre motivele pentru a începe să utilizați Git:

Organizare: în loc să vă gestionați proiectul în foldere precum v1, v2, v3 etc., aveți un proiect cu o bază de date specială care stochează toate versiunile fișierelor
Colaborare: Git vă permite dvs. și altor persoane să lucrați la același proiect în același timp, fără a crea conflicte.
Open-source: Git este open-source, dar este și instrumentul pe care îl folosim pentru a colabora și a crea un software open-source grozav. Oricine poate face solicitări de extragere către proiecte open-source pe platforme precum GitHub sau Bitbucket.
Flexibilitatea platformei: în prezent, aveți la dispoziție multe servicii de găzduire Git diferite, cum ar fi Gitlab, GitHub, Bitbucket și SourceForge. Puteți folosi chiar și o soluție auto-găzduită pentru toate proiectele dvs.
Backup-uri ușoare: anulați greșelile cu ușurință și nu pierdeți niciodată baza de cod a proiectului.

Este timpul să învățați mai mult decât doar „git add”, „git commit” și „git push” Scufundați-vă în tot ce trebuie să știți despre un flux de lucru tipic Git în acest ghid .

Am menționat termenul GitHub o dată sau de două ori acum, deci care este diferența dintre Git și GitHub?

Acest lucru vă poate deruta dacă sunteți complet nou în Git. Pentru a spune în cuvinte simple, Git și GitHub sunt instrumente legate, dar diferite.

Git este sistemul de control al versiunilor (VCS) pe care îl folosim pentru a păstra controlul asupra modificărilor fișierelor noastre, în timp ce GitHub este un serviciu pe care îl folosim pentru a stoca fișierele de proiect și istoricul lor Git online (situat în folderul .git/ al proiectului dvs.) .

Git este instalat local, pe mașina dvs. și fără servicii de găzduire precum GitHub sau GitLab, ar fi foarte dificil să colaborați cu alți dezvoltatori.

GitHub supraalimentează Git prin adăugarea altor funcții care îmbunătățesc colaborarea, cum ar fi clonarea, bifurcarea și îmbinarea. Împreună, aceste două instrumente se combină pentru a vă aduce un ecosistem relativ prietenos pentru a dezvolta, gestiona și arăta proiectul dvs. altor oameni.

Flux de lucru de bază Git pentru dezvoltare web

În secțiunile următoare, veți afla mai multe despre fluxul de lucru Git pentru dezvoltarea web prin practică practică.

Cerințe de instalare

Dacă nu ați instalat încă Git, acesta este momentul perfect. Este ușor de instalat și disponibil pe majoritatea sistemelor de operare.

Descărcați-l de pe pagina oficială de descărcări sau instalați-l cu un manager de pachete dacă utilizați Linux sau macOS:

Pagina de descărcări Git, care arată opțiuni pentru macOS, Windows și Linux/Unix. — Pagina de descărcări Git.

Pentru a testa că totul a mers bine cu instalarea, porniți un terminal pe Linux sau macOS căutând „Terminal” în meniul aplicațiilor sau deschizând Git bash pe Windows (care vine instalat cu Git în mod implicit).

Apoi tastați:

 git --version

Versiunea Git 2.33 afișată în terminalul Linux. — Versiunea Git.

Dacă primiți o versiune Git ca răspuns, sunteți gata.

De asemenea, vom avea nevoie de un cont GitHub, așa că asigurați-vă că vă înregistrați sau vă conectați la GitHub:

Pagina de înscriere GitHub cu cuvintele „Creați-vă contul” în partea de sus. — Pagina de înscriere GitHub.

După ce ați instalat Git și v-ați conectat la contul GitHub, puteți trece la următoarea secțiune.

Flux de lucru Git de bază pentru proiecte de colaborare

După cum am menționat mai devreme, de cele mai multe ori nu vei dezvolta proiecte solo. Colaborarea este o abilitate cheie, iar Git și GitHub ne ajută să facem un proces simplu, dar eficient.

Fluxul de lucru tipic al unui proiect Git arată astfel:

Obțineți o copie locală a proiectului prin clonarea unui depozit sau a unui depozit. Dacă colaborați, mai întâi ar trebui să forkați repo.
Creați o ramură cu un nume reprezentativ al funcției la care veți lucra.
Editați proiectul.
Trimiteți modificările pe mașina dvs. locală.
Împingeți modificările în depozitul de la distanță.
Creați o cerere de extragere către depozitul original.
Îmbinați și rezolvați conflictele din ramura principală a depozitului original.

Tutorial

Acum este timpul să ne murdărim mâinile!

În acest ghid, veți crea un site web HTML simplu. În scopuri practice, vei transfera proiectul de bază din depozitul site-ului HTML în contul tău GitHub. Acest lucru se poate face pentru toate depozitele publice disponibile.

Pentru a bifurca site-ul HTML, accesați acest depozit GitHub și faceți clic pe butonul Fork situat în partea dreaptă sus a paginii:

Pagina GitHub concentrată pe butonul „Fork”. — Furcă GitHub.

Acum aveți un furk al repo-ului original, care este disponibil numai pe contul dvs. GitHub. Este exact același repo - până când începeți să efectuați modificări.

După cum puteți vedea, bifurcarea unui repo public durează doar câteva secunde. Acest lucru este excelent pentru proiecte cu sursă deschisă, dar rețineți că, dacă organizația dvs. are un depozit privat, va trebui să fiți inclus ca colaborator înainte de a încerca să îl transferați.

Este timpul să vă aduceți furca la mașina dvs. locală. Pentru a face acest lucru, trebuie să-l clonați cu comanda git clone , care preia depozitul Git de la serverul de la distanță:

 git clone remote_url

Trebuie să înlocuiți remote_url cu adresa URL a furcii. Pentru a obține adresa URL exactă a unui depozit GitHub, accesați pagina sa și faceți clic pe Cod . Apoi alegeți SSH și copiați linkul pe care vi-l oferă:

Adresa URL repo SSH sub butonul „Cod” de pe GitHub. — URL SSH.

Comanda pe care ați rula pentru a clona depozitul bifurcat este:

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

Când clonați un depozit, obțineți un folder cu numele acestuia. În interiorul acelui folder se află codul sursă al proiectului (în acest caz, site-ul HTML) și depozitul Git, care se află în interiorul unui folder numit .git .

Puteți vedea lista fișierelor din noul director deschizând noul folder într-un manager de fișiere grafic sau listând-le direct din terminal cu comenzile ls sau dir :

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

Acest site HTML este foarte simplu. Folosește Bootstrap în scopuri practice și câteva imagini de la Unsplash, de unde poți descărca imagini gratuite pentru site-ul tău.

Dacă deschideți fișierul index.html în browser, veți vedea o pagină simplă cu câteva imagini:

Pagina web simplă pe care o creăm, care arată imagini cu dispozitive tehnologice, inclusiv mai multe laptopuri și o cameră veche. — Pagina web simplă pe care o creăm.

Este timpul să ne jucăm cu acest proiect. Se simte foarte gol și poate un antet cu numele site-ului ar putea îmbunătăți experiența utilizatorului.

Pentru a face acest lucru, introduceți directorul site-ului HTML și creați o ramură numită header . În această nouă ramură, putem edita toate fișierele și putem implementa cât de mult cod vrem, deoarece nu va afecta ramura principală (originală).

Rulați următoarea comandă:

 git checkout -b header

Aceasta va crea o ramură numită „antet” și veți trece la ea imediat după aceasta. Este echivalent cu:

 git branch header git checkout header

Pentru a confirma că totul a mers bine, rulați:

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

Veți vedea că ați fost mutat de la ramura „principală” la ramura „antet”, dar arborele de lucru este încă curat, deoarece nu am editat niciun fișier.

În editorul de cod preferat, deschideți fișierul index.html din proiectul dvs. ramificat. Acest fișier include câteva link-uri către Bootstrap 5, astfel încât să putem profita de componentele gata de utilizare ale cadrului.

Adăugați următorul cod în fișierul index.html în interiorul etichetei <body> și deasupra containerului de imagine:

 <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>

Pagina noastră web cu un nou antet negru „site HTML” deasupra imaginilor. — Pagina noastră web cu un antet nou.

Mult mai arătos! Simțiți-vă liber să faceți alte ramuri și modificări pe care le doriți.

Odată ce ați terminat de editat proiectul, este timpul să efectuați toate modificările în depozitul dvs. local. În directorul proiectului, tastați următoarele în terminal:

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

Când porniți pentru prima dată un proiect, este obișnuit să aveți mesaje descriptive de commit, dar odată cu timpul și schimbarea focalizării, calitatea mesajelor tinde să scadă. Asigurați-vă că țineți pasul cu bunele practici de numire.

Acum ați făcut un commit în depozitul dvs. local (care este încă disponibil doar pe computer), este timpul să îl împingeți în depozitul de la distanță.

Dacă încercați să împingeți commit-ul ca de obicei, nu va funcționa deoarece în prezent lucrați la ramura header . Trebuie să setați ramura din amonte pentru header :

 git push --set-upstream origin header

Începând cu 13 august 2021, GitHub necesită utilizarea autentificării SSH, așa că asigurați-vă că aveți cheile configurate corect.

V-ați săturat de suport pentru găzduire WordPress de nivel 1 subpar, fără răspunsuri? Încercați echipa noastră de asistență de clasă mondială! Verificați planurile noastre

După aceasta, ar trebui să puteți vedea o nouă ramură numită header în depozitul dvs. bifurcat (de exemplu https://github.com/yourusername/HTML-site/branches ):

Pentru a crea o cerere de extragere către depozitul original, faceți clic pe Comparare , în secțiunea Ramuri active .

Aceasta vă va ghida către o cerere de extragere, în care va trebui să alegeți cu ce ramură (originalul sau furculița) doriți să fuzionați. În mod implicit, arată opțiunea de îmbinare cu depozitul de bază:

Crearea cererii de extragere pe GitHub cu titlul „Compararea modificărilor”. — Crearea cererilor de extragere pe GitHub.

Odată ce faceți clic pe opțiunea de solicitare de extragere, va trebui să scrieți o scurtă descriere a modificărilor făcute, la fel ca și în cazul comiterilor anterioare. Încă o dată, încearcă să fii concis, dar descriptiv:

Pagina „Deschideți o solicitare de extragere” de pe GitHub care arată un mesaj de extragere care explică ce, de ce și alte detalii ale cererii de extragere. — Scrierea unui mesaj de solicitare de tragere.

Faceți clic pe butonul Creați cerere de extragere și așteptați ca proprietarul depozitului de bază să accepte sau să vă ofere feedback cu privire la modificările dvs.

Felicitări — tocmai ați finalizat toți pașii unui flux de lucru Git comun pentru dezvoltarea web!

Acesta a fost un exemplu de bază, dar logica se extinde pe proiecte de toate dimensiunile. Asigurați-vă că implementați acest flux de lucru îndeaproape și în proiecte de colaborare mai mari.

Cum să utilizați Git la Kinsta

Dacă sunteți utilizator Kinsta, aveți deja două moduri de a utiliza Git și GitHub din portalul dvs. MyKinsta.

Să începem cu prima opțiune. Puteți intra cu ușurință SSH și puteți extrage un repo de la orice serviciu de găzduire Git, cum ar fi GitHub, Gitlab sau Bitbucket.

Pentru a face acest lucru, accesați fila Site -uri, selectați un site și accesați secțiunea detalii SSH și copiați comanda terminalului SSH.

Pagina de informații despre site-ul MyKinsta care arată secțiunea de detalii și comenzi SSH. — Secțiunea detalii SSH.

Conectați-vă prin SSH la site-ul dvs. inserând comanda de mai sus în terminalul dvs. și intrând în folderul public al site-ului dvs. (situat sub /www/yoursitename/ ). Aici se află toate fișierele dvs. WordPress, astfel încât să puteți derula în jos un depozit Git cu o temă personalizată sau un plugin la care ați lucrat.

Iată cum ați trage în jos un depozit Git într-o comandă simplă:

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

Acum, introducând noua caracteristică de implementare GitHub la Kinsta, puteți implementa un site WordPress complet dintr-un depozit GitHub.

Repo-ul tău GitHub ar trebui să includă o copie a fișierelor de bază WordPress și, desigur, conținutul site-ului tău în folderul wp-content .

Să aruncăm o privire rapidă asupra acestei opțiuni.

Accesați unul dintre site-urile companiei dvs. și creați un mediu de organizare. Acest lucru nu ar dura mai mult de câteva minute.

Opțiunea de mediu de pregătire a paginii site-ului Kinsta. — Mediu de scenă.

Odată ce vă aflați pe site-ul de pregătire, accesați fila Implementare și faceți clic pe butonul Începeți configurarea . Veți vedea un modal GitHub care va permite Kinsta să se conecteze cu contul dvs. GitHub.

Implementarea GitHub cu o săgeată care indică butonul „Începe configurarea”. — Fila de implementare GitHub.

Acum, selectați depozitul din care veți trage site-ul.

Conectați Kinsta la GitHub modal cu mai multe opțiuni, inclusiv un buton „Finish”. — Conectați Kinsta la GitHub.

În cele din urmă, implementați site-ul și vizitați-l prin adresa URL a site-ului dvs. de pregătire.

Această funcție este încă în versiune beta , dar în curând fiecare utilizator Kinsta va avea acces la ea.

Utilizarea Git și Kinsta poate fi o combinație puternică dacă știi să le folosești bine. În timp ce tutorialul nostru de aici prezintă doar un exemplu simplu, puteți afla mult mai multe din articolul nostru din baza de cunoștințe Git.

Îmbunătățiți-vă cunoștințele Git cu acest ghid pentru un flux de lucru tipic al proiectului Faceți clic pentru a Tweet

rezumat

În zilele noastre, Git este un instrument care trebuie învățat pentru dezvoltarea web, deoarece de cele mai multe ori veți colabora cu alții pentru a crea cel mai bun proiect posibil.

În acest articol, am discutat câteva motive importante pentru a utiliza Git în proiectele dvs. și v-am arătat fluxul de lucru de bază al colaborării într-un depozit Git.

Git este un instrument atât de puternic încât îi puteți extinde utilizarea chiar și la găzduirea WordPress, așa că vă poate ajuta doar să îl învățați și să îl implementați ca parte a arsenalul de abilități de dezvoltare web.

Aveți alte sugestii pentru îmbunătățirea acestui flux de lucru Git de bază pentru dezvoltarea web? Anunțați-ne în secțiunea de comentarii!