Практикум: визитка в Git

Задание

Рабочий цикл Git — это порядок действий, который вы повторяете при каждом изменении проекта: поправили файл, посмотрели статус, посмотрели разницу, подготовили, закоммитили, проверили историю. В практикуме вы пройдёте его от начала до конца на пятом коммите без пошаговых подсказок — только с описанием, что нужно получить.

По отдельности каждая команда уже знакома: status, diff, add, commit, log. Теперь важно собрать их в привычку, ведь именно так вы будете работать с Git каждый день. Вот цикл целиком:

правка файла
   |
   v
git status            что изменилось?
git diff              что именно?
   |
   v
git add <файл>        подготовить
git diff --staged     проверить, что подготовлено
   |
   v
git commit -m "..."   зафиксировать
git log --oneline     убедиться, что коммит в истории

Схема читается сверху вниз: после каждого коммита вы возвращаетесь к началу и делаете следующую правку.

Что нужно сделать

1. Проверить старт. В папке ~/projects/portfolio команда git status должна сообщать working tree clean, а git log --oneline — показывать четыре коммита.
2. Найти опечатку. Откройте страницу в браузере: на Mac выполните open index.html, в Git Bash на Windows — start index.html, на Linux — xdg-open index.html (или дважды щёлкните по файлу в проводнике). Посмотрите на название вкладки. Там слово написано неверно — помните, мы оставили опечатку нарочно?
3. Исправить её в index.html. Искомая строка — в разделе <head>, внутри <title>. Поправьте одну букву и сохраните файл.
4. Пройти цикл: посмотреть git status и git diff, добавить файл, проверить git diff --staged, закоммитить с сообщением ровно Исправить опечатку в заголовке, посмотреть git log --oneline.
5. Ответить на вопросы по истории своими командами (список ниже).

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

Вопросы по истории

• Сколько файлов затронул коммит «Добавить стили» и сколько строк он добавил?
• Сколько всего коммитов в проекте?
• Что изменилось между самым первым коммитом и последним (какие файлы, сколько строк)?

Результат, к которому нужно прийти: пять коммитов в git log --oneline. Хеши у вас будут свои, а подписи должны совпасть:

$ git log --oneline
284ecf7 (HEAD -> main) Исправить опечатку в заголовке
cb00bb8 Добавить раздел «Мои проекты»
f58d529 Добавить README
8c23940 Добавить стили
027a150 Добавить главную страницу

Разбор

Сверьтесь с решением, только когда сделаете сами или упрётесь в тупик.

Шаг 1. Проверка старта

$ git status
On branch main
nothing to commit, working tree clean
$ git log --oneline
cb00bb8 (HEAD -> main) Добавить раздел «Мои проекты»
f58d529 Добавить README
8c23940 Добавить стили
027a150 Добавить главную страницу

Если картина другая, вернитесь к уроку, где вы делали недостающий коммит, и доведите проект до этого состояния.

Шаги 2–3. Исправление в редакторе

В index.html в строке заголовка вкладки замените «Визтка» на «Визитка». Больше в файле ничего менять не нужно. Сохраните.

Шаг 4. Цикл

$ git status
On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")
$ git diff
diff --git a/index.html b/index.html
index a212cae..5b596b8 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="ru">
 <head>
   <meta charset="UTF-8">
-  <title>Алекс Иванов - Визтка</title>
+  <title>Алекс Иванов - Визитка</title>
   <link rel="stylesheet" href="style.css">
 </head>
 <body>

Это правка одной строки: Git показывает её как пару — старая с минусом, новая с плюсом. Остальные строки вокруг — контекст. Подготовьте файл и перепроверьте, что именно уйдёт в коммит:

$ git add index.html
$ git diff --staged --stat
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

Одна вставка и одно удаление — так Git считает замену строки. Теперь коммит:

$ git commit -m "Исправить опечатку в заголовке"
[main 284ecf7] Исправить опечатку в заголовке
 1 file changed, 1 insertion(+), 1 deletion(-)
$ git status
On branch main
nothing to commit, working tree clean
$ git log --oneline
284ecf7 (HEAD -> main) Исправить опечатку в заголовке
cb00bb8 Добавить раздел «Мои проекты»
f58d529 Добавить README
8c23940 Добавить стили
027a150 Добавить главную страницу

Шаг 5. Ответы на вопросы по истории

Коммит «Добавить стили». Подставьте свой хеш из git log --oneline:

$ git show --stat 8c23940
...
    Добавить стили

 index.html |  1 +
 style.css  | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)

Два файла и 24 добавленные строки: одна в index.html (подключение стилей) и 23 в новом style.css.

Количество коммитов. Это число строк в git log --oneline: пять.

Первый и последний коммит. Первый коммит от последнего отстоит на четыре шага, поэтому используем HEAD~4:

$ git diff HEAD~4 HEAD --stat
 README.md  |  3 +++
 index.html | 10 +++++++++-
 style.css  | 23 +++++++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

Хеш первого коммита можно было указать и напрямую: git diff 027a150 HEAD --stat. Результат тот же.

Шпаргалка модуля

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

• git log --oneline показывает пять коммитов с сообщениями «Добавить главную страницу», «Добавить стили», «Добавить README», «Добавить раздел «Мои проекты»», «Исправить опечатку в заголовке» (последний сверху).
• git status сообщает nothing to commit, working tree clean.
• В проекте три файла: index.html, style.css, README.md (и скрытая папка .git).
• Вы без подсказок можете назвать шаги цикла от правки файла до проверки истории.
• Вы знаете, чем отличаются git diff и git diff --staged.

Частые ошибки

Коммит уходит со странным сообщением. Опечатались в подписи, например «Исправть опечатку». Исправить подпись уже сделанного коммита можно, но способ мы разберём в следующем модуле. Пока, если сообщение критично, сверьтесь с шаблоном выше и оставьте как есть.

В diff попали изменённые строки по всему файлу. Редактор сохранил файл с другими переводами строк или другими отступами, поэтому Git видит перемену в каждой строке. Верните настройки редактора (кодировка UTF-8, отступ в два пробела, как в примерах) и повторите правку.

git commit сообщает, что фиксировать нечего. Правка не была подготовлена: выполните git add index.html. Если не помогает, проверьте git status — возможно, вы забыли сохранить файл в редакторе.

Пейджер. Любой длинный вывод git log и git diff можно закрыть клавишей q.

Что важно запомнить

• Рабочий цикл: правка, status, diff, add, diff --staged, commit, log --oneline.
• Перед каждым коммитом сверяйтесь с git diff и git diff --staged: коммит должен делать одну понятную вещь.
• История читается по подписям и хешам; открыть любой коммит можно через git show, сравнить два — через git diff.
• Новые коммиты не меняют старые: история только растёт.

Проект получился: пять коммитов и чистая история. Но дальше реальная работа всё усложнит. Вы закоммитите не тот файл, правка окажется ошибочной или нужный файл случайно исчезнет. Как это исправить, не потеряв работу, расскажет следующий модуль, начиная с файла .gitignore, который не пускает в репозиторий лишнее.