Урок 4

День 4 | Знакомимся с системой контроля версий

70 мин

Что такое Git и зачем он нужен?

Представьте ситуацию: вы работаете над сайтом, всё идёт хорошо. Потом вы решили попробовать что-то новое, изменили код, и... что-то сломалось. Как вернуться к рабочей версии? Или вы работаете в команде — как не перезаписать изменения друг друга?

Вот для этого и нужен Git — система контроля версий. Это как "машина времени" для вашего кода. Git сохраняет все изменения, и вы можете в любой момент вернуться к любой версии.

Что такое система контроля версий?

Система контроля версий (Version Control System, VCS) — это программа, которая отслеживает все изменения в файлах проекта. Она запоминает:

  • Что было изменено
  • Когда было изменено
  • Кто внёс изменения
  • Почему было изменено (если вы оставили комментарий)

Git — самая популярная система контроля версий в мире. Её используют практически все разработчики.

Что такое GitHub?

GitHub — это веб-сервис, который хранит ваши Git-репозитории в интернете. Это как "облако" для кода. Преимущества:

  • Ваш код всегда сохранён в интернете (не потеряется, если сломается компьютер)
  • Можно работать над проектом с разных компьютеров
  • Легко делиться кодом с другими
  • Можно работать в команде
  • Можно показать свой код работодателю (портфолио)

Установка Git

Теперь давайте установим Git на ваш компьютер. Процесс немного отличается для разных операционных систем.

Windows

  1. Откройте браузер и перейдите на сайт: https://git-scm.com/download/win
  2. Скачайте установщик (Git автоматически определит вашу систему и предложит правильную версию)
  3. Запустите скачанный файл (например, Git-2.xx.x-64-bit.exe)
  4. Следуйте инструкциям установщика. Можно оставить все настройки по умолчанию — они подходят для большинства случаев
  5. После установки откройте программу "Git Bash" (она появится в меню Пуск) или используйте обычную командную строку (cmd)

Mac

На Mac есть два способа установки Git:

Способ 1: Через официальный сайт (проще для начинающих)

  1. Откройте браузер и перейдите на: https://git-scm.com/download/mac
  2. Скачайте установщик для Mac
  3. Откройте скачанный файл и следуйте инструкциям

Способ 2: Через Homebrew (для более продвинутых пользователей)

Что такое Homebrew? Homebrew (или просто "brew") — это менеджер пакетов для Mac. Простыми словами, это программа, которая помогает легко устанавливать другие программы через командную строку.

Как установить Homebrew?

  1. Откройте программу "Терминал" (Terminal) на Mac. Найти её можно через Spotlight (нажмите Cmd+Пробел и введите "Terminal")
  2. Скопируйте и вставьте в терминал следующую команду (нажмите Enter после вставки):
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Эта команда скачает и установит Homebrew. Процесс может занять несколько минут. Вас могут попросить ввести пароль администратора — это нормально.

Что делает эта команда?

  • /bin/bash -c — запускает команду в bash (оболочка терминала)
  • curl -fsSL — скачивает скрипт установки с интернета
    • curl — программа для скачивания файлов из интернета
    • -f — fail silently (не показывать ошибки)
    • -s — silent (тихий режим, без прогресс-бара)
    • -S — show errors (но показывать ошибки)
    • -L — follow redirects (следовать перенаправлениям)
  • URL — адрес скрипта установки Homebrew на GitHub

После установки Homebrew установите Git:

brew install git

Эта команда скачает и установит Git через Homebrew.

Linux (Ubuntu/Debian)

Откройте терминал и выполните команду:

sudo apt-get update
sudo apt-get install git

sudo означает, что команда выполняется с правами администратора. Вас попросят ввести пароль.

Что делают эти команды?

  • sudo apt-get update — обновляет список доступных пакетов (программ)
  • sudo apt-get install git — устанавливает Git

Проверка установки

После установки нужно проверить, что Git установлен правильно. Откройте терминал (или Git Bash на Windows) и выполните команду:

git --version

Если Git установлен, вы увидите что-то вроде: git version 2.39.0

Если вы видите ошибку "command not found" или "команда не найдена", значит:

  • Git не установлен — попробуйте переустановить
  • Git не добавлен в PATH (путь системы) — на Windows перезапустите терминал или переустановите Git
  • Вы используете неправильный терминал — на Windows используйте Git Bash

Первая настройка Git

После установки Git нужно его настроить — указать ваше имя и email. Это нужно, чтобы Git знал, кто вносит изменения.

Откройте терминал и выполните две команды (замените на свои данные):

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

Что означают эти команды?

  • git config — команда для настройки Git
  • --global — означает, что настройка применяется ко всем вашим проектам на этом компьютере (если хотите настроить только для одного проекта, уберите --global)
  • user.name — ваше имя (может быть любым, но лучше использовать настоящее)
  • user.email — ваш email (лучше использовать тот, который вы будете использовать для GitHub)

Проверить настройки можно командой:

git config --list

Вы увидите список всех настроек Git, включая только что установленные.

Основные команды Git

Теперь давайте изучим основные команды Git. Не пугайтесь — их не так много, и мы разберём каждую подробно.

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

Репозиторий (или "repo") — это папка, в которой Git отслеживает изменения. Чтобы Git начал отслеживать вашу папку, нужно её инициализировать.

Откройте терминал, перейдите в папку с вашим проектом и выполните:

cd путь/к/вашей/папке
git init

Что делает git init? Эта команда создаёт скрытую папку .git в вашей папке проекта. В этой папке Git хранит всю информацию об изменениях. Вы её обычно не видите (она скрытая), но она там есть.

Как перейти в папку через терминал?

  • Windows: cd C:\Users\ВашеИмя\Documents\my-website
  • Mac/Linux: cd ~/Documents/my-website
  • Или просто перетащите папку в окно терминала — путь вставится автоматически (на Mac)

Полезные команды для навигации:

  • pwd (Mac/Linux) или cd (Windows) — показать текущую папку
  • ls (Mac/Linux) или dir (Windows) — показать содержимое папки
  • cd .. — перейти на уровень выше
  • cd ~ (Mac/Linux) — перейти в домашнюю папку

2. Проверка статуса

Команда git status показывает текущее состояние вашего репозитория:

git status

Она покажет:

  • Какие файлы изменены, но ещё не добавлены в Git
  • Какие файлы добавлены и готовы к сохранению
  • Какие файлы не отслеживаются Git

Эта команда очень полезна — используйте её часто, чтобы понимать, что происходит с вашим проектом.

3. Добавление файлов

Git не отслеживает файлы автоматически. Нужно явно сказать ему, какие файлы вы хотите сохранить. Это делается командой git add.

Добавить конкретный файл:

git add index.html

Добавить все файлы в папке:

git add .

Точка (.) означает "текущая папка и все её содержимое".

Добавить все HTML файлы:

git add *.html

Звёздочка (*) означает "любые символы", так что *.html — это "все файлы с расширением .html".

Что происходит при git add? Файлы попадают в так называемую "staging area" (область подготовки). Это как корзина покупок — вы выбираете, что хотите сохранить, но ещё не сохранили.

4. Создание коммита

Коммит (commit) — это "снимок" вашего проекта в определённый момент времени. Это как сохранение в игре, только для кода. Коммит сохраняет все изменения, которые вы добавили через git add.

Создать коммит:

git commit -m "Добавлена базовая структура HTML"

-m означает "message" (сообщение). Сообщение должно описывать, что вы изменили. Хорошие сообщения: "Добавлена шапка сайта", "Исправлена ошибка в меню", "Добавлены стили для кнопок".

Создать коммит с подробным описанием:

git commit -m "Добавлена базовая структура HTML" -m "Создан header, main и footer с семантическими тегами"

Можно указать несколько сообщений через несколько -m.

Важно: Коммит сохраняет только те файлы, которые вы добавили через git add. Если вы изменили файл, но не добавили его, изменения не попадут в коммит.

5. Просмотр истории

Посмотреть все коммиты можно командой:

git log

Вы увидите список всех коммитов с автором, датой и сообщением.

Краткий вид:

git log --oneline

Показывает только короткие хеши и сообщения.

С графом веток:

git log --oneline --graph

Показывает визуальный граф коммитов (полезно, когда работаете с ветками).

Работа с GitHub

Теперь давайте научимся работать с GitHub — хранилищем кода в интернете.

Регистрация на GitHub

  1. Откройте браузер и перейдите на github.com
  2. Нажмите кнопку "Sign up" (Зарегистрироваться)
  3. Заполните форму: username (имя пользователя), email, пароль
  4. Подтвердите email (проверьте почту)

Важно: Username будет виден всем, выбирайте его внимательно. Это будет частью URL ваших репозиториев (например, github.com/ваш-username).

Создание репозитория на GitHub

  1. После входа нажмите кнопку "+" в правом верхнем углу
  2. Выберите "New repository"
  3. Укажите название (например, "my-first-website")
  4. Выберите "Public" (публичный) или "Private" (приватный):
    • Public — все могут видеть ваш код (хорошо для портфолио)
    • Private — только вы можете видеть код
  5. Важно: НЕ ставьте галочки на "Add a README file", "Add .gitignore", "Choose a license" — если ваш репозиторий уже создан локально
  6. Нажмите "Create repository"

Подключение локального репозитория к GitHub

После создания репозитория на GitHub, вы увидите инструкции. Но давайте разберём пошагово:

  1. GitHub покажет вам URL репозитория. Он будет выглядеть так: https://github.com/ваш-username/my-first-website.git
  2. В терминале (убедитесь, что вы в папке вашего проекта) выполните команды, которые покажет GitHub. Обычно это:
git remote add origin https://github.com/ваш-username/my-first-website.git
git branch -M main
git push -u origin main

Что делают эти команды?

  • git remote add origin — добавляет удалённый репозиторий (GitHub) с именем "origin"
    • remote — удалённый репозиторий (в интернете)
    • origin — стандартное имя для основного удалённого репозитория
  • git branch -M main — переименовывает текущую ветку в "main" (современный стандарт, раньше использовали "master")
  • git push -u origin main — отправляет ваш код на GitHub
    • push — отправить изменения на удалённый репозиторий
    • -u — установить связь, чтобы в будущем можно было просто писать git push
    • origin main — отправить ветку main на origin (GitHub)

Вас могут попросить ввести логин и пароль GitHub. Если у вас включена двухфакторная аутентификация, нужно будет создать Personal Access Token вместо пароля.

Клонирование репозитория

Если вы хотите скопировать репозиторий с GitHub на свой компьютер:

git clone https://github.com/username/repository-name.git

Эта команда создаст папку с названием репозитория и скопирует туда весь код.

Основной workflow (процесс работы)

Теперь, когда вы знаете основные команды, вот типичный процесс работы с Git:

  1. Проверить статус: git status — посмотреть, что изменилось
  2. Добавить изменения: git add . — добавить все изменённые файлы
  3. Создать коммит: git commit -m "Описание изменений" — сохранить изменения
  4. Отправить на GitHub: git push — загрузить изменения в интернет
  5. Если работаете в команде: git pull — получить изменения от других

Этот цикл повторяется каждый раз, когда вы делаете изменения в коде.

Ветки (Branches)

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

Зачем нужны ветки?

  • Вы можете экспериментировать, не боясь сломать рабочий код
  • Несколько разработчиков могут работать над разными задачами одновременно
  • Легко откатиться, если что-то пошло не так

Основные команды для работы с ветками

# Посмотреть все ветки (* отмечает текущую)
git branch

# Создать новую ветку
git branch feature-header

# Переключиться на ветку
git checkout feature-header

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

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

# Слить ветку feature-header в текущую (main)
git merge feature-header

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

Типичный workflow с ветками

  1. Вы на ветке main с рабочим кодом
  2. Создаёте ветку для новой функции: git checkout -b feature-slider
  3. Работаете, делаете коммиты в эту ветку
  4. Когда функция готова — переключаетесь на main: git checkout main
  5. Сливаете изменения: git merge feature-slider
  6. Удаляете ветку: git branch -d feature-slider

Совет: Называйте ветки осмысленно: feature-slider, fix-header-bug, redesign-footer.

Файл .gitignore

.gitignore — это специальный файл, который говорит Git, какие файлы и папки НЕ нужно отслеживать. Это очень важно!

Что обычно добавляют в .gitignore?

  • node_modules/ — папка с зависимостями npm (очень большая, все могут скачать её через npm install)
  • dist/ или build/ — скомпилированные файлы (можно пересобрать)
  • .env — файл с секретными настройками (пароли, API ключи)
  • .DS_Store — системный файл Mac
  • Thumbs.db — системный файл Windows

Как создать .gitignore

Создайте файл .gitignore в корне проекта (да, имя начинается с точки!):

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

# Сборка
dist/
build/

# Секреты и настройки окружения
.env
.env.local

# Логи
*.log
npm-debug.log*

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

# IDE настройки (опционально)
.idea/
.vscode/

Важно:

  • Добавляйте .gitignore ПЕРЕД первым коммитом
  • Если файл уже отслеживается Git, добавление в .gitignore не уберёт его. Нужно сначала удалить из Git: git rm --cached filename
  • Строки, начинающиеся с # — это комментарии
  • / в конце означает папку (например, node_modules/)
  • * — любые символы (например, *.log — все файлы с расширением .log)

Готовые шаблоны .gitignore

GitHub предлагает готовые шаблоны для разных проектов:

  • github.com/github/gitignore — коллекция шаблонов
  • При создании репозитория на GitHub можно выбрать готовый шаблон

Практическое задание

  1. Установите Git на свой компьютер (следуйте инструкциям выше для вашей операционной системы)
  2. Проверьте установку: git --version
  3. Настройте Git: укажите имя и email
  4. Создайте папку для проекта (например, "my-first-website")
  5. Создайте в ней файл index.html с базовой структурой HTML
  6. Создайте файл .gitignore с базовым содержимым (node_modules/, .DS_Store, и т.д.)
  7. Инициализируйте Git в этой папке: git init
  8. Добавьте файлы: git add .
  9. Создайте первый коммит: git commit -m "Первый коммит"
  10. Зарегистрируйтесь на GitHub
  11. Создайте новый репозиторий на GitHub
  12. Подключите локальный репозиторий к GitHub (используйте команды, которые покажет GitHub)
  13. Отправьте код на GitHub: git push -u origin main
  14. Проверьте на GitHub — ваш код должен там появиться!
  15. Попрактикуйтесь с ветками:
    • Создайте ветку: git checkout -b feature-test
    • Измените что-нибудь в index.html, сделайте коммит
    • Вернитесь на main: git checkout main
    • Слейте изменения: git merge feature-test

Полезные команды

Вот ещё несколько полезных команд, которые могут пригодиться:

# Посмотреть изменения в файле (до добавления в staging)
git diff

# Отменить изменения в файле (вернуть к последнему коммиту)
git checkout -- filename

# Удалить файл из Git (но оставить на диске)
git rm --cached filename

# Просмотреть информацию об удалённом репозитории
git remote -v

# Посмотреть все ветки
git branch

Что дальше?

Отлично! Теперь вы умеете работать с Git и GitHub. Это очень важный навык для любого разработчика. В следующем уроке мы установим Node.js и npm — инструменты, которые понадобятся для работы с современными инструментами разработки.

Материалы по теме

Мы используем файлы cookie для улучшения работы сайта и персонализации контента. Продолжая использовать сайт, вы соглашаетесь с использованием cookies в соответствии с нашей Политикой конфиденциальности.