Создание и переключение веток
Чтобы потренировать наши навыки ветвления, давай раскрасим нашу страницу Hello, World! с помощью CSS.
Мы можем относиться к этим изменениям как к новой задаче. Пока мы её разрабатываем, связанный с ней код становится нестабильным. Могут вылезти ошибки, и всё может работать не так, как ожидалось. Поэтому, пока задача не будет готова, лучше держать её отдельно от основной кодовой базы. Так мы сможем продолжать работу над основным проектом, не переживая о том, что недоделанная задача что-то сломает.
Сперва давай создадим новую ветку с именем style и переключимся на неё.
Когда ты создаёшь новую ветку, Git настраивает её так, чтобы она указывала на тот же коммит, что и текущая. Это значит, что новая ветка начинает свою жизнь с тем же кодом. Поэтому перед созданием ветки всегда проверяй, на какой ветке ты сейчас находишься.
Чаще всего ветки создают от основной ветки (в нашем случае это main). Давай на всякий случай проверим, что мы находимся в ветке main.
Выведи список всех веток командой git branch. Звёздочка в выводе указывает на текущую активную ветку.
Отлично, теперь создадим новую ветку style. Есть несколько способов создания веток, но самый удобный — использовать с флагом -c (сокращение от --create). Так ты создаёшь новую ветку и сразу же переключаешься на неё.
git switch -c styleИспользуй команду git switch, показанную выше, чтобы создать новую ветку с именем style.
Отлично, сейчас мы в ветке 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. Всё потому, что мы не создаём новую ветку, а переключаемся на уже существующую.
Используй команду git switch, чтобы переключиться обратно в ветку main. Затем выведи список файлов с помощью команды ls.
Как видишь, файла style.css здесь нет. Он доступен только в ветке style. В этом и заключается сила веток: они позволяют работать над разными задачами, не затрагивая основную кодовую базу.
Давай переключимся обратно на ветку style и проверим, на месте ли файл style.css.
git switch styleИспользуй команду git switch, чтобы переключиться обратно на ветку style. Затем выведи список файлов с помощью команды ls.
Теперь, когда мы научились создавать ветки и переключаться между ними, давай посмотрим, как изменения из веток для задач попадают в основную ветку.
Пройди курс так, как задумано: порционное обучение, чёткий порядок и постепенное открытие статей в Gitопедии. В любой момент можно продолжить работу с настоящим Git прямо в VS Code, Cursor, Antigravity или Windsurf.
(требуется войти в аккаунт)