Git и GitHub: основы для контроля версий

Курс: Фронтенд-фриланс: От нуля до первых заказов за 10 недель16+

На прошлом шаге мы настроили удобную среду разработки в VS Code. Теперь освоим один из самых важных инструментов любого разработчика, особенно фрилансера, — систему контроля версий Git и платформу для совместной работы GitHub. Без них не обойтись в современной разработке. А для фрилансера это ещё и гарантия безопасности проектов и удобства работы с заказчиком.

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

Представьте: вы работаете над проектом, вносите изменения. Вдруг понимаете, что новая функция не работает или хотите вернуться к предыдущей, рабочей версии. Без системы контроля версий это превращается в хаос: вы сохраняете кучу копий файлов с названиями вроде index_final.html, index_final_v2.html, index_final_really_final.html. Знакомо? 😅

Git — это распределённая система контроля версий. Она позволяет:

Отслеживать все изменения в коде. Вы всегда знаете, кто, когда и что изменил.
Возвращаться к любой предыдущей версии проекта. Ошиблись? Не беда, можно откатиться.
Работать над проектом совместно с другими разработчиками, не мешая друг другу.
Создавать "ветки" (branches) для новых функций, не затрагивая основную рабочую версию.
Публиковать свои проекты и делиться ими с миром (и потенциальными заказчиками!).

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

Установка Git

Чтобы начать работать с Git, его нужно установить на компьютер.

Для Windows:
- Скачайте установщик с официального сайта Git: git-scm.com/download/win
- Запустите установщик и следуйте инструкциям. Обычно можно оставить настройки по умолчанию.
- После установки откройте командную строку (или Git Bash, который установится вместе с Git) и введите git --version. Если видите номер версии, Git установлен.
Для macOS:
- Git часто предустановлен. Проверьте, введя git --version в терминале.
- Если Git нет, установите его через Homebrew: brew install git или скачайте установщик с git-scm.com/download/mac.
Для Linux:
- Используйте менеджер пакетов вашей системы. Например, для Debian/Ubuntu: sudo apt-get install git.

Базовая настройка Git

После установки настройте Git: укажите имя и почту. Это нужно, чтобы Git знал, кто вносит изменения.

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

git config --global user.name "Ваше Имя"
git config --global user.email "ваша_почта@example.com"

Флаг --global означает, что эти настройки будут применяться ко всем вашим Git-репозиториям на этом компьютере.

Основы работы с Git: первый репозиторий

Создадим наш первый Git-репозиторий (хранилище проекта).

Создайте новую папку для проекта, например, my-first-project.
Перейдите в эту папку через командную строку:
```
cd my-first-project
```
Инициализируйте Git-репозиторий:
```
git init
```
Вы увидите сообщение Initialized empty Git repository in .... Это значит, что в вашей папке создана скрытая папка .git, которая будет хранить всю историю изменений.

Создайте файл index.html внутри этой папки и добавьте в него простой HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый проект</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый файл, отслеживаемый Git.</p>
</body>
</html>

Проверьте статус файлов:
```
git status
```
Git покажет новый, неотслеживаемый файл index.html (обычно красным цветом).
Добавьте файл в "область подготовленных изменений" (staging area):
```
git add index.html
```
Или, чтобы добавить все новые и изменённые файлы:
```
git add .
```
Теперь git status покажет, что index.html готов к коммиту (обычно зелёным цветом).
Сделайте "коммит" (commit): Коммит — это "снимок" проекта в определённый момент. Каждый коммит должен иметь осмысленное сообщение, описывающее изменения.
```
git commit -m "Initial commit: Add basic index.html structure"
```
После этой команды index.html будет сохранён в истории Git.

Измените файл index.html, например, добавьте ещё один параграф:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый проект</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый файл, отслеживаемый Git.</p>
    <p>Добавили новый параграф.</p>
</body>
</html>

Повторите шаги 5-7:

git status
git add .
git commit -m "Add new paragraph to index.html"

Посмотрите историю коммитов:
```
git log
```
Вы увидите список всех коммитов с информацией об авторе, дате и сообщении.

GitHub: ваш онлайн-репозиторий

GitHub — платформа для хранения Git-репозиториев в облаке. Это удобно для резервного копирования, демонстрации проектов и совместной работы.

Создайте аккаунт на GitHub: Если его нет, зарегистрируйтесь на github.com.
Создайте новый репозиторий:
- После входа нажмите кнопку "New" (или значок "+") в правом верхнем углу.
- Дайте репозиторию имя, например, my-first-project.
- Оставьте его "Public", чтобы его могли видеть потенциальные заказчики.
- Не ставьте галочки "Add a README file" и "Add .gitignore" — мы добавим их позже.
- Нажмите "Create repository".
Свяжите локальный репозиторий с GitHub: После создания репозитория GitHub покажет инструкции. Нас интересуют команды для "push an existing repository from the command line".

Вернитесь в командную строку в папке проекта и выполните:
```
git remote add origin https://github.com/ВАШ_НИКНЕЙМ/my-first-project.git
git branch -M main
git push -u origin main
```
- git remote add origin ... — добавляет удалённый репозиторий с именем origin (стандартное название для основного удалённого репозитория).
- git branch -M main — переименовывает текущую ветку в main (это стало стандартом вместо master).
- git push -u origin main — отправляет (push) все коммиты из локальной ветки main в удалённый репозиторий origin. Флаг -u устанавливает связь между локальной и удалённой ветками.
Возможно, потребуется ввести логин и пароль от GitHub (или использовать Personal Access Token, если настроена двухфакторная аутентификация).

Теперь, если вы обновите страницу репозитория на GitHub, вы увидите все файлы и историю коммитов! 🎉

Что дальше?

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

На следующем этапе мы рассмотрим инструменты разработчика в браузере — ещё один мощный набор средств, который поможет вам отлаживать, анализировать и оптимизировать фронтенд-проекты прямо в браузере. Это незаменимый помощник для каждого верстальщика и фронтенд-разработчика!