Git(Hub)

• Git is a version-control system for tracking changes in source code during software development
• Git is designed for improving teamwork among developers, but it is also suited for individual work
• https://git-scm.com/

1. Installation

• Go to https://git-scm.com/ and download the installation file for your operating system (e.g. Git-2.xx.x-64-bit.exe)
• Open this file to install Git with the default settings
  • Leaving the default settings ensures that the Git Credential Manager is enabled. This allows you to securely log into GitHub using your web browser without having to create or manage personal access tokens.

macOS USERS

If you are using a Mac, Git can also be installed by opening the Terminal and running xcode-select --install, or via Homebrew (brew install git).

2. Set up your GitHub account

GitHub is the online hosting platform where your code repositories live in the cloud.

2a. New user

If you do not have a GitHub account yet:

• Go to https://github.com/signup
• Choose a clear and professional username (firstname_lastname is always a good idea!)
• Enter your Thomas More student email address (r-number@student.thomasmore.be, e.g. r0123456@student.thomasmore.be)
• Choose a strong password and complete the verification puzzle
• Click on Create account
• Check your Thomas More student mailbox for the activation code/email and verify your account

PROFESSIONAL USERNAME

Your GitHub profile is part of your resume and portfolio, so make sure to choose a professional username!

2b. Existing user

If you already have a GitHub account linked to your personal email:

• You do not need to create a second account!
• Log in to your existing account at https://github.com/login
• Go to your email settings: https://github.com/settings/emails
• Under Add email address, enter your Thomas More student email address (r-number@student.thomasmore.be) and click Add
• Check your student inbox for the verification email from GitHub and click Verify email address
• Once verified, set your Thomas More student email as your primary email address (or keep it verified as an additional address so you can claim your student benefits)

USERNAME CHECK

If you created your existing account a long time ago with a nickname or gamer tag, consider updating it to a professional name under https://github.com/settings/admin (e.g. firstname_lastname).

3. Apply for student benefits

As a higher education student at Thomas More, you can apply for the GitHub Student Developer Pack. This grants you free access to GitHub Pro, student access to developer tools, and free access to GitHub Copilot.

• Log in to GitHub (https://github.com/login)
• Go to https://github.com/settings/education/benefits
• Select Start your application
• When asked for the name of your school, enter Thomas More University Of Applied Sciences
• Select your verified Thomas More student email address (r-number@student.thomasmore.be)
• Click Share Location
• Click Continue

Proof of enrollment from KULoket

GitHub requires proof that you are currently enrolled as a student for the active academic year. You can obtain official proof through KULoket:

1. Log in to KULoket (https://kuloket.be or https://www.kuleuven.be/kuloket) using your student credentials

2. Navigate to Studie & loopbaan (Study & career) > Inschrijving (Registration) / Mijn studentendossier > Attesten

3. Download or view your Attest van inschrijving (Certificate of registration / enrollment) or your official student card overview

4. Take a clear screenshot that shows:

   • Your full name
   • The school name (Thomas More)
   • The current academic year
   • All signatures on the page

5. Upload this screenshot to the GitHub Education application form

6. Submit the application

APPLICATION APPROVAL

Verification is usually processed quickly, but can take anywhere from a few minutes to a few days. You will receive a confirmation email once your student status has been approved.

4. Complete your GitHub profile

• Go to your profile settings: https://github.com/settings/profile
• In the Name field, enter your real full name (First Name + Last Name). This makes it easy for teachers and fellow students to recognize who committed what code!
• (Optional) Upload a recognizable profile picture (avatar)
• (Optional) You can fill in a short bio, your location, or your LinkedIn profile
• Click Update profile at the bottom of the page

5. Log into and configure Git Bash

Open Git Bash

• Open Git Bash on your computer:
  • You can launch it via the Windows Start Menu, or
  • Right-click anywhere in an empty area inside a folder in Windows Explorer and select Git Bash Here

WINDOWS 11

Windows 11 users first have to select Show more options, then select Git Bash Here!

Configure your identity

Execute the following 3 commands in Git Bash (replace Firstname Lastname with your real name, and r0123456@student.thomasmore.be with your Thomas More student email):

$ git config --global user.name "Firstname Lastname"
$ git config --global user.email "r0123456@student.thomasmore.be"
$ git config --global core.editor notepad

WORKING ON MULTIPLE COMPUTERS

If you work on multiple computers (e.g. your home PC, laptop, or school computers), you must configure Git (run these 3 commands) on each of these devices!

Log in via browser (No token needed!)

Modern Git uses Git Credential Manager (GCM), which is installed automatically with Git for Windows. You do not need to generate or paste Personal Access Tokens!

• The first time you perform an action that connects to GitHub (for example, the first time you run git push or clone a private repository), a Git Credential Manager pop-up window will appear
• Click on Sign in with your browser (or Web browser)

• Your default web browser will open and display an authorization prompt
• If you are already logged in to GitHub, simply click the green Authorize GitCredentialManager button

• Once authorized, Git Bash is permanently connected on your computer! Your credentials are saved securely in the Windows Credential Manager automatically

NO TOKENS REQUIRED

You don't have to generate, copy, or update personal access tokens anymore. The browser login takes care of everything securely and automatically.

6. Accept your student enrollment in the course

Before you can clone the starter files and submit your work, follow these steps to get your private course repository:

• Accept the invite to the itfactory-tm Team in your student email: Check your Thomas More student inbox for the invitation email to join the itfactory-tm team on GitHub and accept it.

• Go to the learning platform and click on the Sources link for your class: Open the course on Canvas and click on the Sources link provided for your class group.

• Login to Classroom50: Log in with your Github Account

• Authorize Github: It is required to authorize the connection between Classroom50 and your Github account.

• Accept the assignment: Click the button to accept the assignment in Classroom50.

• Your repo is now being made: Classroom50 will automatically generate your own private repository for this course. Once created, click on the link to your repository on GitHub. You will use this repository URL to clone your project to your computer in the next step!

7. Commands

• When working with Git there is a basic work flow you have to follow
  • Let's say we already made you a start project for this course, hosted on GitHub as a remote Git repo(sitory). To get started, you first have to clone this repository on your local device. This results in a folder (with the content of this repository) in which all your work on this project will be saved locally.
  • Assume this start project contains a folder where you should do an exercise. At regular times, for example when you finished (a substantial part of) the exercise, you have to add your work locally, commit it locally and push it online to the remote GitHub repository.
• Each step in this flow corresponds to a command-line instruction:

command	when	what
git clone https://github.com/xxx.git	Only once on each device	Downloads the specified Git repository in a folder xxx on your device. This local repository/folder is your working environment/tree.
git add .	After making any changes and before running the git commit command	Adds added/changed files to staging area
git commit -m "message"	When your work (or a certain part) is done	Bundles all files in the staging area (added by the previous git add commands) into one commit
git push	When you want your work to be published to the online GitHub repository	Publishes all commits to the online GitHub repository
git pull	When you want to get the latest published version	Updates your local GitHub repository to the latest published version
git status	At any moment in the work flow	Shows the status information of the repository

git clone

• Every repository is hosted on an online hosting platform. GitHub is the world's leading platform and therefore also the one we will use throughout this course.
• A repository lives online on GitHub. When you want to work in it, you will have to copy it onto your own device. To achieve this, you have to perform the git clone command.

REMARKS

• Do not forget to navigate to the folder of the local repository (cd xxx) after cloning, because otherwise the commands below will not work
  • When you are in a folder with a local repo in it, Git Bash adds (master) at the end of the folder name
• By default, the command git clone https://github.com/xxx.git clones the repository into a folder with name xxx
  • You can change this folder name (in explorer) afterwards, or you can use the clone command git clone https://github.com/xxx.git yyy with an additional argument yyy, which is then the folder the repo will be copied in

git add

• Now that you cloned the repository locally on your device, you can start working in it. The ideal scenario could be the following:
  • I'm going to make exercise 1.
  • I write some HTML code and finish the exercise.
  • I add all the changed files to the staging area using the git add . command, so I can commit them later on (see the next step).

REMARK

You don't have to wait to perform the git add . command until the whole exercise is finished. You can execute git add . multiple times and whenever you want, but usually you add files when you are ready to perform a commit.

git commit

• When you have finished your exercise/task/work it is time to commit all your changes
• A commit is a bundle of all the files in the staging area
• Each commit must contain a message, describing what kind of work you did
  • For example: git commit -m "Update README.md"

REMARKS

• A commit does not publish your work to your online GitHub repository. It only bundles and prepares it locally! If you want your work published online, you still have to perform the git push command.
• You can have multiple commits locally before pushing them online (at once)
• There is no restriction in the amount of commits you can create

git push

• After you have created your commit(s) it is really important to perform the git push command, as this will send your commit(s) to your online repository
• Pushing is the last step in the git workflow
  • After a push you can start working on another exercise/task and follow the work flow again from the beginning

git pull

• The git pull command updates your local repository to the latest published version on GitHub. All the pushed commits (your own, your teacher's, your team member's) will be joined in your local repository.
• There are a couple of scenario's where a git pull comes in handy:
  • You are working on multiple devices
    • You did some work on your home computer but you want to continue working on your laptop at school the other day
    • You'll have to execute the git pull command on your laptop so you have the latest version there
  • Your teacher adds new content to the repository
  • You are working in a team and one or more team members have pushed some functionalities to the repository

WARNINGS

• The git pull command can only be executed if your local repository is "clean", that is
  • all local files are added AND
  • all local files are committed
• If this pull command results in a merge conflict, contact your teacher!
  • Be careful when working on different devices
    • Avoid working "simultaneously" on the same files/exercises on different devices
    • Always commit and push your work to the remote repo
  • In the follow-up course Webdesign Advanced, we will elaborate further on this topic (when we discuss a more advanced Git work flow tailored towards team work)

REMARK

You can do no harm whatsoever by executing the command git pull when there is no need to:

git status

• The git status command shows the status of your repository and can be executed at any time during our work flow
• Examples
  • After cloning the repo
    
  • After changing the file README.md: the modified file (which is not added to the staging area yet) is displayed in red
    
  • After adding the changed file README.md to the staging area: the modified file is displayed in green
    
  • After commiting
    
  • After pushing
    

Your repository on GitHub

• Via the GitHub-page of your remote repo, you can
  • consult a lot of information (code, commit history, statistics, etc.) of the repo
  • change settings of the repo
  • edit the repo online
  • ...
• For now, the commit history is probably the most interesting feature