Git gebruiken in Dreamweaver: versiebeheer voor beginners

Heb je ooit een bestand overschreven en gewenst dat je terug kon naar gisteren? Dan is versiebeheer iets voor jou. Met Dreamweaver Git-ondersteuning leg je elke stap van je website vast, kun je wijzigingen vergelijken en veilig experimenteren zonder je werkende versie in gevaar te brengen. En dat allemaal vanuit het programma waarin je toch al werkt.

In dit artikel leggen we uit wat Git is, wat je moet installeren, hoe je een repository aanmaakt of kloont en hoe je dagelijks werkt met doorvoeren, pushen en vertakkingen. Je hebt geen ervaring met de opdrachtregel nodig.

Wat is Git en waarom zou je het gebruiken?

Git is een systeem voor versiebeheer. Je maakt op momenten die jij kiest een momentopname van je project, een zogeheten commit (in Dreamweaver: doorvoeren). Bij elke commit schrijf je een korte omschrijving, zoals “Contactpagina toegevoegd”. Zo bouw je een tijdlijn op waarin je altijd kunt terugkijken.

De voordelen voor een websitebouwer:

• Terug in de tijd: bekijk of herstel een eerdere versie van een bestand.
• Veilig experimenteren: probeer een nieuw ontwerp in een aparte vertakking (branch) zonder je hoofdversie aan te raken.
• Back-up in de cloud: stuur je repository naar een dienst als GitHub, GitLab of Bitbucket.
• Samenwerken: meerdere mensen kunnen aan dezelfde site werken zonder elkaars bestanden te overschrijven.

Git vervangt overigens niet het uploaden naar je webserver. Je publiceert nog steeds via FTP of SFTP, zoals beschreven in je website online zetten met FTP. Git is je logboek en back-up; de server is waar bezoekers je site zien.

Git installeren en het Git-paneel openen

Dreamweaver gebruikt de Git-client die op je computer staat. Installeer die eerst via git-scm.com en kies tijdens de installatie gewoon de standaardinstellingen. Dreamweaver vindt het programma daarna zelf.

Start Dreamweaver opnieuw en kies Venster > Git (Window > Git). Zie je het paneel niet of krijg je een melding, dan is de Git-client meestal niet goed geïnstalleerd. Controleer dat eerst voordat je verder zoekt.

Een repository aanmaken of klonen

Nieuwe repository voor een bestaande site

1. Kies Site > Sites beheren en dubbelklik op je site (of maak een nieuwe via Site > Nieuwe site).
2. Vink Een Git-opslagruimte koppelen aan deze site aan.
3. Kies Initialiseren als een Git-opslagplaats en klik op Opslaan.

Dreamweaver maakt een lege repository in je lokale sitemap, inclusief een .gitignore-bestand.

Een bestaande repository klonen

Staat het project al op GitHub of een vergelijkbare dienst? Kies dan bij een nieuwe site Bestaande Git-opslagplaats klonen met behulp van URL. Vul de URL in, klik op Testen en geef je gebruikersnaam en wachtwoord op. Gebruikt je dienst een toegangstoken, dan vul je dat in het veld Wachtwoord in. Met Referenties opslaan hoef je dit niet telkens opnieuw te doen. Let op: een SSH-sleutel met wachtwoordzin wordt hierbij niet ondersteund.

Dagelijks werken: doorvoeren, pushen en ophalen

In het Git-paneel zie je welke bestanden zijn gewijzigd. In het paneel Bestanden kun je met het Git-pictogram wisselen tussen de gewone FTP-weergave en een Git-weergave, waarin bestanden de status Niet-gevolgd, Ongewijzigd, Gewijzigd of Voorbereid krijgen.

Doorvoeren (commit)

1. Selecteer in het Git-paneel de bestanden die bij elkaar horen.
2. Klik op het pictogram Doorvoeren.
3. Controleer de wijzigingen, typ een duidelijke omschrijving en klik op OK.

Maak liever veel kleine commits dan één grote aan het eind van de dag. “Menu: link naar blog toegevoegd” zegt over drie maanden veel meer dan “aanpassingen”.

Werken met een externe repository

Heb je een online repository gekoppeld (via Externe site maken in het Git-paneel, of door te klonen), dan gebruik je drie acties:

• Alles ophalen (fetch): haalt informatie over nieuwe wijzigingen op zonder je eigen bestanden aan te passen. Doe dit eerst.
• Pull: haalt wijzigingen op en voegt ze samen met je lokale versie.
• Push: stuurt jouw commits naar de online repository. Dat lukt alleen als al je wijzigingen zijn doorgevoerd.

Wijzigingen bekijken en terugkijken

Klik in het Git-paneel op een gewijzigd bestand om te zien wat er sinds de laatste commit is veranderd, of open het dialoogvenster Git-diff via het Diff-pictogram. In de codeweergave zie je in de marge ook markeringen bij regels die zijn aangepast.

Voor de geschiedenis heb je twee opties: Bestandsgeschiedenis weergeven voor één bestand (ook via rechtsklikken in het paneel Bestanden) en Geschiedenis van opslagplaats weergeven voor het hele project. Zo zie je precies wanneer iets is gewijzigd en met welke omschrijving.

Vertakkingen gebruiken

Met een vertakking (branch) werk je aan een aparte lijn van je project. Ideaal voor een nieuw ontwerp of een grote aanpassing die nog niet af is.

1. Open in het paneel Bestanden de vervolgkeuzelijst met vertakkingen en kies Vertakkingen beheren.
2. Klik linksonder op +, kies de oorspronkelijke vertakking en geef de nieuwe een naam, bijvoorbeeld nieuw-ontwerp.
3. Werk en voer door zoals altijd. Je hoofdversie blijft onaangeroerd.
4. Klaar? Kies in Vertakkingen beheren je vertakking, klik op Vertakking samenvoegen en kies de doelvertakking.

Hebben beide versies dezelfde regels aangepast, dan ontstaat een conflict. Dreamweaver toont dan een conflictpictogram bij het bestand; open het, kies welke code blijft en voer het resultaat opnieuw door.

Wat wel en niet in Git hoort

Niet alles hoort in je repository. Wachtwoorden, databasegegevens en tijdelijke bestanden houd je erbuiten met het bestand .gitignore. Een eenvoudig voorbeeld:

# Systeembestanden
.DS_Store
Thumbs.db

# Ontwerpnotities van Dreamweaver
_notes/

# Geheime gegevens nooit in Git
config.php
.env

Vooral het laatste blok is belangrijk. Zet je een bestand met wachtwoorden per ongeluk in een openbare repository, dan is het verwijderen uit de geschiedenis lastig. Wijzig in dat geval altijd meteen het wachtwoord. Meer over alle opties lees je in de Dreamweaver-handleiding over Git.

Werk je liever met een editor die nog uitgebreidere Git-functies heeft? In onze vergelijking Dreamweaver vs Visual Studio Code lees je hoe beide programma’s zich verhouden. Je kunt ook gewoon beide gebruiken: het is dezelfde repository.

Samengevat

Met Git in Dreamweaver krijg je een veiligheidsnet onder je website. Installeer de Git-client, koppel een repository aan je site, voer regelmatig kleine wijzigingen door met een duidelijke omschrijving en push ze naar een online dienst voor een back-up. Gebruik vertakkingen voor grotere experimenten en houd gevoelige bestanden buiten de deur met .gitignore. Na een paar dagen wordt het een gewoonte, en je zult je afvragen hoe je ooit zonder werkte.

Veelgestelde vragen