Skip to content

Setting Up Git

For this task, I followed this tutorial provided by the Fab Academy team.

Key Concept

What is Git?

Git is a version control system which allows teams to collaborate on a project by keeping track of different versions of files and managing work seamlessly.

Its model is distributed, so we can have multiple people working on the same project locally while being connected to the central system. The idea is to ensure that what you work on locally is synced, always the same, with the central system.

For Fab Academy, we are using Gitlab, an open-source version of git, as the chosen system. In this assignment, the goal is for us to getting used to the Git system, set the local repository in our laptop, and connect that to the central repository of Fab Academy’s Gitlab.

Process

Configuring Git Settings

  1. Open terminal / command line

    (for macOS users, since Git is typically preinstalled on mac)

  2. Add Git Username (global)

    • Type git config --global user.name "YOUR_USERNAME"
    • Press enter
  3. Set email address

    • Type git config --global user.email "yourname@mail.com"

git config

Setting Up SSH Key

1. Prepare Local Repository Folder

  • Create a folder in which we want to set up our local repository.
  • Open terminal.
  • Navigate the terminal to the intended local repo folder by typing cd (folder name).

2. Generate SSH Key

  • Open terminal
  • Check for any existing SSH key by entering cat ~/.ssh/id_rsa.pub
  • I have no key exists, so I generate one by entering:
  ssh-keygen -t rsa -C "your_email@example.com"

w1-11

  • It will ask where to save the key. Press Enter to confirm the default location (~/.ssh/id_rsa). And set a secure passphrase.

w1-12

3. View SSH Key

  • To view the newly generated key, enter:
cat ~/.ssh/id_rsa.pub

w1-13

4. Copy SSH Key

We can copy the SSH key in 2 ways:

  • Manually select the generated key and copy (ctrl + c)
  • or type pbcopy < ~/.ssh/id_rsa.pub (for mac user)

I did the first option.

5. Add Key to Gitlab

  • Open Gitlab account on the web
  • Click the round pink icon > Preferences > SSH Keys (or go to User Settings > SSH Keys) w1-14
  • Click ‘Add new key’ w1-15
  • Paste the copied key in the given box, fill in details, and click ‘Add key’ w1-16

Clone Student Repository to Local

  • Go to student repository page at Gitlab
  • Click the down arrow on the blue Code button > Open with VSCode w1-17
  • Select the intended local repository destination w1-18
  • Confirm ‘Yes’ to connect w1-19 The repository is successfully cloned! w1-20

Upload Local Repository Online

Now that I’ve successfully cloned my personal repository, means I can work and make edits locally.

Delete files w1-21

Add new files w1-22

Run command from Terminal

  • Go to the local repository folder
  • Right click > New Terminal at Folder

new terminal at folder

  • Write git commands

gitcommands

Git pull

to download the latest copy, obtaining the most recent version, from the repository

Git status

to show the latest status of changes

Git add

to add files and stage changes

git add . to upload all files/changes at one

git add index.html to upload files one by one

Git commit

to save changes with message

Git push

to upload changes from local to the central repository

If commit and push are successful, the update should show up on our gitlab dashboard – with checklist mark to indicate current status.

first commit exercise

Run command from VSCode

VSCode apparently has already developed UI features to run various git commands in a more user-friendly way. For beginner and designer like me, I found these things super helpful –much more easier and efficient for day-to-day documentation than having to run commands one by one.

Go to Source Control

It shows how many pending changes you’ve already made. Alt text

Stage all changes

performs the same function as git add . command Alt text

Stage change one by one

performs the same function as git add index.html

Alt text

Unstage changes

helps us easily undo our staged changes Alt text

Commit

Alt text

Publish

performs the same functions as git push

Alt text