0
Koodi Прогрес
Поточний:0 днів
Рекорд:0 днів
Без активності
Активний день
Сьогодні
🐙

Git та GitHub

Версіонування коду, командна робота та портфоліо розробника — все в одному!

🤔 Що таке Git?

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

🦉
Кудик пояснює:

Уяви, що Git — це машина часу для твого коду! 🕐 Зробив помилку? Повернись назад! Хочеш експериментувати? Створи паралельну реальність (гілку)! Працюєш з командою? Git об'єднає всі зміни!

😰 Проблема без Git

Знайомо?

📁 Папка проєкту без Git
project/
├── 📄 index.html
├── 📄 index_backup.html
├── 📄 index_old.html
├── 📄 index_final.html
├── 📄 index_final_v2.html
├── 📄 index_FINAL_FINAL.html
├── 📄 index_real_final.html
└── 📄 index_use_this_one.html   😭

З Git у тебе буде один файл з повною історією всіх змін!

✨ Що дає Git?

📜

Історія змін

Кожна зміна записується. Хто, коли, що змінив — все видно!

Відкат змін

Зламав код? Поверни попередню версію за секунду!

🌿

Гілки (Branches)

Працюй над фічами паралельно, не ламаючи основний код

👥

Командна робота

Багато людей працюють над одним проєктом без конфліктів

☁️

Резервне копіювання

Код на GitHub — завжди є копія в хмарі

💼

Портфоліо

GitHub профіль — твоє резюме для роботодавців!

🐙 Git vs GitHub — в чому різниця?

Git 🔧 GitHub 🐙
Що це? Програма Веб-сервіс
Де працює? Локально на твоєму ПК В хмарі (інтернет)
Функція Версіонування коду Хостинг репозиторіїв + соцмережа
Аналогія Редактор відео YouTube для відео
💡
Альтернативи GitHub

Існують також GitLab, Bitbucket, Azure DevOps — вони всі працюють з Git. GitHub просто найпопулярніший!

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

Швидка перевірка

Можливо, Git вже встановлено! Відкрий термінал та введи git --version. Якщо бачиш версію — все готово!

🪟 Windows

1

Завантаж Git

Перейди на git-scm.com та завантаж інсталятор

2

Запусти інсталятор

Залиш всі налаштування за замовчуванням — вони оптимальні!

3

Перезапусти VS Code

Щоб Git став доступний у терміналі

🍎 macOS

Terminal
1
2
3
4
5
# Git зазвичай вже встановлений на Mac
# Якщо ні — встанови через Homebrew:
brew install git

# Або просто введи git — система запропонує встановити

🐧 Linux

Terminal
1
2
3
4
5
# Ubuntu / Debian
sudo apt update && sudo apt install git

# Fedora
sudo dnf install git

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

Після встановлення познайом Git з собою:

Terminal — налаштування Git
1
2
3
4
5
6
7
8
# Встанови своє ім'я (буде в історії комітів)
git config --global user.name "Твоє Ім'я"

# Встанови свій email (такий самий як на GitHub!)
git config --global user.email "твій@email.com"

# Перевір налаштування
git config --list

📚 Основні концепції

Перед тим як писати команди, розберемо ключові терміни:

📁

Repository (Репозиторій)

Папка проєкту + прихована папка .git з усією історією. Скорочено: repo

📸

Commit (Коміт)

"Знімок" стану проєкту в певний момент. Як save point у грі!

🌿

Branch (Гілка)

Паралельна лінія розробки. Головна гілка — main (або master)

🔀

Merge (Злиття)

Об'єднання змін з однієї гілки в іншу

☁️

Remote (Віддалений)

Репозиторій на сервері (GitHub). Зазвичай називається origin

📤📥

Push / Pull

Push — відправити зміни на GitHub. Pull — завантажити зміни з GitHub

📋

Clone (Клонування)

Скопіювати репозиторій з GitHub на свій комп'ютер

📝

Stage (Індексація)

Відмітити файли для наступного коміту. "Підготовча зона"

🎯 Візуалізація Git workflow

📁
Working Directory
Твої файли
📋
Staging Area
git add
📸
Local Repo
git commit
☁️
Remote (GitHub)
git push

⌨️ Основні команди Git

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

Terminal — ініціалізація
1
2
3
4
5
6
7
8
9
10
# Створи новий репозиторій у поточній папці
git init

# Або клонуй існуючий репозиторій з GitHub
git clone https://github.com/username/repo-name.git

# Клонувати в конкретну папку
git clone https://github.com/username/repo.git my-folder

📊 Перевірка статусу

Terminal — статус
1
2
3
4
5
6
7
8
# Показати статус (змінені/нові файли)
git status

# Короткий статус
git status -s

# Історія комітів
git log --oneline

📸 Створення коміту

Terminal — коміт
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 1. Додай файли до staging area
git add index.html          # один файл
git add .                   # всі змінені файли
git add src/                # всю папку
git add *.js                # всі .js файли

# 2. Створи коміт з повідомленням
git commit -m "Add homepage layout"

# Швидкий коміт (add + commit одразу)
git commit -am "Fix button styles"

# Змінити останній коміт
git commit --amend -m "New message"
💡
Гарні commit messages

Пиши повідомлення як команду: "Add login page", "Fix navbar bug", "Update README". Не "changes" чи "fix" — це неінформативно!

🌿 Робота з гілками

Terminal — гілки
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Показати всі гілки
git branch

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

# Переключитись на гілку
git checkout feature-login
# або (сучасніший спосіб)
git switch feature-login

# Створити + переключитись одразу
git checkout -b feature-login
git switch -c feature-login

# Видалити гілку
git branch -d feature-login

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

Terminal — merge
1
2
3
4
5
6
7
# 1. Переключись на гілку, КУДИ хочеш влити зміни
git checkout main

# 2. Влий зміни з іншої гілки
git merge feature-login

# Якщо є конфлікти — Git покаже їх у файлах

☁️ Робота з GitHub (Remote)

Terminal — push/pull
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Підключити віддалений репозиторій
git remote add origin https://github.com/user/repo.git

# Перевірити підключені remote
git remote -v

# Відправити зміни на GitHub
git push origin main
git push -u origin main  # перший раз (встановлює upstream)
git push                 # після -u можна просто так

# Завантажити зміни з GitHub
git pull origin main
git pull                 # якщо upstream встановлено

⏪ Скасування змін

Terminal — undo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Скасувати зміни у файлі (до останнього коміту)
git checkout -- index.html
git restore index.html      # сучасний спосіб

# Прибрати файл зі staging area
git reset HEAD index.html
git restore --staged index.html

# Скасувати останній коміт (зберегти зміни)
git reset --soft HEAD~1

# Повністю видалити останній коміт
git reset --hard HEAD~1
⚠️
Обережно з --hard!

git reset --hard видаляє зміни назавжди! Використовуй з розумом. --soft безпечніший — він зберігає зміни.

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

Ініціалізація
git init
Клонувати
git clone URL
Статус
git status
Додати файли
git add .
Коміт
git commit -m "msg"
Історія
git log --oneline
Нова гілка
git branch name
Перемкнути гілку
git switch name
Злити гілку
git merge name
Push
git push
Pull
git pull
Скасувати зміни
git restore file

🐙 GitHub — початок роботи

📝 Крок 1: Створи акаунт

Перейди на github.com та зареєструйся. Вибери username — це буде твоя айдентика!

🆕 Крок 2: Створи репозиторій

1

Натисни "New" або "+"

У верхньому правому куті GitHub

2

Заповни форму

Назва репозиторію, опис, Public/Private, README

3

Create repository

GitHub покаже інструкції для підключення локального репо

🔗 Крок 3: Підключи локальний проєкт

Terminal — підключення до GitHub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Якщо проєкт НОВИЙ (ще немає git)
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/repo.git
git push -u origin main

# Якщо вже є локальний git репозиторій
git remote add origin https://github.com/username/repo.git
git push -u origin main

# Якщо хочеш скопіювати існуючий репо з GitHub
git clone https://github.com/username/repo.git

🔐 Автентифікація на GitHub

GitHub більше не приймає паролі. Використовуй один з методів:

🔑

SSH ключі (рекомендовано)

Налаштуй один раз — працює завжди. Безпечно та зручно!

🎫

Personal Access Token

Згенеруй токен у Settings → Developer settings → Tokens

🖥️

GitHub CLI

Встанови gh та авторизуйся через gh auth login

🔑 Налаштування SSH

Terminal — SSH ключі
1
2
3
4
5
6
7
8
9
10
11
# 1. Згенеруй SSH ключ
ssh-keygen -t ed25519 -C "твій@email.com"

# 2. Скопіюй публічний ключ
cat ~/.ssh/id_ed25519.pub
# Або на Windows: type %USERPROFILE%\.ssh\id_ed25519.pub

# 3. Додай ключ на GitHub:
#    Settings → SSH and GPG keys → New SSH key

# 4. Тепер можеш клонувати через SSH:
git clone git@github.com:username/repo.git

🙈 .gitignore — що ігнорувати

Файл .gitignore вказує Git, які файли НЕ потрібно відстежувати.

.gitignore — приклад
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# Залежності
node_modules/
vendor/
.venv/

# Змінні оточення (СЕКРЕТИ!)
.env
.env.local
*.env

# Білди та кеш
dist/
build/
.cache/
*.log

# IDE та редактори
.idea/
.vscode/
*.swp

# OS файли
.DS_Store
Thumbs.db
🔐
НІКОЛИ не комітти!

.env файли з паролями та API ключами, node_modules (величезна папка), особисті налаштування IDE. Якщо випадково закомітив — ключі вже в історії, їх треба змінити!

🔗 Готові шаблони: github.com/github/gitignore

🔄 Типовий Git Workflow

👤 Сольна робота

Щоденний workflow
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 1. Завантаж останні зміни
git pull

# 2. Працюй над кодом...

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

# 4. Додай та закоміть
git add .
git commit -m "Add user profile page"

# 5. Відправ на GitHub
git push

👥 Командна робота (Feature Branch)

Feature Branch Workflow
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 1. Оновись з main
git checkout main
git pull

# 2. Створи нову гілку для фічі
git checkout -b feature/user-auth

# 3. Працюй, комітти...
git add .
git commit -m "Add login form"
git commit -m "Add validation"

# 4. Відправ гілку на GitHub
git push -u origin feature/user-auth

# 5. Створи Pull Request на GitHub
# 6. Після code review — merge в main
# 7. Видали локальну гілку
git branch -d feature/user-auth
🦉
Pull Request (PR)

PR — це запит на злиття твоєї гілки в main. Команда переглядає код (code review), залишає коментарі, і тільки після схвалення код потрапляє в production!

🎨 Git у VS Code

VS Code має вбудовану підтримку Git — не обов'язково все робити в терміналі!

📊

Source Control Panel

Клікни на іконку гілки зліва (Ctrl+Shift+G) — побачиш всі зміни

Stage файли

Наведи на файл → натисни + для git add

✍️

Коміт

Напиши повідомлення → натисни ✓ або Ctrl+Enter

🔄

Sync

Кнопка sync = pull + push одночасно

🌿

Гілки

Клікни на назву гілки внизу — перемикай та створюй гілки

🔍

Diff

Клікни на файл — побачиш зміни порівняно з попередньою версією

🧩 Корисні розширення

📜

GitLens

Показує хто і коли змінив кожен рядок. Git blame, history, і багато іншого!

📊

Git Graph

Візуалізація історії комітів та гілок у вигляді графіка

🐙

GitHub Pull Requests

Працюй з PR прямо у VS Code без браузера

GitHub як портфоліо

Твій GitHub профіль — це резюме для роботодавців! Зроби його привабливим:

📸

Фото профілю

Додай професійне фото або впізнаваний аватар

📝

Bio

Короткий опис: хто ти, чим займаєшся, що шукаєш

📌

Pinned repos

Закріпи 6 найкращих проєктів на головній сторінці

📖

README профілю

Створи репо з ім'ям = username — це буде твоя візитівка!

🟢

Contribution Graph

Зелений графік — показник активності. Комітти щодня!

📚

Хороші README

Кожен проєкт має мати README з описом, скріншотами, інструкціями

💡
Profile README

Створи репозиторій з назвою = твій username (наприклад, kudik/kudik). README.md з цього репо буде показуватися на головній сторінці профілю!

🎯 Що вивчати далі?

🔀

Git Rebase

Альтернатива merge для чистішої історії

🍒

Cherry-pick

Копіювання конкретних комітів між гілками

📦

Git Stash

Тимчасове збереження незакомічених змін

🏷️

Git Tags

Маркування версій (v1.0.0, v2.0.0)

🤖

GitHub Actions

CI/CD автоматизація: тести, деплой

🌐

GitHub Pages

Безкоштовний хостинг для статичних сайтів

🎮 Вивчай Git на Koodi!

🚀 Перейти до курсів
✅ Практичні завдання ✅ Реальні сценарії ✅ GitHub Actions

📚 Корисні ресурси

📖

Pro Git Book

git-scm.com/book — безкоштовна книга українською!

🎮

Learn Git Branching

learngitbranching.js.org — інтерактивний тренажер

📋

Git Cheatsheet

GitHub Cheatsheet — PDF шпаргалка

🎓

GitHub Skills

skills.github.com — офіційні курси GitHub