Webdevelopment is intrinsiek gerelateerd aan samenwerking. Meestal werk je met andere developers, maar zelfs als je dat niet doet, kan Git je op veel andere manieren helpen.

Git is de software die de versies beheert van de applicaties die we aan het maken zijn. Het wordt gebruikt door solodevelopers, grote bedrijven en zelfs Linux, het grootste open source-project ter wereld.

Als webdeveloper is het uiterst belangrijk om te weten hoe je Git op de juiste manier kunt gebruiken voor webdevelopment. We hebben het niet alleen over “git add”, “git commit” en “git push”. Je zou de hele workflow moeten kennen van het maken van een webproject met Git.

Nog niet overtuigd? Laten we beginnen!

Waarom Git gebruiken?

Dit zijn slechts enkele van de redenen om Git te gaan gebruiken:

  • Organisatie: in plaats van je project te beheren in mappen zoals v1, v2, v3, enz., heb je één project met een speciale database die alle versies van de bestanden opslaat
  • Samenwerking: Git laat jou en andere mensen tegelijkertijd aan hetzelfde project werken zonder conflicten te creëren.
  • Open source: Git is open source, maar het is ook de tool die we gebruiken om samen te werken en geweldige open source software te maken. Iedereen kan pull-verzoeken doen aan open sourceprojecten op platforms zoals GitHub of Bitbucket.
  • Platformflexibiliteit: tegenwoordig heb je veel verschillende Git hostingservices om uit te kiezen, zoals Gitlab, GitHub, Bitbucket en SourceForge. Je kunt zelfs voor al je projecten een self-hosted oplossing gebruiken.
  • Eenvoudige backups: maak gemakkelijk fouten ongedaan en verlies nooit je projectcodebase.
Het is tijd om meer te leren dan alleen 'git add', 'git commit' en 'git push' 👩‍💻 Bekijk alles wat je moet weten over een typische Git workflow in deze handleiding 👇Klik om te tweeten

We hebben de term GitHub nu een of twee keer genoemd, dus wat is het verschil tussen Git en GitHub?

Dit kan je in de war brengen als Git helemaal nieuw voor je is. Om het in eenvoudige bewoordingen te zeggen, Git en GitHub zijn verwante maar toch verschillende tools.

Git is het versiebeheersysteem (VCS) dat we gebruiken om de wijzigingen van onze bestanden onder controle te houden, terwijl GitHub een service is die we gebruiken om onze projectbestanden en hun Git geschiedenis online op te slaan (in de .git/ map van je project).

Git wordt lokaal op je computer geïnstalleerd en zonder hostingservices zoals GitHub of GitLab zou het erg moeilijk zijn om met andere developers samen te werken.

GitHub geeft Git een boost door andere features toe te voegen die de samenwerking verbeteren, zoals klonen, forking en samenvoegen. Samen zorgen deze twee tools voor een relatief vriendelijk ecosysteem om je project te ontwikkelen, te beheren en aan andere mensen te tonen.

Basis Git voor workflow voor webdevelopment

In de volgende secties leer je meer over Git workflow voor webdevelopment door hands-on te oefenen.

Installatievereisten

Als je Git nog niet hebt geïnstalleerd, is dit een perfect moment. Het is eenvoudig te installeren en beschikbaar op de meeste besturingssystemen.

Download het van de officiële downloadpagina of installeer het met een package manager als je Linux of macOS gebruikt:

 Git downloadpagina.
Git downloadpagina.

Om te testen of alles goed ging met de installatie, start je een terminal op Linux of macOS door te zoeken naar “Terminal” in je toepassingsmenu, of door Git bash te openen op Windows (die standaard met Git wordt geïnstalleerd).

Typ dan:

git --version
Git versie.
Git versie.

Als je een Git versie als antwoord krijgt, ben je er klaar voor.

We hebben ook een GitHub account nodig, dus zorg ervoor dat je je aanmeldt of inlogt op GitHub:

GitHub aanmeldingspagina.
GitHub aanmeldingspagina.

Nadat je Git hebt geïnstalleerd en bent ingelogd op je GitHub account, kun je doorgaan naar het volgende gedeelte.

Basics Git workflow voor samenwerkingsprojecten

Zoals eerder vermeld, ontwikkel je meestal niet binnen soloprojecten. Samenwerken is een belangrijke vaardigheid en Git en GitHub helpen ons om er een eenvoudig maar effectief proces van te maken.

De typische workflow van een Git project ziet er als volgt uit:

  1. Verkrijg een lokale kopie van het project door een repository of repo te klonen. Als je samenwerkt, moet je eerst de repo afsplitsen.
  2. Maak een branch met een logische naam van de feature waaraan je gaat werken.
  3. Bewerk het project.
  4. Voer de wijzigingen door op je lokale computer.
  5. Push de wijzigingen naar de externe repo.
  6. Maak een pull verzoek aan de oorspronkelijke repo.
  7. Voeg conflicten samen en los ze op in de hoofdbranch van de oorspronkelijke repo.

Tutorial

Nu is het tijd om onze handen vuil te maken!

In deze handleiding ga je een eenvoudige HTML website maken. Voor praktische doeleinden fork je het basisproject van de HTML siterepository naar je GitHub account. Dit kan voor alle openbaar beschikbare repositories.

Om de HTML site te forken, ga je naar deze GitHub repository en klik je op de Fork knop in de rechterbovenhoek van de pagina:

GitHub page focused on the "Fork" button.
GitHub fork.

Nu heb je een fork van de originele repo die alleen beschikbaar is op je GitHub account. Het is exact dezelfde repo – totdat je wijzigingen begint door te voeren.

Zoals je kunt zien, duurt het forken van een openbare repo slechts een paar seconden. Dit is geweldig voor open sourceprojecten, maar houd er rekening mee dat als je organisatie een privérepo heeft, je als contributor moet worden opgenomen voordat je deze probeert te forken.

Het is tijd om je fork naar je lokale machine te brengen. Om dit te doen, moet je het klonen met het commando git clone, dat de Git repository ophaalt van de externe server:

git clone remote_url

Je moet remote_url vervangen door de URL van je fork. Om de exacte URL van een GitHub repo te krijgen, ga je naar de pagina en klik je op Code. Kies vervolgens SSH en kopieer de link die het je geeft:

SSH repo URL under the "Code" button on GitHub.
SSH URL.

De opdracht die je zou uitvoeren om de gevorkte repo te klonen is:

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

Wanneer je een repo kloont, krijg je een map met zijn naam. In die map bevindt zich de broncode van het project (in dit geval de HTML site) en de Git repo, die zich in een map met de naam .git bevindt.

Je kunt de lijst met bestanden in de nieuwe map zien door de nieuwe map te openen in een grafische bestandsbeheerder, of door ze rechtstreeks vanaf de terminal op te sommen met de ls of dir commando’s:

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

Deze HTML site is heel eenvoudig. Het gebruikt Bootstrap voor praktische doeleinden en een paar foto’s van Unsplash, waar je gratis afbeeldingen voor je site kunt downloaden.

Als je het index.html bestand in je browser opent, zie je een eenvoudige pagina met een paar afbeeldingen:

 De eenvoudige webpagina die we maken.
De eenvoudige webpagina die we maken.

Het is tijd om met dit project te spelen. Het voelt erg leeg aan en misschien kan een header met de naam van de site de gebruikerservaring verbeteren.

Om dat te doen, voer je de HTML-site directory in en maak je een branch met de naam header. In deze nieuwe branch kunnen we alle bestanden bewerken en zoveel code deployen als we willen, omdat het geen invloed heeft op de hoofd (originele) branch.

Voer de volgende opdracht uit:

git checkout -b header

Dit zal een branch maken met de naam “header” en je schakelt er direct daarna naar over. Het is gelijk aan:

git branch header
git checkout header

Om te bevestigen dat alles goed is gegaan, voer je uit:

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

Je zult zien dat je bent verschoven van de “main” branch naar de “header” branch, maar de branch is nog steeds schoon omdat we geen bestanden hebben bewerkt.

Open in je favoriete code-editor het bestand index.html in je branched project. Dit bestand bevat enkele links naar Bootstrap 5, zodat we kunnen profiteren van de kant-en-klare componenten van het framework.

Voeg de volgende code toe aan het bestand index.html in de <body> tag en boven de afbeeldingscontainer:

<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>
 Onze webpagina met een nieuwe header.
Onze webpagina met een nieuwe header.

Veel mooier! Voel je vrij om andere branches en wijzigingen aan te brengen die je wenst.

Als je klaar bent met het bewerken van het project, is het tijd om alle wijzigingen door te voeren in je lokale repo. Typ in de projectdirectory het volgende in je terminal:

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

Wanneer je voor het eerst een project start, is het gebruikelijk om beschrijvende commit berichten te hebben, maar met de tijd en de verschoven focus, neigt de kwaliteit van de berichten naar beneden te gaan. Zorg ervoor dat je de goede naamgevingspraktijken bijhoudt.

Nu je een commit hebt gemaakt aan je lokale repository (die nog steeds alleen beschikbaar is op je computer), is het tijd om deze naar de externe repository te pushen.

Als je de commit zoals normaal probeert te pushen, zal het niet werken omdat je momenteel aan de header branch werkt. Je moet de upstream branch voor header instellen:

git push --set-upstream origin header

Vanaf 13 augustus 2021 vereist GitHub het gebruik van SSH verificatie, dus zorg ervoor dat je sleutels correct zijn ingesteld.

Heb je het gehad met onkundige WordPress-supportmedewerkers die nergens antwoord op kunnen geven? Geef ons gerenommeerde supportteam een kans! Bekijk onze pakketten

Hierna zou je een nieuwe branch met de naam header in je gevorkte repository moeten kunnen zien (bijv. https://github.com/jouwgebruikersnaam/HTML-site/branches):

The
De “header” branch.

Om een pull verzoek naar de originele repo aan te maken, klikt je op Compare, onderaan in het Active branches gedeelte.

Dit zal je naar een pull verzoek leiden, waar je moet kiezen met welke branch (het origineel of je fork) je wilt mergen. Standaard toont het de optie om samen te voegen met de basisrepository:

 Pull verzoeken maken op GitHub.
Pull verzoeken maken op GitHub.

Zodra je op de pull verzoek optie klikt, moet je een korte beschrijving van de gemaakte wijzigingen schrijven, net als bij je eerdere commits. Nogmaals, probeer beknopt en toch beschrijvend te zijn:

Het schrijven van een pull verzoekbericht.
Het schrijven van een pull verzoekbericht.

Klik op de Create pull request knop en wacht tot de eigenaar van de basisrepository je wijzigingen accepteert of je feedback geeft.

Gefeliciteerd – je hebt zojuist alle stappen van een algemene Git workflow voor webdevelopment voltooid!

Dit was een heel eenvoudig voorbeeld, maar de logica strekt zich uit over projecten van elke omvang. Zorg ervoor dat je deze workflow ook nauw deployet in grotere samenwerkingsprojecten.

Zo gebruik je Git bij Kinsta

Als je een Kinsta gebruiker bent, heb je al twee manieren om Git en GitHub te gebruiken vanuit je MyKinsta portal.

Laten we beginnen met de eerste optie. Je kunt eenvoudig SSH in en een repo ophalen van elke Git hostingservice zoals GitHub, Gitlab of Bitbucket.

Ga hiervoor naar het Websites tabblad , selecteer een site en ga naar het gedeelte SSH details en kopieer de SSH terminalopdracht.

 SSH details sectie.
SSH details sectie.

Log in via SSH op je site door de bovenstaande opdracht in je terminal te plakken en naar de openbare map van je site te gaan (te vinden onder/www/jouwsitenaam/). Hier bevinden zich al je WordPress bestanden, zodat je een Git repo kunt ophalen met een aangepast thema of een aangepaste plugin waaraan je hebt gewerkt.

Hier is hoe je een Git repo pullt met een eenvoudig commando:

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

Met de introductie van de nieuwe GitHub deploymentfeatures bij Kinsta, kun je een volledige WordPress site deployen vanuit een GitHub repository.

Je GitHub repo moet een kopie van de WordPress corebestanden bevatten, en natuurlijk de content van je site in de map wp-content.

Laten we deze optie eens snel bekijken.

Ga naar een van de sites van je bedrijf en creëer een testomgeving. Dit zou niet langer dan een paar minuten duren.

Testomgeving.
Testomgeving.

Zodra je je op je testsite bevindt, ga je naar het Deployment tabblad en klik je op de Beginnen met setup knop. Je gaat een GitHub popup zien waarmee Kinsta verbinding kan maken met je GitHub account.

GitHub Deployment tabblad.
GitHub Deployment tabblad.

Selecteer nu de repo waar je je site vandaan gaat halen.

Verbind Kinsta met GitHub.
Verbind Kinsta met GitHub.

Deploy ten slotte je site en bezoek deze via je testsite URL.

Nu deployen knop.
Nu deployen knop.

Deze feature bevindt zich nog in de Beta fase, maar binnenkort zal elke Kinsta gebruiker er toegang toe hebben.

Het gebruik van Git en Kinsta kan een krachtige combinatie zijn als je ze goed weet te gebruiken. Hoewel onze tutorial hier slechts een eenvoudig voorbeeld geeft, kun je veel meer leren van ons Git Knowledge Base artikel.

Vergroot je Git kennis met deze handleiding voor een typische projectworkflow ✅Klik om te tweeten

Samenvatting

Tegenwoordig is Git een tool die je moet leren voor webdevelopment, aangezien je meestal met anderen zult samenwerken om het best mogelijke project te creëren.

In dit artikel hebben we enkele belangrijke redenen besproken om Git in je projecten te gebruiken, en we hebben je de basisworkflow van samenwerken in een Git repo laten zien.

Git is zo’n krachtige tool dat je het gebruik ervan zelfs kunt uitbreiden naar WordPress hosting, dus het kan je alleen maar ten goede komen om het te leren en te deployen als onderdeel van je arsenaal aan webdevelopmentsvaardigheden.

Heb je nog andere suggesties voor het verbeteren van deze basis Git workflow voor webdevelopment? Laat het ons weten in de comments sectie!


Zet al je applicaties, databases en WordPress site online en onder één dak. Ons uitgebreide, krachtige cloudplatform boordevol functies omvat:

  • Eenvoudige installatie en beheer in het MyKinsta-dashboard
  • 24/7 deskundige ondersteuning
  • De beste Google Cloud Platform-hardware met bijbehorend premium netwerk, mogelijk gemaakt door Kubernetes voor maximale schaalbaarheid
  • Enterprise-niveau Cloudflare-integratie voor snelheid en veiligheid
  • Globaal bereik met 35 datacenters en 275+ PoPs verspreid over de wereld

Test het zelf met $20 tegoed gedurende de eerste maand Applicatie Hosting of Database Hosting. Bekijk onze pakketten of neem contact op met sales om het best passende pakket te bepalen.