Самая короткая инструкция о том, как сохранить файлы в GitHub и ничего не сломать. И самое главное — никакой консоли, всё через окошки и с помощью мышки. Для этого используем GitHub Desktop.

Внимание! GitHub Desktop не работает на Windows 7×32, поэтому если у вас эта версия системы, обновитесь до Windows 10 или воспользуйтесь программой GitKraken на свой страх и риск.

В этой статье идёт рассказ о системах контроля версий. Если вы совсем ничего о них не знаете, прочитайте статьи «Словарь терминов для Git и GitHub» и «Введение в системы контроля версий», чтобы понять терминологию и разобраться, зачем мы вообще это делаем.

Регистрация и вход

Если у вас ещё нет аккаунта на GitHub, то о его создании есть отдельная статья в блоге Академии.

После первого входа в GitHub Desktop вас попросят ввести ваши логин и пароль от GitHub. com. После этого у вас появится доступ ко всем репозиториям, сохранённым в профиле.

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

Если вы никогда не пользовались гитхабом, нужно будет создать репозиторий для работы над проектом.

На главном экране GitHub Desktop выбираем пункт «Create a New Repository on your hard drive».

Главный экран GitHub Desktop

Нужно будет ввести название репозитория, его описание и выбрать папку на компьютере, куда будут сохраняться файлы.

Процесс создания нового репозитория

После этого нажимаем на Create repository, ждём несколько секунд и готово — на компьютере появилась папка, которой можно пользоваться для разработки вашего проекта.

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

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

Выбираем Add -> Clone Repository...

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

В открывшемся окне выбираем один из имеющихся репозиториев. В данном случае он называется zaverstai, но у вас может быть любой другой.

Выбираем, что клонировать

После этого файлы репозитория начнут скачиваться — если их много, то это займет некоторое время.

Процесс скачивания файлов

Работа с репозиторием. Меняем файлы и сохраняем обратно

Вне зависимости от того, создали вы репозиторий или клонировали его, так выглядит GitHub Desktop с открытым репозиторием, в котором мы пока ничего не меняли.

Как выглядит GitHub Desktop с открытым репозиторием

Слева — поле для измененных файлов, справа — служебная информация. Слева снизу — поле для коммитов.

Если не усложнять, то склонированный репозиторий это просто каталог на компьютере. Можно нажать «Show in Finder» на Mac или «Show in Explorer» в Windows и откроется папка, где лежат все файлы, которые есть в репозитории.

Инструкция, как открыть папку, где лежат все файлы, которые есть в репозитории

Давайте добавим какой-нибудь файл. Например, я добавил в локальный репозиторий (скопировал в папку) файл index. html, который взял отсюда. Вы можете загрузить файл с кодом вашего проекта или изменить уже существующий.

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

Пример с тем, что изменилось — если мы добавили целый новый файл

Загружаем новый репозиторий на GitHub

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

После того, как мы добавили какой-то код в свежесозданный репозиторий, нужно сделать коммит, то есть зафиксировать все сохранённые изменения и дать им название. Текст должен быть лаконичным и в то же время сообщать о том, что делает коммит. Например, «добавляет имя наставника в Readme», «вводит функцию сортировки изображений», «правит ошибку в поиске городов на карте». Вводим имя жмём большую синюю кнопку «Commit to main»

Как загрузить новый репозиторий на GitHub

Изменения, которые мы внесли и сохранили, пока локальны. Их нужно послать на GitHub. Чтобы опубликовать свежесозданный репозиторий на GitHub, нажмите Publish repository.

Как опубликовать репозиторий

Появится подтверждение о публикации репозитория — проверяем название и описание, если нужно, ставим галочку о том, что код приватный, и публикуем.

Как выглядит подтверждение о публикации репозитория

Готово — после этого репозиторий появится в вашем профиле на GitHub. com.

Добавляем код и коммитим изменения

Репозиторий создан и загружен на GitHub, теперь нужно добавить немного кода.

Когда вы допишете код в файлы, которые находятся в репозитории, вы сможете просмотреть все их изменения в окне GitHub Desktop. Вот здесь, например, мы изменили «второй» на «третий» в тексте страницы — и изменения сразу видны, можно проверить, что всё исправленное будет загружено.

Добавляем код и коммитим изменения

Дальше действуем по проверенной схеме — коммитим изменения.

Коммитим изменения

В центре главного экрана появится предложение запушить коммит в удалённый репозиторий. Соглашаемся и жмём Push origin.

Пушим изменения

Готово! Теперь, если зайти на GitHub. com, в наш репозиторий, увидим уже изменённый файл, который мы только что отправили.

Изменённый файл на GitHub.com

Всё получилось — теперь вы можете создать или склонировать репозиторий, добавить туда файлы, опубликовать всё это на GitHub. com, не прикасаясь к консоли. Это ли не чудо!


В этой статье была показана работа только с основной веткой репозитория. Если вы хотите разобраться, как создавать новые ветки (и зачем это нужно) и добавлять их в основную ветку, прочитайте статью «Работа с git через консоль». Это более сложная статья, поэтому можете сделать небольшой перерыв и вернуться к ней позже.


Без Git веб-разработчику никуда

Но без кода Git не пригодится. Поэтому прокачайте навыки в JavaScript на курсе «Архитектура клиентских приложений».

Хочу