Изменения, индекс, коммит:
почему два шага

Категория

Основы работы

Уровень

Начальный

Что получится

Два коммита с понятными сообщениями вместо одной общей свалки

Сколько занимает

Около двадцати пяти минут за компьютером

§1Рабочая папка, индекс, история

Правка попадает в историю в два шага и по пути проходит три места: рабочую папку, индекс и историю.

Индекс — среднее место, куда складывают то, что войдёт в следующий коммит. В панели VS Code он называется Staged Changes, в командах Git — index или staging area. Пока коммит не сделан, содержимое индекса можно менять.

§2Подготовка: четыре правки в трёх файлах

В главе используется проект sait-vizitka, склонированный в главе 2.2. Если проекта нет, его клонируют заново по адресу из той же главы.

Вносим в проект четыре правки в трёх файлах. Правки относятся к разным задачам, поэтому в историю они уйдут двумя коммитами.

Правки 1 и 2, файл index.html. Меняем заголовок вкладки и добавляем под абзацем ссылку на страницу контактов:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Сайт-визитка</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Привет, это моя страница</h1>
  <p>Учусь работать с Git и веду этот сайт как учебный проект.</p>
</body>
</html>

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Сайт-визитка · Максим</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Привет, это моя страница</h1>
  <p>Учусь работать с Git и веду этот сайт как учебный проект.</p>
  <p><a href="kontakty.html">Контакты</a></p>
</body>
</html>

Правка 3, новый файл kontakty.html. Создаём его в корне проекта. Содержимое — копия главной страницы с заголовком «Контакты» и строкой с почтой:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Контакты · Сайт-визитка</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Контакты</h1>
  <p>Почта: student@example.com</p>
</body>
</html>

Правка 4, файл styles.css. Увеличиваем отступ страницы:

body {
  margin: 0;
  padding: 40px;
  font-family: system-ui, sans-serif;

body {
  margin: 0;
  padding: 60px;
  font-family: system-ui, sans-serif;

Сохраняем каждый файл (CtrlCmd + S) и открываем панель Source Control.

Что получилось.В проекте четыре несохранённые в историю правки в трёх файлах.

§3Шаг 1. Посмотреть список изменений

В разделе Changes три изменённых файла:

Тот же список печатает команда git status:

git status --short
 M index.html
?? kontakty.html
 M styles.css

Все три файла находятся в разделе Changes. Индекс пуст, поэтому коммит пока создать нельзя.

Нажимаем на имя index.html, чтобы открыть его изменения:

Что получилось.Известно, какие файлы изменены и что изменилось в index.html.

§4Шаг 2. Разложить правки по смыслу

Число коммитов определяется числом задач, а не числом файлов.

Правки из этой главы относятся к двум задачам:

Получается два коммита: страница контактов со ссылкой и оформление. Заголовок вкладки включаем в первый коммит, потому что он находится в том же файле, что и ссылка.

Что получилось.Составлен план: первый коммит — страница контактов, ссылка и заголовок вкладки, второй — отступы.

§5Шаг 3. Отобрать первую пару файлов

Наводим курсор на index.html и нажимаем +. Повторяем для kontakty.html. styles.css оставляем в Changes, он войдёт во второй коммит.

То же в терминале:

git add index.html kontakty.html

У index.html осталась буква M — файл уже был в истории и изменён. У kontakty.html буква сменилась с U на A — новый файл отобран и после коммита будет отслеживаться.

В терминале содержимое индекса печатает git diff --staged, а правки, не отобранные в индекс, — git diff.

Что получилось.index.html и kontakty.html в Staged Changes, styles.css в Changes.

§6Шаг 4. Написать сообщение из двух частей

Щёлкаем в поле Message и пишем первую строку — короткий заголовок: «Добавил страницу контактов». Дважды нажимаем Shift + Enter и пишем пояснение: «Новая страница kontakty.html и ссылка на неё с главной.»

Что получилось.В поле Message заголовок и пояснение, разделённые пустой строкой.

§7Шаг 5. Сделать первый коммит и проверить его

Нажимаем ✓ Commit. Два отобранных файла записываются в историю, styles.css остаётся в Changes.

То же в терминале. Каждый ключ -m — отдельный абзац сообщения: первый станет заголовком, второй — пояснением.

git commit -m "Добавил страницу контактов" -m "Новая страница kontakty.html и ссылка на неё с главной."

Последний коммит с автором, датой, сообщением и списком файлов печатает команда:

git log -1 --stat
commit 3e4a2c6cec5fd5501bfbcf9d14b11dd308d49cb4
Author: Student <student@example.com>
Date:   Wed Sep 23 05:45:56 2026 +0300

    Добавил страницу контактов

    Новая страница kontakty.html и ссылка на неё с главной.

 index.html    |  3 ++-
 kontakty.html | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

В коммите записаны полное имя (хеш), автор, дата, сообщение и список файлов с числом добавленных и удалённых строк. Имя и почта автора берутся из настроек Git, заданных в главе 1.3.

Что получилось.В истории коммит «Добавил страницу контактов» с двумя файлами. styles.css остаётся в Changes.

§8Шаг 6. Сделать второй коммит

В разделе Changes остался один файл. Наводим курсор на заголовок раздела, справа появляются значки:

Нажимаем плюс у заголовка, пишем сообщение «Увеличил отступы страницы» и нажимаем ✓ Commit. Правки записаны двумя коммитами, у каждого своё сообщение.

То же в терминале. Точка после git add означает все изменения в папке проекта:

git add .
git commit -m "Увеличил отступы страницы"

git log --oneline -3
9e3c858 Увеличил отступы страницы
3e4a2c6 Добавил страницу контактов
745f2e1 Добавил README с описанием проекта

Если бы все правки ушли одним коммитом, в истории была бы одна строка вроде «Правки по сайту». По такой строке нельзя понять, какой коммит менял отступы.

Что получилось.В истории шесть коммитов: четыре из клона и два ваших. Список изменений пуст.

§9Шаг 7. Подготовить часть файла

Иногда в одном файле оказываются правки к разным задачам. Например, изменён отступ и начат новый блок стилей, а в коммит нужен только отступ. Для этого Git отбирает в индекс отдельный участок файла.

Вносим в styles.css две правки: уменьшаем отступ до 48px и добавляем в конец файла блок для подвала страницы:

body {
  margin: 0;
  padding: 60px;
  font-family: system-ui, sans-serif;
  background: #F4F1EC;
  color: #1B1A19;
}

h1 {
  font-size: 34px;
}

body {
  margin: 0;
  padding: 48px;
  font-family: system-ui, sans-serif;
  background: #F4F1EC;
  color: #1B1A19;
}

h1 {
  font-size: 34px;
}

footer {
  color: #6B6560;
}

Сохраняем файл и открываем окно сравнения щелчком по styles.css в панели. Наводим курсор на первый изменённый участок. В поле с номерами строк слева появляются два значка:

Нажимаем + у первого участка. Файл появляется в обоих разделах:

Индекс хранит свою копию файла отдельно от файла в папке. git status отмечает это двумя буквами:

git status --short
MM styles.css

Первая M — изменение в индексе, вторая — изменение в папке, не отобранное в индекс. Коммит, сделанный сейчас, включил бы только новый отступ, а блок footer остался бы в Changes.

Эти правки в историю не записываем и возвращаем файл к последнему коммиту. Нажимаем − у styles.css в Staged Changes: отобранный участок переходит в Changes. Затем нажимаем круговую стрелку у styles.css в Changes и подтверждаем. Обе правки удаляются, список изменений становится пустым. То же в терминале:

git restore --staged styles.css
git restore styles.css

Первая команда убирает файл из индекса, вторая возвращает файл к последнему коммиту. Отмена изменений подробно разобрана в главе 2.6.

Что получилось.Показано, как отобрать в коммит часть файла. styles.css возвращён к последнему коммиту, список изменений пуст.

§10Справка: три зоны и команды

В панели и в командах одни и те же действия называются по-разному:

Команды приведены для сверки с инструкциями, где работа описана через терминал. Кнопки панели выполняют те же действия.

§11Как писать сообщения коммитов

Сообщение коммита читают при поиске нужного изменения в истории. Первая строка сообщает, что изменилось в проекте.

§12Частые вопросы

§13Проверьте себя

§14Шпаргалка по главе

Итог главы

Между рабочей папкой и историей находится индекс — раздел Staged Changes. Плюс отбирает правки в индекс, Commit записывает содержимое индекса в историю. Индекс позволяет разделить правки по задачам: в главе четыре правки записаны двумя коммитами. Отбирают файл целиком, все файлы списка или отдельный участок файла; в последнем случае файл находится в обоих разделах. Сообщение коммита состоит из короткого заголовка и пояснения после пустой строки. В следующей главе разобрано, как читать историю, искать нужный коммит и узнавать автора строки.