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

Git система контролю версій — скляні банки з версіями V1 V2 V3 на полиці

У минулому уроці ми навчилися працювати з терміналом — створювати файли, навігувати по папках. Тепер час освоїти інструмент, без якого не працює жоден програміст у світі.

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

Що таке Git?

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

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

Встановлення 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

Бачиш версію — значить Git встановлено. Тепер налаштуємо своє ім'я та email — вони будуть підписані під кожним твоїм комітом:

git config --global user.name "Олексій"
git config --global user.email "oleksiy@example.com"

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

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

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

Переходи між зонами — це дві ключові команди: git add (зі столу в коробку) та git commit (відправити коробку).

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

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

mkdir my-project
cd my-project
git init

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

Перевіримо стан репозиторію:

git status

Побачиш:

On branch main
No commits yet
nothing to commit

git status — це твій найкращий друг. Запускай його часто, і ти завжди будеш знати що відбувається.

Перший коміт

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

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

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

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

Спробуємо зробити перший коміт

Ось як виглядає весь процес: створення файлу, git add, git commit:

Git init, перший коміт: git status, git add, git commit

# 1. Створюємо файл (echo записує текст у файл)
echo "# Мій проєкт" > README.md

# 2. Дивимось статус — файл "untracked" (Git його ще не знає)
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)  (git commit) (змінений) (git add)  (git commit)

Команди для роботи зі статусами

git add index.html          # Додати один файл
git add index.html style.css    # Додати кілька файлів
git add .                   # Додати ВСЕ змінене

git restore --staged index.html  # Прибрати зі staging (не видаляє файл!)
git restore index.html           # Скасувати зміни (повернути до останнього коміту)

Перегляд історії та змін

git log                 # Повна історія комітів
git log --oneline       # Компактно — один рядок на коміт
git log -5              # Тільки останні 5 комітів

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

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

А що якщо хочеш подивитися що саме ти змінив до коміту?

git diff            # Показує всі незакомічені зміни

Git покаже рядки, які додались (+ зеленим) та видалились (- червоним). Дуже корисно перед комітом — перевірити, чи ти не забув щось зайве.

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

Гілка (branch) — це паралельна версія проєкту. Уяви: ти робиш сайт для піцерії. Основна версія працює і всі нею користуються. Раптом тобі прийшла ідея — додати сторінку доставки. Але ти не хочеш ламати робочий сайт, поки експериментуєш.

Рішення — створити гілку. Це як зробити копію проєкту, де ти спокійно працюєш над новою функцією. Основна версія залишається незмінною.

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

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

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

Команди для гілок

Подивись, як виглядає робота з гілками в терміналі — створення, коміт, злиття:

Робота з гілками: checkout -b, commit, merge

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

# Створити нову гілку І переключитися на неї
git checkout -b feature/delivery-page

# Переключитися на іншу гілку
git checkout main

# Видалити гілку (коли вона більше не потрібна)
git branch -d feature/delivery-page

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

Ти попрацював на гілці feature/delivery-page, все готово — час додати ці зміни в основну версію. Це називається злиття (merge).

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

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

# 2. "Вливаємо" гілку delivery-page в main
git merge feature/delivery-page

# 3. Гілка більше не потрібна — видаляємо
git branch -d feature/delivery-page

Конфлікти злиття — це не страшно

Іноді Git не може автоматично злити зміни. Це трапляється, коли дві гілки змінили один і той самий рядок в одному файлі. Наприклад, ти на одній гілці написав <h1>Головна</h1>, а на іншій — <h1>Ласкаво просимо!</h1>.

Git чесно скаже: "Я не знаю яку версію залишити — вирішуй сам". І покаже обидва варіанти прямо у файлі:

<<<<<<< HEAD
<h1>Головна</h1>
=======
<h1>Ласкаво просимо!</h1>
>>>>>>> feature/delivery-page

Що робити:

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

Файл .gitignore

Деякі файли не повинні потрапляти в репозиторій. Наприклад, паролі, тимчасові файли або папки, які можна згенерувати заново. Для цього є файл .gitignore — створи його в корені проєкту:

# Залежності (завантажуються через npm install)
node_modules/

# Секретні ключі та паролі
.env
.env.local

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

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

Git буде повністю ігнорувати все, що перелічене в цьому файлі.

Практика: повний робочий цикл

Давай пройдемо типовий робочий процес від початку до кінця. Відкрий термінал і повторюй:

# 1. Створюємо проєкт і ініціалізуємо Git
mkdir pizza-site && cd pizza-site
git init

# 2. Створюємо перші файли
echo "# Піцерія Маріо" > README.md
touch index.html
git add .
git commit -m "Початковий коміт — створено проєкт"

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

# 4. Додаємо сторінку меню
touch menu.html
git add menu.html
git commit -m "Додано сторінку меню"

# 5. Повертаємось на main і зливаємо
git checkout main
git merge feature/menu-page
git branch -d feature/menu-page

# 6. Дивимось історію
git log --oneline

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

f4a2c1d Додано сторінку меню
a1b3e7f Початковий коміт — створено проєкт

Вітаю — ти щойно пройшов повний цикл: створення → гілка → робота → злиття!

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

Підсумок

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

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

Що далі?

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