Як читати сторінку репозиторію й коміти на GitHub

Alex Tutor

Відкрий github.com/catchow/website. Це сторінка репозиторію, і вона відповідає на більшість щоденних питань ще до того, як ти щось натиснеш.

Ви

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

Alex Tutor

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

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

Alex Tutor

Шапка сторінки репозиторію

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

Ви

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

Alex Tutor

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

Alex Tutor

Питання 1

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

Оберіть одну відповідьWatchStarForkCode

Alex Tutor

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

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

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

Ви

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

Alex Tutor

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

Alex Tutor

Питання 2

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

Торкніться пункту, а потім місця, куди його поставити. Можна перетягувати або користуватися стрілками.

Ви

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

Alex Tutor

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

Ви

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

Alex Tutor

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

Alex Tutor

Питання 3

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

Торкніться відповіді, а потім рядка, до якого вона належить. Можна й перетягувати.

Перемикач гілок з main
412 Commits
Рядок файлу: «Fix typo in footer · 2 months ago»
README
Вкладка Pull requests

Відповіді, які ще треба розмістити

Ви

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

Alex Tutor

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

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

Дмитро

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

Alex Tutor

Питання 4

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

Оберіть одну відповідьВідкрити Go to file і ввести реченняВідкрити README і прочитати йогоШукати фразу в лапках через поле пошуку вгорі, лише в цьому репозиторіїНатиснути Watch і чекати на сповіщення

Alex Tutor

Натисни на повідомлення в рядку config/. Відкриється сторінка коміту a41c09e.

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

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

Ви

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

Alex Tutor

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

Alex Tutor

Питання 5

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

Оберіть усі правильні відповідіСписок усіх гілок репозиторіюПовідомлення комітуСкільки клієнтів побачили змінуХеш і батьківський комітАвтора й час комітуЗмінені рядки (diff)

Ви

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

Alex Tutor

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

Alex Tutor

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

9d04e61Fix typo in footer
a41c09eRaise delivery price to 59 UAH
c5d8e02Add pet passport fieldv2.4.0
e7c3b19Add summer promo banner
f02a6d4Update FAQ answersmain

Ви

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

Alex Tutor

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

Спробуй на іншому графі.

Alex Tutor

Питання 6

Які зміни входять у реліз v1.8.0?

`main` навколо релізу v1.8.0

c1Add wishlist button
c2Fix cart total on mobile
c3Add gift cardsv1.8.0
c4Change hero image
c5Add product ratingsmain

Оберіть одну відповідьЛише «Add gift cards» (c3)c1, c2 і c3c4 і c5Усі п'ять комітів

Ви

У Дмитра повідомлення було дуже зрозуміле. Є якесь правило, як їх писати?

Дмитро

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

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

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

Ви

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

Alex Tutor

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

Alex Tutor

Питання 7

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

Оберіть одну відповідь«fix»«Update config/prices.json»«Raise free-delivery threshold to 1000 UAH» + рядок про те, чому цього попросив фінвідділ«Changes after the meeting, prices and some other stuff»

Alex Tutor

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

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

Дмитро

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

Ви

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

Alex Tutor

Питання 8Коротка відповідь · Завдання з перевіркою ШІ

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

Напишіть відповідь і отримайте оцінку та відгук від нашого ШІ-рецензента.

Увійдіть, щоб отримати відгук ШІ

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

Ви

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

Alex Tutor

На цьому все. Ви відповіли на всі завдання — чудова робота.

Наступний урок: Читаємо історію: повідомлення, diff і blame