01 · Знайомство

Що таке GitHub?

Простими словами

GitHub — це хмарне сховище для вашого коду.

Уявіть Google Диск, але спеціально для програмістів. Ви зберігаєте файли проєкту онлайн і можете повернутися до будь-якої попередньої версії.

Навіть якщо ви єдиний розробник — GitHub потрібен, бо код зберігається надійно у хмарі.

Навіщо вам це?

Код не загубиться, навіть якщо зламається комп'ютер

Vercel бере код прямо з GitHub для публікації

Можна відкатити зміни, якщо щось зламалось

Це ваше портфоліо як розробника

02 · Словник

Ключові терміни — Частина 1

Repository (Репо)

Папка вашого проєкту на GitHub. Один проєкт = один репозиторій.

Clone (Клонувати)

Скопіювати весь репозиторій з GitHub на свій комп'ютер для роботи.

Commit (Коміт)

Зберегти зміни з описом, що саме ви змінили. Як «зберегти гру».

Push (Пуш)

Відправити ваші коміти з комп'ютера на GitHub у хмару.

02 · Словник (продовження)

Ключові терміни — Частина 2

Pull (Пул)

Завантажити нові зміни з GitHub на ваш комп'ютер. Оновити локальну копію.

Branch (Гілка)

Окрема копія коду для експериментів, щоб не зламати основну версію.

Main / Master

Головна гілка проєкту. Тут живе стабільна, робоча версія коду.

Merge (Злиття)

Об'єднати зміни з окремої гілки назад у головну гілку проєкту.

03 · Ваш стек

Три сервіси = готовий сайт

GitHub

Зберігає ваш код. Vercel бере звідси файли для публікації сайту.

Supabase

Зберігає дані: користувачів, товари, замовлення. Замінює сервер + базу даних.

Vercel

Публікує сайт в інтернеті. Автоматично оновлює при кожному push.

Всі три сервіси безкоштовні для персональних проєктів!

04 · Що ще варто знати

Важливі файли проєкту

`.env`

Секрети проєкту: ключі API, паролі баз даних. Ніколи не завантажуйте на GitHub! Додайте у .gitignore

`.gitignore`

Список файлів, які Git ігнорує: node_modules, .env, тимчасові файли. Claude Code створить його за вас.

`README.md`

«Візитівка» проєкту. Опис, інструкції, скріншоти. GitHub показує його на головній сторінці репозиторію.

`package.json`

«Рецепт» проєкту: які бібліотеки потрібні, як запустити. npm install встановить все за цим файлом.

05 · Команди

Команди для Claude Code — Старт

1. Створення

Створи новий проєкт Next.js у папці my-site

Claude Code ініціалізує проєкт з усіма потрібними файлами

2. Ініціалізація Git

Ініціалізуй git репозиторій та створи .gitignore

Підготує систему контролю версій і виключить зайві файли

3. Перший Push

Створи репозиторій на GitHub і зроби перший push

Ваш код вперше потрапляє у хмару. Після цього Vercel зможе його побачити.

05 · Команди (продовження)

Щоденна робота

Перевірка

Покажи статус git — що змінено?

Перевіряє які файли ви змінили після останнього коміту

Збереження

Зроби коміт з описом "додав сторінку контактів"

Зберігає зміни з зрозумілим описом. Завжди описуйте ЩО змінили.

Публікація

Зроби push на GitHub

Відправляє коміти в хмару. Vercel автоматично оновить сайт!

Оновлення

Зроби pull з GitHub

Завантажує нові зміни. Потрібно, якщо редагували код з іншого пристрою.

06 · Безпека

Чого НІКОЛИ не робити!

⛔ НЕ завантажуйте .env файли на GitHub

Там ваші секретні ключі. Боти сканують GitHub і крадуть їх за хвилини!

⛔ НЕ робіть git push --force

Це перезаписує історію і може знищити роботу. Попросіть Claude Code знайти безпечний спосіб.

⛔ НЕ редагуйте код прямо на GitHub

Редагуйте через Claude Code локально, потім push. Інакше виникнуть конфлікти.

⛔ НЕ ігноруйте помилки при push

Якщо push не пройшов — спитайте Claude Code чому. Зазвичай потрібен pull спочатку.

07 · Процес

Від ідеї до сайту

Кажете Claude Code створити проєкт

Описуєте що хочете: «Створи сайт-візитку для кав'ярні»

Claude Code ініціалізує Git і створює репо на GitHub

Бот зробить все автоматично: init, commit, push

Підключаєте Vercel до вашого GitHub репозиторію

Один раз на сайті vercel.com — далі все автоматично

Додаєте ключі Supabase у Vercel (Environment Variables)

Секрети зберігаються на Vercel, а не в коді

Кожен push = автоматичне оновлення сайту!

Vercel помічає новий код на GitHub і перебудовує сайт

Крок 3 робиться один раз. Далі просто push — і сайт оновлений!

08 · Шпаргалка

Що казати Claude Code

Ситуація	Що написати боту
Почати новий проєкт	Створи Next.js проєкт, ініціалізуй git, створи репо на GitHub
Зберегти прогрес	Зроби коміт і push з описом "назва змін"
Перевірити стан	Покажи git status і git log останніх 5 комітів
Щось зламалось	Покажи різницю з попереднім комітом (git diff)
Відкатити зміни	Поверни файл X до попередньої версії
Оновити з GitHub	Зроби git pull і покажи що змінилось

Ви готові починати!

Головне правило: не бійтеся експериментувати.

GitHub зберігає код — це ваша страховка

Supabase зберігає дані — база даних у хмарі

Vercel публікує сайт — автоматично при push

Claude Code робить всю технічну роботу за вас

Просто пишіть боту що хочете зробити — він розбереться!

GitHub для початківців