Websites bouwen met versiebeheer

Mijn blogs zijn meestal gericht op klanten en niet zo technisch. Deze blog is daar een uitzondering op en gericht op (aanstormende) webbouwers en cowboy-coders die meer structuur in hun manier van bouwen willen aanbrengen.

Let op
Deze uitleg gaat ervan uit dat je op een Mac werkt. Voor Windows kan het zijn dat sommige delen afwijken.

Deze blog gaat over hoe je websites kunt bouwen met versiebeheer. In de begin tijd van het web en ook nog toen ik starte (in 2009) deden we wijzigingen direct live op de server. Voor kleine wijzigen en websites die niet zo vaak bezocht worden niet een groot probleem maar niet ideaal. Voor druk bezochte websites, not done. Deze 'oude' manier van werken wordt ook wel Cowboy-coding genoemd.

Git

De komst van git/versiebeheer maakte het leven van webspecialisten een stuk eenvoudiger. Hiermee kunnen we namelijk alle wijzigingen die we doen beschrijven. Hierdoor kun je terug in de tijd; wijzigingen terug draaien of kijken wat er is gewijzigd in het verleden. Helemaal ideaal voor teams die samenwerken aan projecten maar ook ik als zelfstandige webspecialist ben fan van deze manier van werken.

Commit

Elke wijziging die je doet kun je beschrijven in een commit. Je kunt ook meerdere wijzigingen in 1 commit verwerken. Een commit slaat de beschrijving in combinatie met je wijzigingen die je hebt gedaan aan de bestand(en) op in het versiebeheer systeem in de branche waarin je werkt met een referentie. Je kunt commits met elkaar vergelijken zodat je precies kunt zien welke wijzigingen je in de betreffende commit hebt gedaan ten opzichte van een andere versie.

(Feature) Branches

Ik had het net al over een branche. In git werk je met branches dat zijn eigenlijk een soort set van alle wijzigingen van een variant van je project. Je kunt werken met 1 branche waar je alles in doet, dit is vooral geschikt voor kleine wijzigingen. De master branche wordt meestal gebruikt als de hoofd branche. Deze is dan bijvoorbeeld identiek aan alles wat je live op de server van de website hebt staan. Ga je een uitbreiding van een website maken dan maak je een kopie van de master en noem je deze naar de feature die je gaat ontwikkelen. Als er in de tussen tijd dat je daarmee bezig bent iets mis is met de website waarbij je een kleine fix moet doen dan schakel je over naar je master branche om de wijzigingen toe doen. Als je klaar bent met een uitbreiding of nieuwe feature dan kun je branches mergen. Dat wil zeggen dat je branches kunt samenvoegen om op die manier een uitbreiding van een website in de master branche kunt toevoegen om deze wijzigingen vervolgens live te kunnen zetten.

Lokaal werken

Leuk dat je met versie beheer wil werken. Dit betekend wel dat je een lokale versie van je website op je Mac moet draaien. Hiervoor heb je tools nodig. De belangrijkste is MAMP. Met MAMP kun je een webserver draaien met Apache en MySQL. Zo kun je websites met CMS systemen als WordPress of CraftCMS laten draaien op je Mac. Op die manier kun je dus een live website nabootsen maar dan op je Mac. Het voordeel is dan dat je geen live wijzigingen hoeft te doen en goed kan testen voordat je alles live zet.

Staat de website al live en wil je wijzigingen doen? Download dan de laatste versie van de database van de live website en importeer deze met phpmyadmin (onderdeel van MAMP). Het is ook mogelijk om op je Mac gebruik te maken van Sequel pro voor het importeren, exporteren en bewerken van databases.

Gulp Workflow

Nog een bijkomend voordeel van lokaal werken is het werken met Gulp. Door een Gulp workflow te maken kun je gebruik maken van verschillende tools die het bouwen van websites makkelijker maken en of automatiseren. Denk bijvoorbeeld aan:

• SASS in plaats van css
• JShint geeft feedback op al je javascript code
• Automatische afbeelding optimalisatie

Repository maken en linken

Nu je een website op je Mac hebt draaien kun je wijzigingen gaan aanbrengen aan bijvoorbeeld een WordPress thema. Om gebruik te maken van versiebeheer en hiervan ook een kopie te maken op een git server kun je kiezen uit verschillende diensten. Bitbucket, Github en Gitlab zijn veel gebruikte diensten. Zelf maak ik gebruik van Bitbucket. Allemaal hebben ze ook een gratis variant waarmee je aan de slag kunt. Het voordeel van zo'n git server is dat je een backup hebt van al je wijzigingen maar ook dat je kunt samenwerken aan hetzelfde project. In een van de eerder genoemde diensten moet je een repository aanmaken. Een repository moet je eigenlijk zien als een soort project. Een repository maak je dus aan per project/website. Binnen een repository kun je dan weer branches aanmaken waarin je commits met wijzigingen toevoegt.

Je hebt nu een repository aangemaakt die je vervolgens wilt linken aan je lokale website die je in MAMP hebt toegevoegd. Dit kun je doen met een tool als Sourcetree. Vroeger moest dit allemaal via een terminal geregeld worden. Sourcetree geeft je een mooie visuele interface waarin je een overzicht van je repository hebt en alle wijzigingen per project. Heb je een bestand gewijzigd zie je in Sourcetree een badge symbool met het aantal gewijzigde bestanden. Ben je klaar met je wijzigingen, klik op commit en de wijzigingen worden opgeslagen als een versie. Vervolgens is er ook de mogelijkheid voor 'Push'. Dat wil zeggen dat je je wijzigingen upload naar de git-dienst waar je voor hebt gekozen.

Samenwerken

Nu je de wijzingen hebt gepushed kan diegene met wij je samenwerkt zien dat er wijzigingen door jouw zijn gedaan. Door te 'pullen' kun je de wijzigingen die zijn gedaan (door jezelf of door een ander) ophalen van de git-dienst. Eventueel kun je ze eerst reviewen alvorens je ze daadwerkelijk toevoegt.

Wijzigingen live zetten

Je hebt nu wijzigingen aangebracht aan het project en wilt die wijzigingen live zetten. Je kunt daarvoor gebruikmaken van diverse mogelijkheden:

• Codeship (online dienst)
• GitFTP-deploy (Mac programma, niet geschikt voor teams)
• Deployment tools van een git-dienst

Met deze tools zorg je ervoor dat de gewijzigde bestanden in je versiebeheer ook op de server worden gewijzigd. Op die manier kun je de master branche weer gelijk trekken met de live server van de website. Nooit meer bestanden met elkaar vergelijken om te kijken wat de nieuwste versie is, ideaal!