VS Code to GitLab Complete Guide

Upload, Update and Manage Project from VS Code to GitLab

1. What is Git?

Git is a tracking system for our code. It:

• Tracks every change we make
• Saves snapshots of our project
• Lets us go back to any previous version

2. What is GitLab?

GitLab is a website that stores our code online, like Google Drive (only for codes). Our code lives both on our computer and on GitLab.

3. Key Concepts

What is origin?

origin is just a nickname for our GitLab link. Instead of typing the full URL every time, Git calls it origin for short.

💡 Think of origin as a contact name in our phone. Instead of typing the full number, we just say call "Hanif".

What is main?

main is our main working branch, our primary copy of the project. We can create other branches to try new things without touching main.

💡 Think of main as our original book, and branches as photocopies we can edit safely.

What is a commit?

A commit is like taking a photograph of our project at a specific moment. Every time we commit, Git saves that snapshot. We can go back and see any snapshot anytime.

💡 Every commit has a message we write, like 'added login page' or 'fixed spelling mistake'. This helps us remember what we changed.

4. What Each Command Does

5. First Time Setup — Upload Project

Do these steps ONCE to connect and upload local project to GitLab.

 Step 1 — Open Project in VS Code

• Click File → Open Folder
• Select project folder from the computer

 Step 2 — Open Terminal in VS Code

• Open a terminal through the New Terminal option (top menu bar in VS Code)

 Step 3 — Run These Commands

• git init
• git add .
• git commit -m "my first upload"

 Step 4 — Get GitLab Link

• Go to GitLab project in the browser
• Click the Clone button
• Copy the HTTPS link

Step 5 — Connect and Upload

Run below commands to connect and upload:

• git remote add origin PASTE-YOUR-LINK-HERE
• git branch -M main
• git push --set-upstream origingit status main

💡 If not signed in, the system will ask for GitLab username and password. Enter them and the project will upload!

⚠️  Possible Error After Push

Sometimes this error may appear:

• ! [rejected]   main -> main (fetch first)
• error: failed to push some refs

This happens because GitLab has files that are not on our local computer. There are two ways to fix this:

Option A — Safe Way (Pull First then Push)

• git pull origin main --allow-unrelated-histories

⚠️ If a VIM editor screen opens, type  :q!  and press Enter to close it. Then continue.

• git push origin main

Files are now uploaded to GitLab safely.

Option B — Force Push (Beginner Friendly)

If we are a beginner and the GitLab project is empty just force push directly:

• git remote add origin PASTE-YOUR-LINK-HERE
• git branch -M main
• git push origin main --force

Done. Local files overwrite whatever was on GitLab.

💡 For beginners — Option B (force push) is simpler and avoids confusion. Use Option A when working in a team or when GitLab already has important files.

6. Making More Commits (Saving New Versions)

Every time we make changes to the project, we save a new version using these 3 commands:

• git add .
• git commit -m "describe what you changed"
• git push

💡 Always write a clear commit message so we remember what we changed. Example: 'added second line in readme'.

7. How to See Our Version History on GitLab

Every commit pushed is saved on GitLab. We can see all versions like this:

• Go to the GitLab project in the browser
• Click Repository on the left sidebar
• Click Commits

 We will see a list like this:

Click on any commit to see exactly what changed — green lines mean added, red lines mean deleted.

💡 This is the power of Git. We have a full history of every change ever made. We can go back to any version anytime.

8. git fetch vs git pull

Both commands download from GitLab, but they work differently:

💡 As a beginner — just always use git pull. It does everything in one step.

9. How to Disconnect from GitLab

If we want to remove the connection between VS Code and GitLab:

Check current connection

• git remote -v

Remove the connection

• git remote rm origin

Verify it is gone

• git remote -v

Should show nothing and it means connection removed.

💡 Disconnecting does NOT delete our files. Our files stay safe on both our computer and GitLab. We just removed the link between them.

FINAL TIP - Every time we make changes — just do:

git add .   →   git commit -m "message"   →   git push

That is all we need 😊