Основи Git — система контролю версій

Уяви, що ти пишеш курсову роботу. Спочатку зберігаєш файл як курсова.docx, потім курсова_v2.docx, курсова_фінал.docx, курсова_фінал_ТОЧНО_ФІНАЛ.docx... Знайомо? Git вирішує цю проблему раз і назавжди.

Що таке Git?

Git — це система контролю версій (Version Control System, VCS). Вона відстежує всі зміни у файлах проєкту та дозволяє:

• Зберігати історію — кожна зміна записується назавжди
• Повертатися назад — якщо щось зламалось, можна відкотити
• Працювати в команді — кілька людей можуть працювати над одним проєктом
• Експериментувати — створювати гілки для нових фіч без ризику

Як працює Git: три зони

Git має три основні зони, через які проходять твої зміни:

Три зони Git: робоча директорія, staging area та репозиторій

Встановлення Git

macOS

# Через Homebrew (рекомендовано)
brew install git

# Або через Xcode Command Line Tools
xcode-select --install

Windows

Завантаж інсталятор з git-scm.com та встанови з налаштуваннями за замовчуванням.

Linux (Ubuntu/Debian)

sudo apt update
sudo apt install git

Перевірка встановлення

git --version
# git version 2.43.0

Початкове налаштування

Після встановлення вкажи своє ім'я та email — вони будуть у кожному коміті:

git config --global user.name "Твоє Ім'я"
git config --global user.email "tvij@email.com"

Створення репозиторію

Репозиторій (repo) — це папка проєкту, яку відстежує Git.

# Створюємо папку проєкту
mkdir my-project
cd my-project

# Ініціалізуємо Git репозиторій
git init

Після git init з'являється прихована папка .git/ — це і є репозиторій. Ніколи не видаляй її вручну!

# Переконаємось, що все працює
git status

Побачиш щось на кшталт:

On branch main
No commits yet
nothing to commit

Перший коміт

Коміт — це "знімок" стану проєкту в конкретний момент часу. Як фото у фотоальбомі.

Ланцюжок комітів у Git

Кожен коміт містить:

• Хеш — унікальний ідентифікатор (наприклад, a3f2b1c)
• Автор — хто зробив зміни
• Дата — коли
• Повідомлення — опис що змінилось
• Зміни — які файли та рядки змінились

Робимо перший коміт

# 1. Створюємо файл
echo "# My Project" > README.md

# 2. Перевіряємо статус — файл "untracked" (не відстежується)
git status

# 3. Додаємо файл у staging area
git add README.md

# 4. Перевіряємо — файл тепер "staged" (готовий до коміту)
git status

# 5. Робимо коміт з описовим повідомленням
git commit -m "Додано README файл"

Статуси файлів

Файли у Git проходять через кілька статусів:

Untracked → Staged → Committed → Modified → Staged → Committed → ...

Корисні команди для роботи з файлами

# Додати конкретний файл
git add index.html

# Додати кілька файлів
git add index.html style.css

# Додати всі файли в поточній папці
git add .

# Прибрати файл зі staging area (не видаляє файл!)
git restore --staged index.html

# Скасувати зміни у файлі (повернути до останнього коміту)
git restore index.html

Перегляд історії

# Повна історія комітів
git log

# Компактний вигляд (один рядок на коміт)
git log --oneline

# Показати зміни в кожному коміті
git log -p

# Останні 5 комітів
git log -5

Приклад виводу git log --oneline:

c9a1f3d Виправлено CSS стилі таблиці
b7d4e2f Додано навігацію між сторінками
a3f2b1c Початковий коміт — створено 3 HTML-сторінки

Що таке гілки?

Гілка (branch) — це незалежна лінія розробки. Уяви дерево: стовбур — це основна гілка (main), а від нього ростуть інші гілки для нових функцій.

Візуалізація гілок в Git

Навіщо потрібні гілки?

• Ізоляція — працюєш над новою функцією, не ламаючи робочий код
• Паралельна робота — кілька людей працюють над різними функціями одночасно
• Експерименти — можеш спробувати ідею і видалити гілку, якщо не сподобалось

Основні команди для гілок

# Подивитися всі гілки (* = поточна)
git branch

# Створити нову гілку
git branch feature/navigation

# Переключитися на гілку
git checkout feature/navigation

# Створити і переключитися одночасно (shortcut)
git checkout -b feature/navigation

# Видалити гілку (після merge)
git branch -d feature/navigation

Злиття гілок (Merge)

Коли робота на гілці завершена, її потрібно злити (merge) назад у main.

Два типи злиття в Git: fast-forward та three-way merge

Як зробити merge

# 1. Переключаємось на main
git checkout main

# 2. Зливаємо гілку feature/navigation у main
git merge feature/navigation

# 3. Видаляємо гілку (вона більше не потрібна)
git branch -d feature/navigation

Конфлікти злиття

Іноді Git не може автоматично злити зміни — коли дві гілки змінили один і той самий рядок в одному файлі. Це називається конфлікт.

Git покаже конфлікт прямо у файлі:

<<<<<<< HEAD
<h1>Головна сторінка</h1>
=======
<h1>Ласкаво просимо!</h1>
>>>>>>> feature/navigation

Щоб вирішити конфлікт:

1. Відкрий файл у редакторі
2. Видали маркери <<<<<<<, =======, >>>>>>>
3. Залиш потрібний варіант (або комбінацію обох)
4. Збережи файл
5. git add . та git commit

Файл .gitignore

Деякі файли не повинні потрапляти в репозиторій:

• node_modules/ — залежності (завантажуються через npm install)
• .env — секретні ключі та паролі
• .DS_Store — системні файли macOS
• dist/ або .next/ — згенеровані файли

Створи файл .gitignore в корені проєкту:

# Залежності
node_modules/

# Змінні середовища
.env
.env.local

# Системні файли
.DS_Store
Thumbs.db

# Згенеровані файли
dist/
.next/
build/

Шпаргалка команд

Практика: типовий робочий процес

Ось як виглядає типовий день розробника з Git:

# 1. Створюємо гілку для нової функції
git checkout -b feature/contacts-page

# 2. Працюємо над файлами...
# (створюємо contacts.html, редагуємо index.html)

# 3. Перевіряємо що змінилось
git status
git diff

# 4. Додаємо та комітимо
git add .
git commit -m "Додано сторінку контактів з формою зворотнього зв'язку"

# 5. Переключаємось на main і зливаємо
git checkout main
git merge feature/contacts-page

# 6. Видаляємо гілку
git branch -d feature/contacts-page

Інтерактивні тренажери

Хочеш попрактикуватись з Git у браузері? Ось корисні ресурси:

• Learn Git Branching — інтерактивний тренажер з візуалізацією (є українська!)
• Git How To — покрокова інструкція українською
• Oh My Git! — гра для вивчення Git

Підсумок

У цьому уроці ми вивчили:

• Git — система контролю версій, яка зберігає історію всіх змін
• Три зони — робоча директорія → staging area → репозиторій
• Коміт — знімок стану проєкту з описом змін
• Гілки — паралельні лінії розробки для ізольованої роботи
• Merge — злиття гілок (fast-forward або three-way)
• Конфлікти — виникають коли дві гілки змінюють одне й те саме
• .gitignore — список файлів, які Git повинен ігнорувати

Що далі?

У наступному уроці ми вивчимо GitHub — як працювати з віддаленими репозиторіями, push, pull та clone.