Github как создать ветку в браузере
В предыдущих статьях мы рассказывали, что такое GitHub, как его настроить и как опубликовать свой проект. Но это лишь малая часть его инструментов. Одним из ключевых моментов для GitHub является работа с ветками — разбираемся с ними в этой статье.
Ветка (branch) — это история коммитов. Давайте сначала разберемся, что это такое.
Коммит (commit) — это информация об измененных файлах. Коммит состоит из автора коммита, измененных файлов, HEAD и времени. Для примеров мы будем использовать репозиторий и сделаем первый коммит, который отправим на сервер. Он нужен для того, чтобы разграничивать задачки. Так будет понятно, какой код в истории относится к той или иной задаче, чтобы потом мы могли быстро понять суть.
Например, у нас задача — сделать блок формы. Для этого мы сделаем нужные изменения в файле index.html & style.css, и даже через месяц сможем при помощи истории изменений просмотреть измененные куски кода именно для этого блока.
При помощи команды git log в консоли мы можем отслеживать историю коммитов в ветке.
На самом GitHub мы можем увидеть последний коммит в файле и последний коммит в ветке. Всю историю мы можем просмотреть, кликнув по кнопке n commits, где n — количество запущенных на сервер коммитов. У нас в ветке пока что один коммит, поэтому на ссылке надпись 1 commit.
Сама история будет выглядеть как список коммитов без подробностей об изменённых файлах. Здесь давайте подробнее остановимся на том, что такое HEAD коммита. Это специальный указатель, при помощи которого вы можете гибко управлять коммитами — например, склеивать или сбрасывать до нужного момента.
Теперь подробнее разберем, как создавать коммит. Для начала нам нужно будет поменять файлы или добавить новые, чтобы было что коммитить, так как коммит — это история изменений. Как правило, в коммит включают изменения по одной задаче.
В нашем примере мы изменим содержание страницы index.html и добавим стили в style.css.
Изменения, не включенные в коммит, мы можем просмотреть при помощи команды git status.
Чтобы добавить файлы в коммит, мы будем использовать git add. Здесь мы можем указать нужные нам файлы для коммита, например, index.html. Если после этого мы сделаем git status, то эти файлики подсветятся зелёным — это означает, что мы можем добавить их к коммиту.
Но не всегда удобно вручную вбивать все изменённые файлы. В GitHub мы можем воспользоваться командой git add . — точка означает, что в коммит добавятся все изменённые файлы.
Теперь мы можем создать наш коммит при помощи команды git commit -m ‘текст коммита’. В тексте обычно рассказывается в паре слов о том, что было сделано — например, «добавили стили для index.html». Название коммитов пишут на русском или английском языке — зависит от того, как вы договоритесь с командной. После того, как вы создадите коммит, он появится у вас в истории.
Если мы запушим наш результат на GitHub, то увидим наш коммит.
После того, как мы поменяли наш коммит локально, запушим его на сервер при помощи ключа force. Обычный push не сработает, так как у нас уже есть коммит на сервере — здесь будьте аккуратны, ведь вы меняете историю не только локально, но и удалённо.
Теперь поговорим про ветки (branch). Ветка — это история изменений. Сейчас у в репозитории одна ветка main, в которой хранится стабильная версия. Как правило, новые задачи делаются в новых ветках, а потом вливаются в main после ревью кода.
Посмотрим, как выглядит наша ветка с двумя коммитами в графике.
Представим, что у нас есть задача — сделать форму на главной странице. Для этого создадим новую ветку git checkout -b form-index (ключ -b означает, что мы создаем новую ветку).
Ветки можно просматривать при помощи команды git branch.
История наших коммитов пока одинаковая — что у main, что у form-index. git checkout main без ключа -b означает, что мы переключаемся на уже существующую ветку.
Пробежимся git log и сравним наши ветки.
Тем не менее, если мы зайдем на GitHub, то обнаружим, что у нас там только одна ветка — main. Так происходит, потому что ветка form-index существует пока только на нашем компьютере, то есть локально.
Чтобы наша новая ветка появилась на сервере, нам нужно запушить наши изменения.
Если посмотрим на историю коммитов в form, то увидим, что она отличается от main на один коммит.
Мы можем создавать новые ветки не только из main, но и из других веток — так делают редко. Самое главное здесь понять, что если мы создали новую ветку из другой ветки, то мы наследуем историю коммитов ветки, из которой создали ветвление, но только в момент создания.
Давайте создадим ветку form-index-fix и посмотрим на историю коммитов в ней.
Теперь поэкспериментируем и посмотрим, что будет, если мы внесём изменение в ветку и забудем их закоммитить: обычный механизм через checkout не сработает, консоль попросит закоммитить изменения.
Если ветка потеряла свою актуальность, мы можем её удалить локально при помощи команды git branch -D название ветки. Здесь важно отметить, что вы не можете удалить ветку, если вы сейчас в ней — обязательно нужно переключить её.
Если ветку нужно удалить на сервере, то сделать это можно при помощи интерфейса GitHub — нет рекомендаций, когда нужно удалять удалённые ветки.
Иногда, исследуя чужие репозитории на github, замечаешь ошибки, неточности или же понимаешь, что мог бы добавить что-нибудь полезное, но, кого-то необходимость выполнять кучу действий в командной строке может отпугнуть, кому-то она в данный момент не доступна, и мы проходим мимо.
Многие опытные пользователи github-а знают, что отнюдь не для всего обязательно нужно использовать командную строку. Все это так.
Здесь я собрал несколько рецептов, используя которые, вы сможете без единой команды git, скопировать себе репозиторий, создать там вспомогательную ветку, в ней что-то отредактировать, добавить/удалить файлы/папки, сделать пулл-реквест в оригинальный репозиторий. А по истечению какого-то времени, когда в оригинальном репозитории накопятся изменения не отраженные в нашей копии — синхронизировать эти два репозитория — причем тоже без единой git-команды.
Думаю с созданием форка (копированием репозитория к себе) — все легко справятся, поэтому сразу идем дальше.
Создание ветки
Считается признаком хорошего тона, если вы оформите свои правки в отдельной ветке, ведь хозяин оригинального репозитория может попросить вас что-то поменять/доработать перед слиянием.
Создать новую ветку (копированием из текущей) можно прямо в окошке смены ветки. Вводим имя — enter — готово.
Добавление файлов
Создание новых файлов здесь же — далеко ходить не нужно. Жмем "+"
И сразу же переходим в режим редактирования вновь созданного файла:
Здесь можно отредактировать как сам файл, так и его имя. В редактировании имени есть одна интересная особенность — используя '/' и '../' можно перемещаться по дереву каталогов. (в итоге, при создании файла, заодно будут созданы, не существовавшие до этого папки)
Синхронизация форка с основным репозиторием
Часто бывает так, мы делаем форк репозитория, правим там что-то, делаем pull-request. Автор принимает этот pull-request и мы успокаиваемся на некоторое время. Через пару месяцев, мы вновь хотим что-то улучшить, но наша копия уже безнадежно устарела. Здесь требуется синхронизация. Легко можно найти как это сделать, используя командную строку. Намного реже встречается объяснение того, как это сделать непосредственно на github.
- открываем свой форк на github
- заходим с список его pull-request-ов
- жмем «New Pull Request», по умолчанию github берет за базу оригинальный репозиторий и сравнивает наш с ним, но нам нужно наоборот
- жмем «switching the base», (если мы что-то редактировали в своей копии, нужно нажать Edit, и вручную поменять базу) — сразу же увидим все, что в оригинальном репозитории было добавлено в последнее время
- жмем «Создать Pull-request», даем ему какое-нибудь понятное имя, типа «Update from original»
- жмем «Send pull request»
- жмем «Merge pull request» и подтверждаем это действие — все
P.S.
Я не стал здесь описывать очевидные вещи: как сделать форк, как сделать pull-request — так как они делаются в 1 клик.
А что еще из неочевидного можно делать с репами без использовани командной строки?
В прошлой статье, я рассказал, что такое Git, как его установить и выложить свой код на GitHub. Сегодня мы поговорим про работу в команде над одним проектом. И как это устроено в Git.
В данной статье, вся работа с Git будет через командную строку.
Совместная работа
Представим, что вы с друзьями придумали проект, с "блэкджеком" и . Вы разделили обязанности. Кто-то будет делать авторизацию и регистрацию, а кто-то функционал вывода новостей. Для этого вам пригодится ветвление.
Ветка - это набор commit (кружок), которые идут друг за другом. У ветки есть название, основную ветку чаще всего называют master (на картинках будет называться main ) . Если говорить простыми словами, то ветка master - это наш проект.
Другие ветки - это отдельное место для реализации нового функционала или исправление багов (ошибок) нашего проекта. То есть, с отдельной веткой вы делаете что угодно, а затем сливаете эти изменения в основную ветку master .
? Не рекомендую создавать commit напрямую в master . Лучше для этого заводить новую ветку и все изменения писать там.
Для того, чтобы создать новую ветку вводим:
Эти команды делают тоже самое, только второй вариант позволяет сразу переключиться в новую ветку. Вносить изменения в новую ветку можно сразу после ее создания.
При создании новой ветки, старайтесь называть ее кратким и ёмким именем. Чтобы сразу было понятно, что именно изменялось по проекту. Если вы используете, какую-нибудь систему для ведения задач, то можете в начале названия ветки указывать ID задачи, чтобы можно было легко найти, на основе какой задачи была создана ветка. Например вот так:
В каждом новом commit следует оставлять коммент и в нем описывать суть изменений.
Переключаться между ветками можно такой командой:
После того, как вы завершили работу над своей задачей, ветку можно слить в master . Для этого нужно переключиться в ветку master и выполнить следующую команду:
❗️ Перед тем как сливать новый merge , стоит обновить локальную ветку master , во избежания дальнейших проблем.
Команда merge берет все изменения из ветки (например bugFix ) и добавляет их в ветку master .
Для того чтобы посмотреть текущее состояние ветки, например, какие файлы добавлены или не добавлены для создания commit, можно выполнить команду:
?Совет. Каждый коммит, лучше заливать сразу в удаленный репозиторий. Никто не застрахован, поломки собственного ПК. Поэтому чтобы не потерять все наработки, не забывайте сливать ваши изменения на GitHub.
Как же теперь другой человек получит все ваши изменения?
Если у вашего друга раньше не было проекта, то ему придется его "клонировать" себе:
? Адрес репозитория на GitHub можно получить, нажав на зеленую кнопку Code
После выполнения команды, в папке где появиться проект и ваш друг сможет с ним работать. Все ветки и их история также подтянуться.
Теперь самое главное
Перед тем, как создавать новый функционал и новую ветку, стоит обновить master на вашем устройстве. Для этого нужно находиться в этой ветке и выполнить следующую команду:
Таким же образом можно актуализировать любую другую ветку, заменив название ветки master на вашу.
Для обновления всех веток сразу, можно использовать такую, команду, но не рекомендую:
Теперь можно создавать новую ветку и кодить.
Какие проблемы могут возникнуть?
Git старается автоматически сливать изменения, однако это не всегда возможно. Иногда возникают конфликты. Например, когда в двух ветках были изменения в одной и той же строчке кода. Если такое произошло, то необходимо разрешить конфликт вручную. Для этого откройте файл там, где этого произошло. Например, вы можете увидеть что-то подобное:
Первый раздел (HEAD) - это то, что находиться в текущей ветке, куда вы пытались слить код. Второй раздел (между ==== и >>>>master ) - версия кода в ветке, откуда вы пытались слить код (в данном случае master ). Для того, чтобы разрешить конфликт, стоит оставить стили и привести файл в такой вид:
После внесения нужных изменений добавьте ваш файл через git add <имя_файла> как измененный и создайте новый commit:
Вспомогательные команды
Просмотреть изменения относительно двух веток можно командой:
Удалить ненужную ветку:
Просмотр историю ветки:
Подсказки по популярным командам:
Практика и вспомогательные инструменты
Для улучшения ваших навыков, в очередной раз оставлю ссылку на полезный тренажер с заданиями.
Так же, для удобства использования в Visual Studio Code, советую поставить это расширение, которое визуализирует ваши ветки и commit, и помогает с ними работать.
В телеграмм канале Step by Step , я публикую еще больше материала для тех, кто хочет научиться программировать и провожу обучающие стримы, для всех желающих.
GitHub — это хостинг: он позволяет хранить проекты удалённо на сервере и работать с ними из любой точки мира. Доступ к файлам есть у всех, у кого есть ссылка.
Одна из главных функций GitHub — контроль версий. Все изменения в коде можно отследить, поэтому в командной разработке это незаменимая вещь.
Кроме того, для начинающих разработчиков GitHub — это не только хостинг, но и способ собрать портфолио. Он позволяет продемонстрировать свои навыки и знания в виде реализованных проектов — во вкладке Repositories.
Из чего состоит проект в GitHub
Ветка main (или master). Это, как правило, основная ветка, в которой лежит самая актуальная, рабочая версия проекта.
Указатель HEAD позволяет гибко откатиться до нужной версии. HEAD на скриншоте ниже выглядит так: a8160621b3c61a07b6bbc75b41e5530ee997124b.
Стабильная и актуальная версия проекта, как правило, лежит в ветке main. Но мы можем создавать и свои ветки для новых задач, чтобы:
- не мешать другим разработчикам работать над задачами,
- не сломать текущую версию.
Пример. Разработчик Ваня берёт задачку по вёрстке index.html в ветке index. А разработчица Лена — catalog.html, в ветке catalog. На картинке ниже вы увидите, как это будет выглядеть на нашем визуальном отображении веток. Последний коммит в каждой ветке будет «добавили сборку».
Ваня быстрее Лены заканчивает свою задачку, делает коммит «сделал index.html» в свою ветку:
После того как он сольёт свою ветку в main, в ней появится его последний коммит «сделал index.html»:
Лена может забрать актуальную версию main (pull) в свою ветку. Тогда история её коммитов будет выглядеть так: «добавили сборку, сделал index.html».
Слияние веток
Ветки позволяют просматривать изменения. А чтобы сделать их слияние, понадобится функция pull request (pr).
Пример. Создаём ветку branch-1 в нашем репозитории и делаем в неё пуш коммита «Добавили данные»:
После этого мы можем сделать pull request в любую ветку, то есть заявку на слияние веток. GitHub сам подсветит изменённые строки, что очень удобно для ревью кода. Красным подсвечиваются удалённые строки, зелёным — добавленные.
Ревью кода
Когда над проектом ведут работу несколько разработчиков, очень важно, чтобы каждый понимал, что происходит в проекте, уточнял спорные моменты и предлагал более оптимальные решения. Этот процесс называется code review (ревью кода).
После того как ревью проведено, все спорные моменты решены, ошибки поправлены и есть подтверждения от других разработчиков (approve), происходит слияние веток (merge). Все коммиты из ветки branch-1 попадают в main, а в истории коммитов появляется отметка о слиянии.
Это вводная статья по GitHub, которая поверхностно описывает основные процессы. О создании веток и управлении ими мы обязательно расскажем в следующих материалах.
Читайте также: