Skip to content

Commit 0f48e78

Browse files
committed
Add: write content for vcs docs
1 parent 9c4ac34 commit 0f48e78

File tree

7 files changed

+593
-0
lines changed

7 files changed

+593
-0
lines changed
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Version Control Systems",
3+
"position": 3,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Learn how to manage your code history, collaborate with others, and never lose a line of code again. This is the most essential skill for any modern developer."
7+
}
8+
}
Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
sidebar_position: 6
3+
title: "Git Setup & Your First Repo"
4+
sidebar_label: "6. Setup Guide"
5+
description: "Step-by-step instructions to install Git, configure your profile, and push your first project to GitHub."
6+
---
7+
8+
It’s time to stop reading and start doing! In this guide, we will transform your computer into a developer workstation.
9+
10+
## Step 1: Install Git
11+
12+
First, we need to get the Git engine running on your machine.
13+
14+
<Tabs>
15+
<TabItem value="windows" label="🪟 Windows" default>
16+
17+
1. Download the **[Git for Windows](https://git-scm.com/download/win)** installer.
18+
2. Run the `.exe` file.
19+
3. **Important:** When asked about the "Default Editor," you can choose **Visual Studio Code**.
20+
4. Keep all other settings as "Default" and click **Install**.
21+
22+
</TabItem>
23+
<TabItem value="mac" label="🍎 macOS">
24+
25+
1. Open your Terminal (Command + Space, type `Terminal`).
26+
2. Type `git --version` and hit Enter.
27+
3. If you don't have it, a popup will ask you to install **Xcode Command Line Tools**. Click **Install**.
28+
4. Alternatively, if you use [Homebrew](https://brew.sh/), run: `brew install git`.
29+
30+
</TabItem>
31+
<TabItem value="linux" label="🐧 Linux">
32+
33+
Open your terminal and run the command for your distribution:
34+
* **Ubuntu/Debian:** `sudo apt install git-all`
35+
* **Fedora:** `sudo dnf install git-all`
36+
37+
</TabItem>
38+
</Tabs>
39+
40+
## Step 2: Configure Your Identity
41+
42+
Git needs to know who is making changes. Open your terminal (or **Git Bash** on Windows) and type these two lines:
43+
44+
```bash
45+
git config --global user.name "Your Name"
46+
git config --global user.email "your-email@example.com"
47+
```
48+
49+
*Note: Use the same email address you plan to use for your GitHub account.*
50+
51+
## Step 3: Create Your First Repository
52+
53+
Let's create a "Hello World" project and track it with Git.
54+
55+
### 1. Create a Folder
56+
57+
```bash
58+
mkdir my-first-repo
59+
cd my-first-repo
60+
```
61+
62+
### 2. Initialize Git
63+
64+
This creates a hidden `.git` folder. This is where the "Time Machine" lives!
65+
66+
```bash
67+
git init
68+
```
69+
70+
### 3. Create a File
71+
72+
Create a simple file named `hello.txt` and add some text to it.
73+
74+
### 4. The Magic Sequence (Add & Commit)
75+
76+
```bash
77+
# Add the file to the Staging Area
78+
git add hello.txt
79+
80+
# Save the snapshot to the Local Repository
81+
git commit -m "feat: my very first commit"
82+
```
83+
84+
## Step 4: Connect to GitHub
85+
86+
Now, let's put your code in the cloud so the world can see it.
87+
88+
1. Go to **[GitHub.com](=https://github.com/)** and create a free account.
89+
2. Click the **+** icon in the top right and select **New Repository**.
90+
3. Name it `my-first-repo` and click **Create repository**.
91+
4. GitHub will give you a "Remote URL" (it looks like `https://github.com/your-username/my-first-repo.git`).
92+
93+
**Run these commands in your terminal to link your computer to GitHub:**
94+
95+
```bash
96+
# Link your local repo to the cloud
97+
git remote add origin https://github.com/your-username/my-first-repo.git
98+
99+
# Rename your main branch to 'main' (standard practice)
100+
git branch -M main
101+
102+
# Upload your code!
103+
git push -u origin main
104+
```
105+
106+
## How to Check Your Work
107+
108+
Refresh your GitHub repository page. You should see your `hello.txt` file sitting there!
109+
110+
```mermaid
111+
sequenceDiagram
112+
participant PC as Your Computer (Local)
113+
participant GH as GitHub (Cloud)
114+
115+
PC->>PC: git init
116+
PC->>PC: git add & commit
117+
PC->>GH: git push
118+
GH-->>PC: Successfully uploaded!
119+
120+
```
121+
122+
## Common Commands Cheat Sheet
123+
124+
| Command | Purpose |
125+
| --- | --- |
126+
| `git status` | See which files are modified or staged. |
127+
| `git log` | See the history of all your commits. |
128+
| `git diff` | See exactly what lines changed in your files. |
129+
| `git branch` | List your current branches. |
130+
131+
:::success 🎉 Congratulations!
132+
You are now officially using Version Control. You have a local history on your computer and a backup in the cloud. You are ready to start building real backend applications!
133+
:::
Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
sidebar_position: 2
3+
title: "Git - The Industry Standard"
4+
sidebar_label: "2. Git"
5+
description: "Master the world's most popular Distributed Version Control System."
6+
---
7+
8+
**Git** is a distributed version control system. This means that every developer’s computer contains the **entire history** of the project. It is fast, efficient, and used by millions of companies including Google, Microsoft, and Netflix.
9+
10+
## The Git Workflow
11+
12+
Before typing commands, you must understand the **Three Stages** of Git. Think of it like taking a professional photo:
13+
14+
1. **Working Directory:** You are posing for the photo (Writing code).
15+
2. **Staging Area:** You are "frozen" in the frame, but the shutter hasn't clicked (Preparing code).
16+
3. **Local Repository:** The photo is saved to the memory card (Saved forever).
17+
18+
```mermaid
19+
graph LR
20+
A[Working Directory] -->|git add| B[Staging Area]
21+
B -->|git commit| C[Local Repository]
22+
C -->|git push| D[Remote/GitHub]
23+
```
24+
25+
## Essential Git Commands
26+
27+
How do you actually use it? You can choose between using the **Terminal** (for power users) or a **GUI** (for a visual experience).
28+
29+
<Tabs>
30+
<TabItem value="terminal" label="💻 Terminal" default>
31+
32+
```bash
33+
# 1. Start a new repository
34+
git init
35+
36+
# 2. Check what has changed
37+
git status
38+
39+
# 3. Add a specific file to the 'Staging Area'
40+
git add index.js
41+
42+
# 4. Save the snapshot with a message
43+
git commit -m "feat: add user login logic"
44+
45+
# 5. Send your code to GitHub
46+
git push origin main
47+
48+
```
49+
50+
</TabItem>
51+
<TabItem value="gui" label="🖱️ Desktop App / VS Code">
52+
53+
1. **VS Code:** Click the "Source Control" icon on the left sidebar.
54+
2. **Staging:** Click the **+** icon next to the file name.
55+
3. **Commit:** Type your message in the box and click **Commit**.
56+
4. **Sync:** Click **Sync Changes** to push to the cloud.
57+
58+
</TabItem>
59+
</Tabs>
60+
61+
## Branching: Parallel Realities
62+
63+
The most powerful feature of Git is **Branching**.
64+
65+
Imagine you want to add a "Dark Mode" to your app, but you don't want to risk breaking the current working version. You create a branch.
66+
67+
```mermaid
68+
gitGraph
69+
commit id: "Initial"
70+
commit id: "Setup API"
71+
branch feature-dark-mode
72+
checkout feature-dark-mode
73+
commit id: "Add CSS"
74+
commit id: "Add Toggle"
75+
checkout main
76+
merge feature-dark-mode
77+
commit id: "Launch v1.1"
78+
79+
```
80+
81+
## Why CodeHarborHub Recommends Git
82+
83+
* **Offline Capability:** You can save your progress while traveling or if your internet is down.
84+
* **Safety:** Every "Commit" is a checksum (a unique ID). It is almost impossible to lose data or corrupt the history.
85+
* **The Ecosystem:** Since Git is the standard, it integrates with every major tool like **VS Code**, **Docker**, and **Vercel**.
86+
87+
## Recommended Resources
88+
89+
* **[Oh My Git!](https://ohmygit.org/)**: An open-source game to learn Git visually.
90+
* **[Git Cheat Sheet by GitHub](https://education.github.com/git-cheat-sheet-education.pdf)**: A handy PDF to keep on your desk.
91+
92+
## Summary Checklist
93+
94+
* [x] I understand the 3 stages: Working Directory, Staging, and Repository.
95+
* [x] I can initialize a project with `git init`.
96+
* [x] I know that `git add` prepares my changes and `git commit` saves them.
97+
* [x] I understand that branches allow for safe experimentation.
98+
99+
:::tip Pro-Tip
100+
Always write **clear commit messages**. Instead of writing "Fixed stuff," write "fix: resolve login button alignment on mobile." Your future self (and your team) will thank you!
101+
:::
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
sidebar_position: 1
3+
title: "Introduction to Version Control"
4+
sidebar_label: "1. What is VCS?"
5+
description: "Understand the concept of Version Control Systems and why they are the Time Machine of software development."
6+
---
7+
8+
Imagine you are working on a massive backend project. You’ve spent 10 hours writing the perfect API. Suddenly, you make a small change, and the entire server crashes. You try to undo it, but you've already saved the file. You can't remember what the code looked like before.
9+
10+
**This is where Version Control Systems (VCS) save your life.**
11+
12+
## 🧐 What is Version Control?
13+
14+
A **Version Control System** is a software tool that tracks every single change you make to your code. It’s like a "Save Game" feature in a video game. If you run into a boss (a bug) that you can't beat, you can simply reload your previous save point.
15+
16+
### The "Time Machine" Analogy
17+
Without VCS, your folder looks like this:
18+
* `server.js`
19+
* `server_final.js`
20+
* `server_final_v2.js`
21+
* `server_DO_NOT_DELETE.js`
22+
23+
With VCS, you have **one** file named `server.js`, but you can travel back in time to see exactly what that file looked like 5 minutes, 5 days, or 5 months ago.
24+
25+
## Why is it Essential?
26+
27+
### 1. Collaboration (The "No-Clash" Rule)
28+
In a professional setting, five developers might be editing the same file at the same time. A VCS intelligently **merges** their changes together so no one's work is overwritten.
29+
30+
### 2. Traceability (The "Who Did This?" Rule)
31+
VCS keeps a log of **Who** changed **What** and **Why**. This isn't for blaming people; it's for understanding the logic behind a change months after it happened.
32+
33+
### 3. Branching (The "Parallel Universe" Rule)
34+
You can create a **Branch** to test a crazy new idea. If the idea fails, you just delete the branch, and your main code remains perfectly safe. If it works, you merge it back into the main project.
35+
36+
## Two Types of VCS
37+
38+
There are two main ways these systems are built:
39+
40+
### A. Centralized VCS (CVCS)
41+
There is one single central server that stores all the versions. Developers "check out" files from that server.
42+
* **Example:** SVN (Subversion).
43+
* **Cons:** If the server goes down, no one can save their work.
44+
45+
### B. Distributed VCS (DVCS)
46+
Every developer has a **full copy** of the entire project history on their own computer.
47+
* **Example:** Git, Mercurial.
48+
* **Pros:** You can work offline, and if the main server dies, any developer's computer can be used to restore it.
49+
50+
## Current Market Favorites
51+
52+
Currently, the world of programming is dominated by these three:
53+
54+
1. **Git:** The undisputed king (Distributed).
55+
2. **SVN:** Still used in some older, large corporate environments (Centralized).
56+
3. **Mercurial:** A friendly alternative to Git (Distributed).
57+
58+
## Summary Checklist
59+
60+
* [x] I understand that VCS is a history tracker for my code.
61+
* [x] I know that "Branching" allows me to experiment safely.
62+
* [x] I understand that most modern systems are "Distributed."
63+
* [x] I am ready to learn the most popular tool in the world: **Git**.
64+
65+
:::tip Fun Fact
66+
The most popular VCS today, **Git**, was created by **Linus Torvalds** in just 10 days because he was unhappy with the other tools available for building the Linux kernel!
67+
:::

0 commit comments

Comments
 (0)