Summary  
Demonstrates how to clone a remote repository, navigate its directory, modify files, and use version control commands to stage and commit changes.  

General domain of usage  
Version control

## Clonen

Zodra een externe repository is aangemaakt, kun je een **lokale kopie** maken met het commando `git clone` en de **URL** van de repository. Voordat je echter commando's uitvoert, volgt eerst een korte herhaling over het openen van de **Terminal** (Git Bash) op jouw besturingssysteem.

Als je <b>Git</b> nog niet hebt geïnstalleerd, biedt ons <a href="https://codefinity.com/blog/A-step-by-step-guide-to-Git-installation" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> artikel</a> een stapsgewijze installatiehandleiding.

Opmerking

Je hebt de URL nodig, dus volg de instructies in de onderstaande video om te leren hoe je de URL van jouw repository op **GitHub** kunt kopiëren.

Met de gekopieerde URL zijn we nu klaar om onze **remote repository** te klonen door het volgende commando in de terminal uit te voeren en `<url>` te vervangen door de daadwerkelijke URL van je repository:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="git clone <url>">
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6"></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Zoals je kunt zien, hebben we met succes een **kopie van de remote repository** van GitHub naar onze lokale machine gedownload. Daarnaast is er automatisch een map met de naam `github-playground` aangemaakt, die de **volledige werkboom** bevat.

Laten we nu naar deze map gaan en alle **niet-verborgen** bestanden en mappen weergeven:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="cd github-playground">
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6"></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="ls -l">
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6"></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

In wezen bevat onze repository slechts één `README.md`-bestand, dat **automatisch** is aangemaakt bij het aanmaken van de repository.


Een **README**-bestand is een document dat doorgaans essentiële informatie over een softwareproject bevat, zoals installatie-instructies, functies en afhankelijkheden, meestal geschreven in markdown. **Markdown** is een lichtgewicht opmaaktetaal met een eenvoudige syntaxis voor platte tekst, ontworpen om te worden omgezet naar **HTML** en andere formaten, terwijl het gemakkelijk leesbaar en schrijfbaar blijft.

Meer Bestuderen

## Wijzigingen Lokaal Committent

Om uw eerste lokale commit te maken, begint u met het bewerken van het bestand `README.md`. U kunt **elke gewenste editor** gebruiken—zoals Notepad, Visual Studio Code of Sublime Text. In dit voorbeeld wordt de **Vim**-editor gebruikt (hier kunt u <a href="https://www.vim.org/download.php" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Vim installeren</a>).

Om het bestand `README.md` te openen in Vim, voert u uit:

## Wijzigingen Lokaal Committent

Dit bestand wordt aangepast door de inhoud te bewerken. Hiervoor wordt de **Vim**-editor gebruikt. Om het bestand `README.md` te openen in Vim, voert u de volgende opdracht uit:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="vim README.md">
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6"></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Eerst moet je de **insert** (bewerk) modus in **Vim** activeren door op `i` te drukken. Hiermee kun je de tekst bewerken. Voeg vervolgens de volgende regel toe aan ons `README`-bestand:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="Learning GitHub is cool!">
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6"></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Om de insert-modus te verlaten, druk je op de **Escape**-toets. Daarna, om de wijzigingen op te slaan en af te sluiten, typ je `:wq` en druk je op de **Enter**-toets:

Laten we nu de status van onze werkboom controleren:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="git status">
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6"></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Zoals te zien is, wordt aangegeven dat het `README`-bestand zich in de **gewijzigde** status bevindt, waardoor we deze wijziging nu in één enkele opdracht kunnen toevoegen en vastleggen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="git commit -a -m "Add another line to README.md"">
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6"></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Samenvattend: de parameter `-a` in het `git commit`-commando **staged automatisch** alle gewijzigde en verwijderde bestanden, waardoor `git add` vóór het vastleggen niet nodig is. Met de parameter `-m` kun je direct een **commitbericht** in het commando opnemen.

Met welk commando maak je een lokale kopie van een externe repository?

Verken de basisprincipes van GitHub, beginnend met het begrijpen van wat GitHub is. Leer hoe u uw eigen repositories aanmaakt en externe branches beheert. Ontdek hoe u wijzigingen tussen verschillende omgevingen synchroniseert. Verdiep u in geavanceerdere workflows, waaronder het ophalen, doorvoeren en herbaseren van wijzigingen. Beheers de commando's die nodig zijn om efficiënt samen te werken met uw team.

Leer de basisprincipes van GitHub, waaronder het begrijpen wat GitHub is en hoe externe repositories werken. Maak een eigen GitHub-account aan, stel repositories in en beheer deze, kloon externe repositories naar de lokale machine en push wijzigingen om projecten up-to-date en gesynchroniseerd te houden.

Beheers de basisprincipes van interactie met externe repositories door te leren werken met externe branches, het ophalen en samenvoegen van externe wijzigingen, en het binnenhalen van updates van externe repositories. Verkrijg de essentiële vaardigheden die nodig zijn om uw werk effectief te beheren en te synchroniseren met externe teams.


Verdiep u in geavanceerde Git-workflows door technieken te beheersen zoals het ophalen en doorvoeren van wijzigingen, het pushen van lokale branches en het rebasen van wijzigingen. Verfijn uw versiebeheer vaardigheden om complexere ontwikkelscenario's aan te kunnen en een schone, efficiënte projectgeschiedenis te behouden.

GitHub Fundamentals

Een Externe Repository Klonen

GitHub Fundamentals

Een Externe Repository Klonen