GitHub та віддалені репозиторії

GitHub та віддалені репозиторії — два ноутбуки з'єднані світловим мостом для обміну файлами

У минулому уроці ми навчилися працювати з Git локально — робити коміти, створювати гілки та зливати їх. Але поки що весь код живе тільки на твоєму комп'ютері. Що буде, якщо ноутбук зламається? Як показати код другу? Як працювати в команді?

Відповідь — віддалені репозиторії та GitHub.

Що таке репозиторій?

Слово repository (скорочено repo) перекладається як "сховище". І це точно описує суть: репозиторій — це сховище для коду та всієї його історії.

У минулому уроці ми створювали локальний репозиторій командою git init. Він живе на твоєму комп'ютері — в прихованій папці .git/ всередині проєкту. Тут зберігаються всі коміти, гілки, історія змін.

Віддалений (remote) репозиторій — це та сама інформація, але на сервері в інтернеті. Локальний і віддалений — це дві копії одного проєкту, які синхронізуються між собою.

Git ≠ GitHub

Це дуже поширена плутанина серед початківців, тому давай розставимо крапки:

Git — це інструмент. GitHub — це платформа, де люди зберігають та діляться Git-репозиторіями. Можна працювати з Git без GitHub, але з ним значно зручніше.

Альтернативи GitHub

GitHub — не єдиний сервіс для зберігання репозиторіїв:

Створення акаунту на GitHub

1. Перейди на github.com та натисни Sign up
2. Введи email, придумай пароль та username
3. Підтверди email

Push, Pull, Clone — як синхронізуватися?

Уяви, що локальний репозиторій — це гра на твоєму комп'ютері, а GitHub — хмарне збереження (cloud save). Є три основні операції:

• Push — зберегти гру в хмару (відправити свої коміти на GitHub)
• Pull — завантажити збереження з хмари (отримати нові коміти з GitHub)
• Clone — вперше завантажити гру на новий пристрій (скопіювати весь проєкт з GitHub)

Тобто ти працюєш локально, робиш коміти — а потім push відправляє їх на сервер. Якщо хтось інший (або ти з іншого комп'ютера) додав зміни на GitHub — pull завантажить їх до тебе.

Авторизація: як GitHub знає, що це ти?

Коли ти вперше спробуєш git push, GitHub запитає: "А ти хто?". Є два способи "представитися":

Спосіб 1: HTTPS + Personal Access Token (простіший)

1. На GitHub: Settings → Developer Settings → Personal Access Tokens → Tokens (classic)
2. Натисни Generate new token (classic)
3. Дай йому назву (наприклад, "мій ноутбук"), обери scope repo
4. Скопіюй токен (він показується тільки один раз!)
5. При першому git push використай токен замість пароля

Спосіб 2: SSH-ключ (зручніший у довгостроковій перспективі)

SSH-ключ — це як електронний підпис. Налаштовуєш один раз — і більше не вводиш паролі:

# 1. Генеруємо SSH-ключ
ssh-keygen -t ed25519 -C "tvij@email.com"
# Просто натискай Enter на всі питання

# 2. Копіюємо публічний ключ
cat ~/.ssh/id_ed25519.pub
# Скопіюй весь рядок що з'явився

3. На GitHub: Settings → SSH and GPG keys → New SSH key
4. Вставляєш скопійований ключ і зберігаєш

Після цього клонуй репозиторії через SSH URL (починається з git@github.com:...).

Спосіб 1: Створити на GitHub → Clone на комп'ютер

Найпростіший спосіб почати новий проєкт:

На GitHub:

1. Натисни "+" → "New repository"
2. Введи назву (наприклад, my-first-site)
3. Постав галочку "Add a README file"
4. Натисни "Create repository"

У терміналі:

git clone — клонування репозиторію з GitHub

# Клонуємо репозиторій (створює папку з проєктом)
git clone https://github.com/твій-username/my-first-site.git

# Заходимо в папку
cd my-first-site

# Перевіряємо — remote вже підключений!
git remote -v

Побачиш:

origin  https://github.com/твій-username/my-first-site.git (fetch)
origin  https://github.com/твій-username/my-first-site.git (push)

origin — це стандартна назва для віддаленого репозиторію. Як "головний сервер".

Спосіб 2: Підключити існуючий проєкт

Якщо ти вже маєш проєкт з Git на комп'ютері (наприклад, pizza-site з минулого уроку) — його можна підключити до GitHub:

На GitHub:

1. Створи порожній репозиторій (без README, без .gitignore — бо вони вже є локально)

У терміналі:

# Підключаємо remote
git remote add origin https://github.com/твій-username/pizza-site.git

# Перший push (-u запам'ятовує зв'язок між гілками)
git push -u origin main

Щоденний робочий процес

Після того як remote підключений, робочий процес стає простим:

Щоденний робочий процес: pull, add, commit, push

# 1. Отримуємо останні зміни з GitHub (важливо, якщо працюєш в команді)
git pull

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

# 3. Зберігаємо зміни
git add .
git commit -m "Додано стилі для навігації"

# 4. Відправляємо на GitHub
git push

Запам'ятай цю звичку: pull → робота → add → commit → push. Це як ранковий ритуал розробника.

Що таке Pull Request?

Pull Request (PR) — це запит на додавання твоїх змін у основну гілку. Замість того щоб зливати гілки на своєму комп'ютері (як ми робили з git merge), ти робиш це на GitHub, де інші можуть переглянути твій код.

Як це виглядає на практиці:

# 1. Створюємо гілку і працюємо
git checkout -b feature/footer
# ... пишемо код ...
git add .
git commit -m "Додано футер з контактами та посиланнями"

# 2. Пушимо гілку на GitHub
git push -u origin feature/footer

Далі — на GitHub:

3. Побачиш кнопку "Compare & pull request" — натискаєш
4. Пишеш опис: що зробив, навіщо, як перевірити
5. Колега (або вчитель) переглядає код, залишає коментарі
6. Після затвердження — натискаєш "Merge pull request"

Типові помилки новачків

Практика: повний цикл з GitHub

Давай пройдемо весь процес від створення до push:

# 1. Створюємо проєкт
mkdir my-portfolio && cd my-portfolio
git init

# 2. Створюємо файли
echo "# Моє портфоліо" > README.md
touch index.html style.css
echo "node_modules/" > .gitignore

# 3. Перший коміт
git add .
git commit -m "Початковий коміт — каркас портфоліо"

Тепер на GitHub створи порожній репозиторій my-portfolio, і:

# 4. Підключаємо remote і пушимо
git remote add origin https://github.com/твій-username/my-portfolio.git
git push -u origin main

Відкрий github.com/твій-username/my-portfolio у браузері — побачиш свої файли. Твій перший проєкт на GitHub!

Шпаргалка нових команд

Підсумок

У цьому уроці ми дізналися:

• Git і GitHub — різні речі: інструмент на комп'ютері vs платформа в інтернеті
• Remote — віддалена копія репозиторію на GitHub
• Clone — скопіювати проєкт з GitHub на свій комп'ютер
• Push/Pull — відправка та отримання змін
• Авторизація — через HTTPS-токен або SSH-ключ
• Pull Request — культурний спосіб додавати код через перевірку

Що далі?

У наступному уроці ми налаштуємо Node.js, npm та VS Code — інструменти, без яких не обходиться жоден сучасний веб-розробник.