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.
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:
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
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:
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:
- Verkrijg een lokale kopie van het project door een repository of repo te klonen. Als je samenwerkt, moet je eerst de repo afsplitsen.
- Maak een branch met een logische naam van de feature waaraan je gaat werken.
- Bewerk het project.
- Voer de wijzigingen door op je lokale computer.
- Push de wijzigingen naar de externe repo.
- Maak een pull verzoek aan de oorspronkelijke repo.
- 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:
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_urlJe 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:
De opdracht die je zou uitvoeren om de gevorkte repo te klonen is:
git clone [email protected]:yourusername/HTML-site.gitWanneer 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.cssDeze 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:
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>
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 headerVanaf 13 augustus 2021 vereist GitHub het gebruik van SSH verificatie, dus zorg ervoor dat je sleutels correct zijn ingesteld.
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):
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:
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:
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
Git is fundamenteel voor het deployen op Kinsta’s Applicatie Hosting platform. Gebruikers van de dienst verbinden hun accounts met GitHub, Bitbucket of GitLab en beheren deployments via hun MyKinsta dashboards:
Als je een klant bent van Kinsta’s Managed WordPress Hosting, dan kun je Git opnemen in een deployment workflow door in te loggen op je server met SSH vanaf een terminal en te putten uit een repository op elke Git hostingsprovider.
We hebben het gebruik van Git gedocumenteerd bij Kinsta voor WordPress klanten. Nadat je die instructies hebt gevolgd om je voor te bereiden op een SSH verbinding met een WordPress server, kun je een Git repo ophalen met een commando als dit:
ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"
Het gebruik van Git en Kinsta kan een krachtige combinatie zijn.
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.
En Git is een krachtige tool die essentieel is voor Kinsta’s Applicatie Hosting platform en vaak nuttig is voor klanten van Kinsta’s Managed WordPress Hosting dienst.
Het is de moeite waard om Git te leren en het te integreren in je arsenaal aan vaardigheden voor webontwikkeling.
Heb je nog andere suggesties voor het verbeteren van deze basis Git workflow voor webdevelopment? Laat het ons weten in de comments sectie!
Laat een reactie achter