Git для верстальщика: минимум, который нужно знать

«Зачем мне Git, я работаю один» — фраза, которая стоила мне потерянного проекта в 2019 году. Ноутбук умер, бэкапа не было, три недели вёрстки пропали. С тех пор Git — первое, что я настраиваю на любом проекте.

Git — это система контроля версий. Она сохраняет историю изменений файлов. Каждый коммит — как точка сохранения в игре. Можно откатиться к любому моменту, посмотреть что менялось и когда.

Зачем Git, если работаешь один

Даже без команды Git решает конкретные проблемы:

Откат изменений. Сломал вёрстку — откатился на рабочую версию за 5 секунд. Без Git придётся вспоминать, что именно менял, и чинить руками.
Бэкап на GitHub. Код хранится удалённо. Сломался диск — клонировал репозиторий на новую машину и продолжил работу.
История проекта. Через 3 месяца нужно вспомнить, зачем менял стили футера. Открыл историю коммитов — всё видно.
Портфолио. GitHub-профиль с проектами — это плюс при поиске заказов. Заказчики проверяют.
Работа с клиентом. Клиент попросил «вернуть как было» — один коммит назад, готово.

Установка и настройка: 2 команды

Установка: скачайте Git с git-scm.com и установите с настройками по умолчанию. На macOS Git уже предустановлен.

Настройка — выполните один раз в терминале:

git config --global user.name "Ваше Имя"
git config --global user.email "ваш@email.com"

Эти данные будут подписывать каждый ваш коммит. Используйте тот же email, что и на GitHub.

Базовый цикл: init → add → commit

Это три команды, которые вы будете использовать ежедневно.

1. Инициализация репозитория:

git init

Выполняется один раз в папке проекта. Создаёт скрытую папку .git, в которой хранится вся история.

2. Добавление файлов в индекс:

git add .

Точка означает «все изменённые файлы». Можно указать конкретный файл: git add style.css.

3. Фиксация изменений (коммит):

git commit -m "Сверстал шапку сайта"

Коммит — это снимок текущего состояния проекта. Пишите осмысленные сообщения: не «fix», а «Исправил отступы в карточках товаров».

Рабочий ритм: поработал → git add . → git commit -m "описание" → поработал → повторил.

Работа с GitHub: push и pull

GitHub — это удалённое хранилище для ваших репозиториев.

Первоначальная настройка:

Создайте аккаунт на github.com
Создайте новый репозиторий (кнопка «New»)
Привяжите локальный проект к удалённому:

git remote add origin https://github.com/ваш-логин/название-репо.git
git push -u origin main

Отправка изменений на GitHub:

git push

Выполняйте после каждого рабочего сеанса. Это ваш бэкап.

Загрузка изменений с GitHub:

git pull

Нужно, если работаете с двух машин или кто-то ещё вносил правки в репозиторий.

Ветки: зачем и как

Ветка — это параллельная копия проекта. Основная ветка — main. Нужно добавить новую фичу? Создайте ветку, работайте в ней, а потом влейте изменения обратно в main.

Зачем:

Экспериментировать, не ломая рабочую версию
Делать разные варианты дизайна параллельно
Показать клиенту вариант, не трогая основной сайт

# Создать ветку и переключиться на неё
git checkout -b new-header

# Работаете, коммитите...

# Переключиться обратно на main
git checkout main

# Влить изменения из ветки
git merge new-header

# Удалить ветку после слияния
git branch -d new-header

На старте достаточно использовать ветки для крупных изменений. Для мелких правок можно коммитить прямо в main.

.gitignore — что не коммитить

Файл .gitignore указывает Git, какие файлы и папки игнорировать. Создайте его в корне проекта:

# Зависимости
node_modules/

# Сборка
dist/
build/

# Системные файлы
.DS_Store
Thumbs.db

# Среда разработки
.idea/
.vscode/

# Переменные окружения
.env

Правило: не коммитьте то, что можно сгенерировать (node_modules, dist) или содержит секреты (.env, API-ключи).

5 команд, которые покрывают 90% задач

Команда	Что делает	Когда использовать
`git add .`	Добавляет все изменения в индекс	Перед каждым коммитом
`git commit -m "..."`	Сохраняет снимок проекта	После логического блока работы
`git push`	Отправляет коммиты на GitHub	В конце рабочего сеанса
`git pull`	Загружает изменения с GitHub	В начале рабочего сеанса
`git status`	Показывает текущее состояние	Когда не уверены, что происходит

Бонус: git log --oneline — показывает историю коммитов в одну строку. Удобно для быстрого просмотра.

Типичный рабочий день с Git

# Утро: забираем свежую версию
git pull

# Работаем над задачей...

# Проверяем что изменилось
git status

# Сохраняем прогресс
git add .
git commit -m "Адаптив для мобильной версии каталога"

# Работаем дальше...

git add .
git commit -m "Исправил баг с меню на 320px"

# Конец дня: отправляем на GitHub
git push

Коммитьте часто — после каждого логического блока работы. Один коммит = одно изменение. Не нужно копить правки за весь день в один гигантский коммит.