Версіонування коду, командна робота та портфоліо розробника — все в одному!
📚 Урок 6 • DevTools • 25 хв читанняGit — це система контролю версій (VCS — Version Control System). Вона відстежує зміни у файлах та дозволяє повертатися до будь-якої попередньої версії коду.
Уяви, що 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 у тебе буде один файл з повною історією всіх змін!
Кожна зміна записується. Хто, коли, що змінив — все видно!
Зламав код? Поверни попередню версію за секунду!
Працюй над фічами паралельно, не ламаючи основний код
Багато людей працюють над одним проєктом без конфліктів
Код на GitHub — завжди є копія в хмарі
GitHub профіль — твоє резюме для роботодавців!
Існують також GitLab, Bitbucket, Azure DevOps — вони всі працюють з Git. GitHub просто найпопулярніший!
Можливо, Git вже встановлено! Відкрий термінал та введи git --version. Якщо бачиш версію — все готово!
Перейди на git-scm.com та завантаж інсталятор
Залиш всі налаштування за замовчуванням — вони оптимальні!
Щоб Git став доступний у терміналі
# Git зазвичай вже встановлений на Mac # Якщо ні — встанови через Homebrew: brew install git # Або просто введи git — система запропонує встановити
# Ubuntu / Debian sudo apt update && sudo apt install git # Fedora sudo dnf install git
Після встановлення познайом Git з собою:
# Встанови своє ім'я (буде в історії комітів) git config --global user.name "Твоє Ім'я" # Встанови свій email (такий самий як на GitHub!) git config --global user.email "твій@email.com" # Перевір налаштування git config --list
Перед тим як писати команди, розберемо ключові терміни:
Папка проєкту + прихована папка .git з усією історією. Скорочено: repo
"Знімок" стану проєкту в певний момент. Як save point у грі!
Паралельна лінія розробки. Головна гілка — main (або master)
Об'єднання змін з однієї гілки в іншу
Репозиторій на сервері (GitHub). Зазвичай називається origin
Push — відправити зміни на GitHub. Pull — завантажити зміни з GitHub
Скопіювати репозиторій з GitHub на свій комп'ютер
Відмітити файли для наступного коміту. "Підготовча зона"
# Створи новий репозиторій у поточній папці git init # Або клонуй існуючий репозиторій з GitHub git clone https://github.com/username/repo-name.git # Клонувати в конкретну папку git clone https://github.com/username/repo.git my-folder
# Показати статус (змінені/нові файли) git status # Короткий статус git status -s # Історія комітів git log --oneline
# 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"
Пиши повідомлення як команду: "Add login page", "Fix navbar bug", "Update README". Не "changes" чи "fix" — це неінформативно!
# Показати всі гілки 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
# 1. Переключись на гілку, КУДИ хочеш влити зміни git checkout main # 2. Влий зміни з іншої гілки git merge feature-login # Якщо є конфлікти — Git покаже їх у файлах
# Підключити віддалений репозиторій 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 встановлено
# Скасувати зміни у файлі (до останнього коміту) 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
git reset --hard видаляє зміни назавжди! Використовуй з розумом. --soft безпечніший — він зберігає зміни.
Перейди на github.com та зареєструйся. Вибери username — це буде твоя айдентика!
У верхньому правому куті GitHub
Назва репозиторію, опис, Public/Private, README
GitHub покаже інструкції для підключення локального репо
# Якщо проєкт НОВИЙ (ще немає 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 більше не приймає паролі. Використовуй один з методів:
Налаштуй один раз — працює завжди. Безпечно та зручно!
Згенеруй токен у Settings → Developer settings → Tokens
Встанови gh та авторизуйся через gh auth login
# 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 вказує Git, які файли НЕ потрібно відстежувати.
# Залежності 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
# 1. Завантаж останні зміни git pull # 2. Працюй над кодом... # 3. Перевір що змінилось git status # 4. Додай та закоміть git add . git commit -m "Add user profile page" # 5. Відправ на GitHub git push
# 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
PR — це запит на злиття твоєї гілки в main. Команда переглядає код (code review), залишає коментарі, і тільки після схвалення код потрапляє в production!
VS Code має вбудовану підтримку Git — не обов'язково все робити в терміналі!
Клікни на іконку гілки зліва (Ctrl+Shift+G) — побачиш всі зміни
Наведи на файл → натисни + для git add
Напиши повідомлення → натисни ✓ або Ctrl+Enter
Кнопка sync = pull + push одночасно
Клікни на назву гілки внизу — перемикай та створюй гілки
Клікни на файл — побачиш зміни порівняно з попередньою версією
Показує хто і коли змінив кожен рядок. Git blame, history, і багато іншого!
Візуалізація історії комітів та гілок у вигляді графіка
Працюй з PR прямо у VS Code без браузера
Твій GitHub профіль — це резюме для роботодавців! Зроби його привабливим:
Додай професійне фото або впізнаваний аватар
Короткий опис: хто ти, чим займаєшся, що шукаєш
Закріпи 6 найкращих проєктів на головній сторінці
Створи репо з ім'ям = username — це буде твоя візитівка!
Зелений графік — показник активності. Комітти щодня!
Кожен проєкт має мати README з описом, скріншотами, інструкціями
Створи репозиторій з назвою = твій username (наприклад, kudik/kudik). README.md з цього репо буде показуватися на головній сторінці профілю!
Альтернатива merge для чистішої історії
Копіювання конкретних комітів між гілками
Тимчасове збереження незакомічених змін
Маркування версій (v1.0.0, v2.0.0)
CI/CD автоматизація: тести, деплой
Безкоштовний хостинг для статичних сайтів