Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.
Что это такое, для чего нужно, чем это может быть полезно и как этим пользоваться - всё узнаете сейчас. Это будет пошаговое руководство к тому чтобы в итоге вы могли спокойно вносить изменения в исходный код (без страха что всё поедет нафиг) и пользоваться pull request (ПР), а также совместно работать над одним проектом. Все спецтермины Гита и Гитхаба выделены жирным и ведут к официальному руководству.
Гайд написан для самых-самых новичков, которые только делают свои первые шаги в веб-разработке и ищут способы облегчить и упростить себе работу. Я ничего не писала сама, всё исключительно перевод из сети. Нашла источники и собрала их вот в такой вот гайд. Да, источники в основном англоязычные и указаны ниже.
Как водится, перед началом практической части должно идти предисловие. Этот гайд не будет сильно нагружать теорией и расскажет самое-самое основное.
Что такое Гит (Git)?
Git — распределённая система управления версиями. Она помогает отслеживать изменения, которые делаются во время работы. Согласитесь, полезная штука для веб-разработок, верно? С помощью гита можно откатиться до любого сохранения вашего файла (совсем как в машине времени!). Также можно копировать файл, вносить изменения в копию, а затем сравнить изменённый вариант с оригиналом.
Например, вы занимаетесь вёрсткой и заметили что оформление навигации, которое вы сверстали, вам не нравится. Но, как это обычно бывает, становится страшно (или лень) что-то менять, потому что может стать только хуже. А с помощью гита можно создать точную копию кода и экспериментировать сколько душе угодно и потом сравнить итоговый код в копии и оригинал.
Но гит полезен не только для файлов с исходным кодом. С помощью него можно отслеживать изменения в текстовых файлах или даже в изображениях! Что означает гит не только полезен разработчикам.
Что такое Гитхаб (GitHub)?
GitHub — крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки. То есть, это хостинг (или хранилище) вашего кода, картинок и всего что нужно для вебдизайна и вебразработок. И не только! Проект может быть любым: можно разрабатывать программу, скрипт, дизайн и так далее.
Работаете ли вы в одиночку или в команде GitHub обязательно пригодиться. Если вы работаете один, то там можно хранить всё что вы сделали и показывать код другим. Там можно смотреть схожие работы и даже копировать (fork) понравившиеся, а после дорабатывать или разбирать и использовать в своём проекте. А в командной работе Гитхаб не только помогает упросить работу нескольким разработчикам над одним файлом, но и спасает от конфликтов и глюков, повышая качество кода.
Git Vs GitHub
Ещё раз: Git — распределённая система управления версиями, то есть программа (что она делает читайте выше), а GitHub и другие сервисы типа GitLab или BitBucket (да, Гитхаб не единственный, но самый известный) - это вебсайты, которые выступают хостингами (т. е. хранилищем) для вашей Гит-программы и кода.
Шаг 0: Установите Гит и создайте аккаунт в Гитхабе
Самое первое что надо сделать это установить Гит и создать аккаунт в Гитхабе если его у вас нету.
Скачайте последнюю версию гита с официального сайта, Следуйте инструкциям здесь чтобы установить гит. Обратите внимание что в этом руководстве будет использована только командная строка. Да, существуют прекрасные GUI (графические интерфейсы) для гита, но лучше всего начать постигать гит с изучения специфических команд и только потом обращаться к интерфейсам.
Для настройки гита и для работы с ним мы будем пользоваться командной строкой (консоль или терминал). Если вы не знаете что это, можете прерваться на чтение гайда или поискать информацию по этой теме самостоятельно. Если понимаете о чём речь и готовы идти дальше, вперёд!
Откройте командную строку и проверьте какая версия программы у вас установлена, написав команду:
git --version
Теперь нужно указать имейл и имя пользователя. Гиту нужна эта информация чтобы показывать кто сделал изменения в коде. Даже если вы планируете работать в одиночку, всё равно укажите! Это будет тренировкой написания команд. В командной строке напишите:
git config --global user.name "YOUR_USERNAME"
git config --global user.email "YOUR_EMAIL"
Естественно, "YOUR_USERNAME" и "YOUR_EMAIL" нужно заменить на свои значения.
После того как установка гита закончена, создайте аккаунт в Гитхабе. Придумайте логин, пароль, укажите имейл и нажмите "Sign up for GitHub". После входа увидите:
Шаг 1: Создайте свой первый репозиторий
Начиная новый проект локально с помощью гита, вам сначала нужно создать репозиторий. Репозиторий - это место или хранилище где будет что-то хранится (ну, логично же!). В нашем случае мы будем там хранить код.
На Гитхабе нажмите + в правом верхнем углу и в выпадающем меню "New Repository". Дайте имя вашему репозиторию. Например, "Demo". И нажмите "Create Repository". Все остальные опции на странице вам пока не нужны, не обращайте на них внимания пока.
Поздравляю! Первый шаг сделан!
Шаг 2: Создайте новый файл в репозитории
После того как репозиторий создан, он будет выглядеть как-то так:
Без паники! Это проще чем кажется! Найдите строчку "...or create a new repository on the command line," (всё остальное пока можно проигнорировать).
Вот теперь-то нам нужна командная строка и гит (убедитесь что он у вас установлен). В командной строке напишите команду:
mkdir Demo
Это создаст папку "Demo". Чтобы теперь работать непосредственно в папке "Demo" нужна команда cd (change directory):
cd Demo
Чтобы создать новый файл, напишите:
echo "#Demo" >> README.md
Это создаст файл README.md, в котором внутри будет написано "#Demo". Чтобы это проверить, напишите:
cat README.md
Это покажет содержимое файла README.md и если файл был создан, то вот как будет выглядеть ваша консоль:
Теперь дайте понять своему компьютеру что Demo управляется программой Гит. Для этого напишите:
git init
А теперь дайте понять Гиту что вам важен этот файл (README.md) и там нужно отслеживать изменения начиная с текущего момента. Для этого нужно написать:
git add README.md
Шаг 3: Создайте коммит
Итак, вы создали файл и сообщили об этом Гиту, а теперь самое время создать коммит. Коммит можно назвать краеугольным камнем. Каждый раз когда вы что-то делаете, вы можете написать Гиту коммит чтобы он сохранил эту версию файла, к которой можно вернуться в любое время при необходимости. А во время работы с кодом это частенько бывает нужно. Знайте, что каждый раз, внося правки в файл, вы создаёте его новую версию, которая будет отличаться от предыдущей.
Чтобы создать коммит напишите:
git commit -m "first commit"
Всё! Поздравляю! Вы только что создали коммит в котором написано "first commit". Важно подписывать коммиты. Это поможет не только в них разобраться через какое-то время, но и понять что вы вообще делали (иногда это сделать непросто без посторонней помощи). Например, если вы допишете в файле код, вы можете создать коммит с надписью "Добавлен новый код" и когда через месяц вы будете просматривать историю коммитов или логи (Git log), то поймёте всё.
Шаг 4: Создайте Ветвление (Branch)
С коммитом справились, самое время попробовать что-то посложнее!
Представьте что вам нужно добавить какой-то новый функционал, но вы сомневаетесь стоит ли и хотели бы попробовать дополнить код, но с возможностью вернуть всё как было. Это возможно с помощью ветвлений гита.
Ветвлении помогают переключаться вперёд и назад по стадиям проекта. Например, если на сайт нужно добавить страницу, можно создать отдельное ветвление для этого, которое никак не повлияет на другую часть проекта. После завершения работы можно будет влить ветвление в основную частью проекта. Как?
В командной строке напишите:
git checkout -b <my branch name>
Это создаст ветвление и перенесёт вас туда.
Также можно использовать команду для проверки, действительно ли ветвление создано. С этим поможет команда git branch
Например:
mnelson:myproject mnelson$ git branch
master
* my-new-branch
Если увидите звёздочку возле названия ветвления, значит именно там вы находитесь
Шаг 5: Познакомьте репозиторий на Гитхабе с вашим компьютером
Чтобы ваш компьютер был подсоединён к репозиторию на Гитхабе, напишите:
git remote add origin https://github.com/<your_username>/Demo.git
Что мы хотим этим сказать? А этим мы объясняем Гиту что надо добавить удалённый репозиторий (remote) под названием origin к адресу https://github.com/<your_username>/Demo.git (то есть, ссылка на ваш репозиторий в Гитхабе).
Это поможет избежать необходимости указывать полные ссылки, вместо этого указывая просто origin во время работы с вашим Git-репозиторием, загруженным на GitHub.com Почему origin? Просто так, название может быть любым.
Итак, вы подсоединили ваш локальный git-репозиторий с GitHub.com и ваша командная строка выглядит так:
И теперь мы можем загрузить наш файл README.md на Гитхаб. Ваша командная строка будет выглядеть так:
А если перейти по адресу https://github.com/<your_username>/Demo то вы должны увидеть это:
Шаг 6: Отправьте ветвление в удалённый репозиторий
Сейчас вы научитесь отправлять ветвление и коммит в удалённый репозиторий. Это позволит другим (если работаете в команде) видеть ваши изменения. Если работаете в одиночку, это тоже полезно, так как даже если ваш комп сгорит останутся файлы и вся история изменений кода и работы над проектом. Полезно!
Чтобы отправить изменения нужна команда git push:
git push origin yourbranchname
Например:
mnelson:myproject mnelson$ git push origin my-new-branch
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 313 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/cubeton/mynewrepository.git
* [new branch] my-new-branch -> my-new-branch
Может возникнуть вопрос а что за " origin" такой? Когда вы клонируете удалённый репозиторий на свой компьютер, гит создаёт название сам. Чаще всего это "origin". По сути, это сокращение от URL-адреса удаленного репозитория. Так что чтобы отправить ветвления и коммиты нужно писать в командной строке:
git push git@github.com:git/git.git yourbranchname
Или:
git push origin yourbranchname
Если обновите страницу с проектом на гитхабе, увидите надпись что ветвления с вашим именем были отправлены в репозиторий. Если нажать на ссылку "branches" можно будет увидеть список ветвлений.
А теперь нужно нажать зелёную кнопку из скриншота выше. И это создаст ПР (pull request)!
Шаг 7: Создайте ПР (pull request)
ПР (или pull request) уведомит владельца репозитория что в его коде собираются делать какие-либо изменения. Это позволит посмотреть код, убедится что он правильный до того как вносить его в основное ветвление (primary branch).
Вот как страница с ПР выглядит до отправки:
А вот как после:
На скриншоте видна большая зелёная кнопка с надписью "Merge pull request". Если на неё нажать, изменения попадут в основное ветвление (primary branch).
Если вы владелец или совладелец репозитория, создавать ПРы не обязательно. Но это всё ещё хорошая опция для создания более детализированной истории изменений кода и чтобы не забывать каждый раз создавать ветвления для новых изменений и дополнений текущего кода.
Шаг 8: Соедините (Merge) ПР
Итак, смелее! Нажмите на кнопку "Merge pull request", что соединит ваш ПР с основным ветвлением.
После успешного слияния прежнее ветвление нам не нужно, его можно оставить или удалить. Рекомендуется удалять чтобы потом не запутаться в этих ветвлениях. Чтобы удалить надо нажать на серую кнопку "Delete branch".
Можно перепроверить было ли слияние коммитов с основным ветвлением, нажав ссылку 'Commits' на первой странице вашего репозитория. Там будет список коммитов, новые показаны наверху списка.
В углу вы увидите хеш код. Хеш код - это уникальный идентификатор для определённого коммита. Он удобен если нужно ссылаться на определённые коммиты или отменять изменения.
Для отмены изменений используется команда git revert:
git revert <hash code number>
Шаг 9: Внести изменения с гитхаба на свой компьютер
После работы в гитхабе репозиторий там и репозиторий у вас на компьютере выглядят неодинаково. Чтобы это исправить нужна команда git pull origin master command или коротко git pull:
mnelson:myproject mnelson$ git pull origin master
remote: Counting objects: 1, done.
remote: Total 1 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (1/1), done.
From https://github.com/cubeton/mynewrepository
* branch master -> FETCH_HEAD
b345d9a..5381b7c master -> origin/master
Merge made by the 'recursive' strategy.
mnelson.txt | 1 +
1 file changed, 1 insertion(+)
В коде выше показано какие и сколько файлов были изменены.
Чтобы посмотреть изменения нужна команда git log. И вот что-то вроде этого вы должны увидеть:
mnelson:myproject mnelson$ git log
commit 3e270876db0e5ffd3e9bfc5edede89b64b83812c
Merge: 4f1cb17 5381b7c
Author: Meghan Nelson <mnelson@hubspot.com>
Date: Fri Sep 11 17:48:11 2015 -0400Merge branch 'master' of https://github.com/cubeton/mynewrepository
commit 4f1cb1798b6e6890da797f98383e6337df577c2a
Author: Meghan Nelson <mnelson@hubspot.com>
Date: Fri Sep 11 17:48:00 2015 -0400added a new file
commit 5381b7c53212ca92151c743b4ed7dde07d9be3ce
Merge: b345d9a 1e8dc08
Author: Meghan Nelson <meghan@meghan.net>
Date: Fri Sep 11 17:43:22 2015 -0400Merge pull request #2 from cubeton/my-newbranch
Added some more text to my filecommit 1e8dc0830b4db8c93efd80479ea886264768520c
Author: Meghan Nelson <mnelson@hubspot.com>
Date: Fri Sep 11 17:06:05 2015 -0400Added some more text to my file
commit b345d9a25353037afdeaa9fcaf9f330effd157f1
Author: Meghan Nelson <mnelson@hubspot.com>
Date: Thu Sep 10 17:42:15 2015 -0400This is my first commit!
Это покажет все новые коммиты на вашем компьютере.
Шаг 10: Дальнейшее изучение
Если вы добрались до этого шага - поздравляю! Самые основы вы изучили. Чтобы больше разобраться в теме и копнуть глубже вот список источников и материалов где это можно сделать.
Источники:
(использовались при создании статьи)
Русскоязычная документация:
Англоязычные ресурсы:
Русскоязычные ресурсы:
Если у вас есть другие ссылки на ресурсы - пишите в теме и я добавлю их в списки.
Также вы можете попросить помощи наставников разобраться в этой теме на практике - для этого раздел "Обмен опытом" к вашим услугам. И/или можно задать вопросы в текущей теме. Я не выступаю тут учителем я всего лишь переводчик, но наши специалисты ответят и подскажут.
В любом случае, собираетесь ли вы верстать серьёзные проекты или просто дизайны для ролок - знания гита и гитхаба никогда не будут лишними. А в случае с мубб-форумами, у нас есть стайлер, где как раз подобные знания нужны для пользования этим пакетом.
