Створення гілок і перемикання між ними
Щоб попрактикуватися з гілками, додаймо трохи кольору на нашу сторінку Hello, World! через CSS.
Ці зміни можна вважати новою функцією. Поки функція в розробці, код навколо неї нестабільний: можуть бути помилки, та й сама функція може працювати не так, як очікується. Тому, доки функція не готова, тримаймо її окремо від основної кодової бази. Так можна спокійно працювати над основним кодом, і зміни для нової функції на нього не впливатимуть.
Спершу створімо нову гілку style і перемкнімося на неї.
Коли ти створюєш нову гілку, вона вказує на той самий коміт, що й поточна. Тобто стартовий код в обох гілках однаковий. Тому перед створенням нової гілки звертай увагу, на якій гілці ти зараз.
Здебільшого нову гілку варто починати від основної гілки (main у нашому випадку). Про всяк випадок перевірмо, чи ми зараз на гілці main.
Виведи список усіх гілок командою git branch. Зірочка у виводі позначає гілку, на якій ти зараз.
Чудово, тепер створімо нову гілку style. Гілки можна створювати кількома способами, але найзручніший — команда з опцією -c (скорочення від --create). Так ти створюєш нову гілку й одразу перемикаєшся на неї.
git switch -c styleСтвори нову гілку style командою git switch, наведеною вище.
Чудово, тепер ми на гілці style. Поки що вона ідентична гілці main. Створімо новий файл style.css і зробімо наш тег h1 червоним через CSS. Ось як:
h1 {
color: red;
}Створи новий файл style.css і додай у нього CSS-код, наведений вище. Потім додай файл до області підготовки і закоміть зміни.
Ще треба оновити файл hello.html, щоб підключити style.css. Ось як:
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Онови hello.html, як показано вище. Потім додай зміни в область підготовки і закоміть їх.
Чудово, початкові стилі для сторінки додано. Тепер перемкнімося назад на гілку main і перевірмо, чи файл style.css досі на місці.
git switch mainЗверни увагу: опції -c тут немає, бо ми не створюємо нову гілку, а перемикаємося на наявну.
Перемкнися назад на гілку main командою git switch. Потім виведи список файлів командою ls.
Як бачиш, файлу style.css тут немає — він існує лише в гілці style. У цьому й сила гілок: вони дають змогу працювати над різними функціями, не зачіпаючи основну кодову базу.
Перемкнімося назад на гілку style і перевірмо, чи файл style.css досі там.
git switch styleПеремкнися назад на гілку style командою git switch. Потім виведи список файлів командою ls.
Ми розібралися, як створювати гілки та перемикатися між ними. Тепер подивімося, як зміни з гілок для нових функцій потрапляють до основної гілки.
Проходь курс так, як він і задуманий: маленькими порціями, у сфокусованому лінійному порядку, поступово відкриваючи статті Gitopedia. Будь-коли можна продовжити зі справжнім Git у VS Code/Cursor/Antigravity/Windsurf.
але потрібен вхід