# Репозиторій і коміти: як читати сторінку репозиторію

> Що таке репозиторій на GitHub, його сторінка згори донизу, що розповідає окремий коміт і яким має бути добре повідомлення коміту.

- Курс: [Git і GitHub для продактів](https://productovi.com/uk/courses/git-for-product.md)
- Модуль: Git простими словами
- Урок 2/15, ~29 хв
- Джерело: https://productovi.com/uk/courses/git-for-product/reading-a-repository-page

## Що таке репозиторій на GitHub? Сторінка, яку ти відкриватимеш найчастіше

**Alex Tutor:** У твоїй продуктовій команді в Котокормі все починається звідси: `github.com/catchow/website`. **Репозиторій** на GitHub — це файли одного проєкту з усією історією їхніх комітів, а довкола них issues, pull requests і релізи команди. Його сторінка відповідає на більшість щоденних питань ще до того, як ти щось натиснеш.

**Sofia:** Тут багато всього. Кнопки, вкладки, список папок, якийсь текст унизу…

**Alex Tutor:** Прочитаймо її як газету, згори донизу. Я описую вигляд GitHub станом на 2026 рік; кнопки інколи переїжджають, але самі частини лишаються ті самі.

![Людина читає велику газету, зверстану як вебсторінка: шапка, ряд вкладок, список значків папок і блок унизу, усе у вигляді сірих смуг.](https://productovi.com/courses/git-for-product/inline/reading-a-repository-page-illustration-2.webp)

**Alex Tutor:** На самій горі: власник і назва, `catchow / website`, і позначка `Private`, тобто репозиторій бачить лише наша команда. Праворуч три кнопки: `Watch`, `Fork` і `Star`.

```text
Шапка сторінки репозиторію
- [Repository] catchow / website: Власник і назва репозиторію
- [Watch]: Отримувати сповіщення про активність: нові pull requests, issues, релізи
- [Fork]: Створити власну копію репозиторію, тобто форк (у своїй компанії це рідко потрібно)
- [Star]: Додати репозиторій у закладки й показати інтерес
```

**Sofia:** Отже, `Watch` потрібен, якщо я хочу знати про нові pull requests.

**Alex Tutor:** Так. Можна навіть вибрати, за чим стежити: за всім, лише за релізами чи тільки за обговореннями, де тебе згадали.

> **Вправа:** Ти хочеш, щоб GitHub сповіщав тебе про нові pull requests і релізи в `catchow/website`. Яку кнопку натиснути?

## Вкладки, гілки й останній коміт

**Alex Tutor:** Під шапкою ряд вкладок. `Code` це те, де ми зараз. В `Issues` живуть баги й задачі, у `Pull requests` запропоновані зміни, `Actions` запускає автоматичні перевірки й збірки, а `Projects` містить дошки.

**Alex Tutor:** Наступний ряд: перемикач гілок, де вибрано `main`, і лічильники гілок і тегів. Файли нижче завжди належать вибраній гілці.

**Alex Tutor:** Далі смужка з **останнім комітом** у цій гілці: аватар та ім'я автора, повідомлення, короткий хеш і «3 days ago». На її правому краї лічильник на кшталт `412 Commits`, який відкриває всю історію.

**Sofia:** А нижче папки й файли.

**Alex Tutor:** Так, і кожен рядок там має дві додаткові колонки: повідомлення останнього коміту, що зачепив цей файл, і як давно це було. Під списком GitHub показує `README`, вступ до проєкту від самої команди.

![Сторінку репозиторію читають згори донизу: шапка, вкладки, перемикач гілок, останній коміт, список файлів і README, і кожна частина відповідає на своє питання.](https://productovi.com/courses/git-for-product/diagrams/m1-l2-repo-page-map-uk.png)

> **Вправа:** Розташуй частини вкладки `Code` на сторінці репозиторію по порядку, згори донизу.

## Як читати список файлів

**Sofia:** То де тоді живе ціна доставки?

**Alex Tutor:** Подивись на рядки. Біля `config/` написано «Raise delivery price to 59 UAH · 3 weeks ago». Це останній коміт, що змінив щось усередині цієї папки.

**Sofia:** А біля `pages/`: «Add summer promo banner · 3 days ago». Тобто список файлів ще й мапа нещодавніх змін.

![Мапа невеликого містечка, де кожен будинок — папка; на дахах кількох будинків нові помаранчеві прапорці, решта стоять тихо.](https://productovi.com/courses/git-for-product/inline/reading-a-repository-page-illustration-3.webp)

*Список файлів водночас є мапою нещодавніх змін.*

**Alex Tutor:** Саме так. Але це остання зміна, а не перша: сам файл може існувати роками. Щоб побачити все, що з файлом колись відбувалося, відкривають його історію. Це тема наступного уроку.

**Alex Tutor:** Перш ніж зіставляти частини, швидка перевірка щодо цих рядків файлів.

> **Вправа:** Рядок `config/` каже: «Raise delivery price to 59 UAH · 3 weeks ago». Що це означає?

> **Вправа:** Зістав кожну частину сторінки репозиторію з тим, що вона тобі каже.

## Як знайти файл або фразу

**Sofia:** Клацати по папках для `config/` підходить. А якщо мені потрібен файл із текстом «Free delivery from 800 UAH», і я гадки не маю, де він лежить?

**Alex Tutor:** Є два інструменти. `Go to file` над списком або клавіша `t` шукає файли за назвою: вводиш «delivery» і бачиш усі файли з цим словом у шляху.

**Alex Tutor:** Поле пошуку на самій горі GitHub шукає всередині файлів. На сторінці репозиторію воно пропонує шукати лише в ньому, тож фраза в лапках знайде точний рядок тексту.

**Daniel:** Саме так я знаходжу тексти, які маркетинг просить змінити. Шукати швидше, ніж пам'ятати структуру папок, навіть мені.

> **Вправа:** Ти знаєш, що на сайті є речення «Free delivery from 800 UAH», але не знаєш, у якому воно файлі. Як найшвидше знайти його на GitHub?

## Що таке коміт? Усередині одного коміту

**Alex Tutor:** **Коміт** — це один збережений крок в історії: набір змін з автором, датою, повідомленням і унікальним хешем. Натисни на повідомлення в рядку `config/`, і відкриється сторінка коміту `a41c09e`.

**Alex Tutor:** Угорі повідомлення, під ним автор і «committed 3 weeks ago». Праворуч батьківський коміт і хеш. На сторінці видно сім символів, але повний хеш має довжину 40; обидва вказують на той самий коміт.

**Alex Tutor:** Нижче: «Showing 1 changed file with 1 addition and 1 deletion» і сам змінений рядок, червоним і зеленим. Ця кольорова частина називається **diff**; як його читати, розберемо наступного разу.

**Sofia:** А в повідомленні є ще другий рядок: «Courier rates went up on 1 June; finance asked to pass it on. (#128)»

**Alex Tutor:** Це `#128` веде на pull request, де зміну обговорювали. Коміт разом із PR зазвичай розповідає всю історію.

> **Вправа:** Що з цього можна знайти на сторінці окремого коміту на GitHub? Познач усе, що підходить.

## Теги: версія як точка в історії

**Sofia:** Лічильник показав, що в репо є теги. Що вони тут роблять?

**Alex Tutor:** **Тег** (tag) прикріплює назву до одного коміту, зазвичай це версія. Коли команда робить реліз, вона ставить тег на коміт, який пішов на сайт, скажімо `v2.4.0`.

```text
Граф комітів, від найстарішого: `main` з тегом релізу
1. коміт 9d04e61 у main "Fix typo in footer"
2. коміт a41c09e у main "Raise delivery price to 59 UAH"
3. коміт c5d8e02 у main "Add pet passport field", тег v2.4.0 (виділено)
4. коміт e7c3b19 у main "Add summer promo banner"
5. коміт f02a6d4 у main "Update FAQ answers"
```

*Усе до позначеного тегом коміту включно входить у v2.4.0. Два коміти після нього ні.*

**Sofia:** Тобто версія не окрема копія. Це просто закладка на одному коміті, і в неї входить усе, що було до нього.

**Alex Tutor:** Точно. Коміт це знімок усього проєкту в певний момент, тож позначений тегом коміт несе в собі всю попередню роботу.

**Alex Tutor:** Спробуй на іншому графі.

> **Вправа:** Які зміни входять у реліз `v1.8.0`?

**Alex Tutor:** Ще одна перевірка щодо тегів, бо їх часто уявляють чимось більшим, ніж вони є.

> **Вправа:** Тег на кшталт `v2.4.0` — це окрема копія всіх файлів проєкту, що зберігається поруч із `main`.

## Яким має бути добре повідомлення коміту: найкращі практики

**Sofia:** Повідомлення від Daniel було дуже зрозуміле. Є якесь правило, як їх писати?

**Daniel:** Кілька звичок. Перший рядок: короткий підсумок, десь 50 символів, у формі наказу: «Fix», «Add», «Raise». Ніби продовжуєш фразу «If applied, this commit will…».

**Daniel:** Далі, якщо це не очевидно, порожній рядок і пояснення навіщо: яку проблему розв'язує, хто просив. Diff і так показує, що змінилося; пояснити навіщо може лише повідомлення.

**Daniel:** І один коміт, одна ідея. Якщо в повідомленні тричі трапляється «and», це мало бути три коміти.

![Охайний ряд невеликих коробок, у кожній по одній речі, поруч із переповненою коробкою, з якої вивалюються три не пов'язані між собою речі.](https://productovi.com/courses/git-for-product/inline/reading-a-repository-page-illustration-4.webp)

*Один коміт — одна ідея: так легше читати, перевіряти й відкочувати.*

**Sofia:** Мені точно траплялися коміти з назвою просто «fix» чи «changes».

**Alex Tutor:** Усі бачили. Вони забирають час у наступного читача, а наступним читачем часто виявляєшся ти.

> **Вправа:** Яке повідомлення коміту найбільше допоможе продакту, який читатиме історію через пів року?

## Твоя черга: напиши повідомлення коміту

**Alex Tutor:** Тепер ти. Фінвідділ хоче підняти поріг безкоштовної доставки з 800 до 1000 грн, бо після подорожчання кур'єрів маржа середнього замовлення зменшилася.

**Alex Tutor:** Зміну зробить Daniel. Напиши повідомлення, яке йому варто використати: підсумковий рядок і одне речення про те, навіщо.

**Daniel:** Підсумок англійською тримай коротким. Пояснення навіщо можна писати якомога простіше.

**Sofia:** Виклик прийнято.

> **Вправа:** Напиши повідомлення коміту для підняття порогу безкоштовної доставки з 800 до 1000 грн: підсумковий рядок (англійською, як зазвичай роблять команди) і одне речення, що пояснює навіщо.

**Alex Tutor:** Наступного уроку: сама історія. Читатимемо diff рядок за рядком і через blame знаходитимемо, хто написав будь-який рядок на сайті і навіщо.

**Sofia:** Смішно: годину тому ця сторінка здавалася мінним полем. А тепер читається радше як панель того, хто що змінив.

- Попередній урок: [Навіщо командам історія: контроль версій без страху](https://productovi.com/uk/courses/git-for-product/why-teams-keep-history.md)
- Наступний урок: [Читаємо історію: повідомлення, diff і blame](https://productovi.com/uk/courses/git-for-product/reading-history-diffs-and-blame.md)

---
Productovi Learning. Безкоштовно, читати можна без реєстрації.