Как залить проект на GitHub

Добавляем удалённый репозиторий

Репозиторий — это файловое хранилище проектов. На бесплатном тарифе можно загружать до 500 МБ данных и создавать неограниченное количество репозиториев.

Чтобы создать репозиторий, нажмите на кнопку New repository, назовите проект и кликните Create repository. Можно добавить описание проекта, сделать его публичным или приватным и прикрепить технические файлы:

• README file содержит подробное описание проекта — так другие разработчики узнают, какой репозиторий они смотрят и зачем он нужен.
• gitignore позволяет сэкономить место и не заливать на GitHub лишние файлы. Например, можно исключить скрытые файлы macOS.
• License добавляет к коду ссылку на первоисточник и защищает права разработчика. Лицензия позволяет понять, как правильно использовать чужой код и можно ли его свободно внедрять в коммерческие проекты.

Мы создаём тестовый репозиторий, поэтому обойдёмся без лицензии — выберем только два дополнительных файла: README file и gitignore. Если вы пока не знаете, что писать в README file и что добавлять в gitignore, — оставьте эти файлы пустыми или посмотрите инструкцию в разделе Read the guide.

В README file отображается краткое описание проекта — сейчас этот файл не важен, поэтому мы не будем менять его описание. Изменим файл gitignore и сделаем так, чтобы он не учитывал служебные папки операционной системы:

• Переходим на сайт gitignore.io.
• Добавляем macOS или другую операционку, с которой вы работаете.
• Жмём Create и получаем нужный служебный файл.
• Копируем данные и переносим их в файл gitignore на GitHub.

После редактирования gitignore делаем коммит — записываем в историю проекта факт того, что мы установили ограничение для файлов macOS.

Как добавить изменения на GitHub через приложение GitHub Desktop

В этом разделе мы установим приложение GitHub Desktop и с его помощью скачаем удалённый репозиторий к себе на компьютер. Затем мы добавим новый файл и обновим удалённый репозиторий. После создадим через GitHub Desktop новую ветку и синхронизируем сделанные изменения.

Переносим удалённый репозиторий на ПК

Перейдите на сайт desktop.github.com и скачайте GitHub Desktop — это приложение, которое позволит синхронизировать удалённый репозиторий на GitHub и файлы на вашем компьютере без командной строки терминала:

• Скачиваем приложение под свою операционную систему.
• Открываем приложение и проходим авторизацию — нужно указать электронную почту и данные вашего GitHub-аккаунта.
• Приложение синхронизируется с удалённым репозиторием и предложит выполнить одно из следующих действий: создать новый репозиторий, добавить локальную папку с компьютера в GitHub Desktop или клонировать существующий репозиторий в папку компьютера.

Мы создали тестовый удалённый репозиторий, поэтому выберем третий вариант — клонировать существующий репозиторий в папку компьютера.

После клонирования репозитория в рабочем пространстве появятся три вкладки: Current Repository, Current Branch и Fetch origin.

• Current Repository — раздел позволяет переключаться между несколькими репозиториями, отслеживать невнесённые изменения (вкладка Changes) и смотреть историю коммитов (вкладка History).
• Current Branch — раздел позволяет переключаться между несколькими ветками проекта.
• Fetch origin — раздел обновляет внесённые изменения и синхронизирует файлы локального и удалённого репозитория.

Обратите внимание на раздел Current Repository и вкладку Changes. В левом нижнем углу есть окно для добавления коммитов и комментариев — это означает, что вы можете записывать каждый шаг, не посещая сайт GitHub.

На скриншоте первый коммит технический, он указывает на то, что мы создали репозиторий. Второй коммит наш — им мы редактировали файл gitignore. История хранит все коммиты, и мы можем вернуться к любому из них. Это страховка от непредвиденных случаев.

Добавляем новые файлы на ПК и переносим их в удалённый репозиторий

Папка с файлами нашего репозитория хранится на рабочем столе. Чтобы продолжить работу, откроем проект в редакторе кода: можно выбрать любую программу, и GitHub Desktop предлагает воспользоваться Atom.

Выбор редактора кода — дело вкуса. Мы будем работать с репозиторием в Visual Studio Code — это бесплатный редактор от компании Microsoft.

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

Переходим в GitHub Desktop — созданный HTML-файл появится во вкладке Changes. Для его сохранения пишем коммит и переходим во вкладку History для просмотра изменений. Если изменения сохранились, нажимаем на Push origin и отправляем изменения в удалённый репозиторий.

Создаём новую ветку и добавляем в проект внесённые изменения

Добавим к проекту пустой CSS-файл и подключим его к HTML. После этого в меню редактора появятся два цвета: HTML-файл подсветится оранжевым, а CSS-файл — зелёным. Оранжевый означает, что файл уже есть в удалённом репозитории и его нужно обновить. Зелёный — что файла нет в репозитории. Переходим в GitHub Desktop и добавляем коммит для этого изменения.

Если мы откроем созданную страницу в браузере, то это будет несколько строчек текста на белом фоне. Представим такую ситуацию: нам нельзя изменять код проекта, но нужно посмотреть, как будет выглядеть страница на красном фоне. Чтобы сделать это, добавим в репозиторий новую ветку:

• Переходим в GitHub Desktop.
• Открываем раздел Current Branch, нажимаем кнопку New Branch, пишем название новой ветки и кликаем Create New Branch.
• Возвращаемся в редактор кода и тестируем идею.

После создания новой ветки не забудьте нажать на Push origin, чтобы изменения попали в удалённый репозиторий на сайте GitHub.

Предположим, наша идея с красным фоном оказалась удачной и код нужно залить в основную ветку. Чтобы это сделать, переходим на сайт GitHub, нажимаем кнопку Сompare & pull request и подтверждаем изменения кнопкой Merge pull request. Последний шаг — переходим в GitHub Desktop, кликаем Fetch origin и синхронизируемся с удалённым репозиторием. Теперь код из дополнительной ветки попал в основную, а изменения есть на ПК и в облаке.

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

В приложении GitHub Desktop мы выполняли следующие действия:

• перенесли удалённый репозиторий с GitHub на компьютер;
• добавили новый файл и залили его на GitHub;
• создали ветку, добавили в неё новый файл и загрузили эти изменения в удалённый репозиторий на GitHub.

Теперь повторим эти действия с помощью командной строки. Для удобства создадим новый удалённый репозиторий, однако обойдёмся без файла gitignore и не будем выбирать тип лицензии. Для учебного проекта это не обязательно. Файл README также пока пропустим и добавим его в процессе через консоль.

Инициализируем локальный репозиторий

Запустите программу «Терминал» или iTerm2, если у вас macOS или Linux. Пользователям Windows можно работать в Git Bash.

Для начала создадим новую рабочую папку и перейдём в неё. После эту папку нужно передать под управление системы контроля версий Git:

• mkdir folder_name — создаём папку и придумываем ей имя;
• cd folder_name — переходим в папку с выбранным именем;
• git init — инициализируем в выбранной папке локальный репозиторий;
• ls -a — смотрим список открытых и скрытых файлов.

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

Читайте также:

Основные команды и горячие клавиши терминала Linux (а также Unix, macOS и FreeBSD)

Связываем локальный и удалённый репозиторий

Перейдите в GitHub-профиль, выберите репозиторий и кликните на кнопку Code. Скопируйте предложенную ссылку. Сейчас при заливке проекта в удалённый репозиторий мы будем работать через HTTPS-соединение. Однако вместо него можно использовать протокол SSH. Что это за протокол, как его подключить и зачем он нужен — рассказываем в отдельной статье.

Читайте также:

SSH: что это и как им пользоваться — гайд для новичков

После создания удалённого репозитория вам откроется инструкция для быстрого старта работы. В этой инструкции описаны основные консольные команды, которые понадобятся для связи локального и удалённого репозитория. На этой же странице вам предложат установить GitHub Desktop и выбрать между HTTPS- и SSH-соединением.

По инструкции мы должны перейти в консоль, создать текстовый файл README с расширением .markdown, инициализировать локальный репозиторий и выполнить коммит. Локальный репозиторий мы инициализировали на предыдущем шаге. Поэтому нам осталось выполнить следующие команды:

• echo "# NewTest" >> README.md — создаём файл с нужным текстом;
• git add README.md — переносим созданный файл в индекс;
• git commit -m "first commit" — сохраняем файл в локальном репозитории.

Если вы впервые слышите про Markdown — почитайте ознакомительную статью. В ней мы рассказываем, что это за разметка и зачем она нужна. А если вы хотите описать с помощью Markdown файл README — вот шпаргалка в помощь.

С 1 октября 2020 года команда GitHub отказалась от термина master, который задавал имя для главной ветки. Теперь ветка по умолчанию называется main. Изменения связаны с поддержкой движения Black Lives Matter — руководители GitHub посчитали, что слово master может звучать оскорбительно для кого-то из пользователей. Поэтому перед связыванием репозиториев желательно проверить имя главной ветки в Git и при необходимости её переименовать.

С помощью команды git branch вы можете посмотреть список доступных веток и их имена в вашем локальном репозитории. Возле одной из веток будет стоять звёздочка * — это ветка, в которой вы сейчас находитесь. Список веток отображается в режиме просмотра. Для выхода из него нажмите клавишу Q.

Для переименования текущей ветки выполните следующую команду:

git branch -m новое_имя_ветки

# Пример переименования ветки master в main 
git branch -m main

После переименования главной ветки можно связать локальный репозиторий с удалённым репозиторием на GitHub:

git remote add origin ссылка_на_репозиторий

Проверяем связь между репозиториями:

git remote -v

Если связь установлена, то вы увидите имя и URL-адрес удалённого репозитория. Должны появиться две записи, которые различаются текстом в скобках. В конце первой записи в скобках будет записано fetch, а в конце второй — push. Это означает, что репозитории настроены на скачивание и загрузку обновлений.

Заливаем изменения из локального репозитория на GitHub

У нас есть связанные репозитории и сохранённый файл README. Перенесём его в удалённый репозиторий на GitHub:

git push -u origin main 

Если вы продолжите работать в ветке main, то для загрузки новых изменений можно больше не использовать флаг -u и имя удалённого репозитория. Достаточно сокращённой команды:

git push

Откроем в консоли редактор Vim и добавим текст в файл README:

vim README.md

Проверяем статус локального репозитория и видим изменённый файл README:

Добавляем обновлённый файл README в индекс, создаём новый коммит и командой git push загружаем изменения в удалённый репозиторий на GitHub:

Создаём через консоль новую ветку и обновляем удалённый репозиторий

Выполним команду, чтобы создать новую ветку и сразу в неё перейти:

git checkout -b имя_новой_ветки

В новой ветке мы можем создавать файлы и папки, а затем залить их на удалённый репозиторий GitHub. Для этого нужно повторить действия, которые мы выполняли с файлом README: создаём коммит, связываем ветки локального и удалённого репозитория, загружаем изменения на GitHub.

Создаём ветку, добавляем в неё файл и фиксируем изменения:

Связываем новую локальную ветку с удалённым репозиторием:

Как залить папки и файлы с кодом на GitHub через VS Code

VS Code позволяет в одном окне писать код и взаимодействовать с Git и GitHub. Изменения можно сохранять через графический интерфейс или встроенную консоль. Ещё можно установить множество плагинов для комфортной работы.

В этом разделе мы создадим новые репозитории и поработаем с Git в VS Code. Если вам понравится этот способ, рекомендуем после прочтения статьи посмотреть документацию и подробно изучить все доступные возможности.

Добавляем файлы и папки в локальный репозиторий

Создадим на компьютере пустую папку с произвольным именем и перетащим её в редактор VS Code. После в главном меню выберем вкладку Терминал => Создать терминал. В редакторе появится консоль для ввода команд. Введём git init и инициализируем локальный репозиторий.

Добавим несколько папок и пустых файлов. Поскольку проект находится под контролем системы Git, то все новые файлы и папки с новыми файлами сразу подсвечиваются. Однако если папка пустая, то она подсвечиваться не будет:

Обратите внимание на буквы, возникающие справа от имени подсвечиваемых файлов. По этим буквам можно отслеживать состояние файлов в системе Git:

• Untracked — неотслеживаемый файл, который только попал в проект. В VS Code справа от таких файлов высвечивается буква U.
• Staged — проиндексированный файл, который перенесён в индекс. В редакторе такие файлы отмечены буквой A — сокращённо от Added, «добавленный».
• Unmodified — немодифицированный файл, который после коммита переместился из индекса в локальный репозиторий. Немодифицированные файлы в VS Code никак не подсвечиваются.
• Modified — модифицированный файл. Это файл локального репозитория, в который вы внесли изменения. После коммита Git сохранит новую версию этого файла и изменит его статус на Unmodified. Справа от модифицированных файлов появляется буква M.

Добавим в VS Code несколько коммитов. Это можно сделать через консоль и графический интерфейс. Начнём с консоли и сохраним наш первый коммит:

git add .
git commit -m "Commit message"

Дополним index.html базовой разметкой и подключим стили. Файл подсветится оранжевым цветом и получит статус Modified. На левой панели появится число возле иконки с веткой — это оповещение инструмента VS Code для работы с Git.

Кликаем на иконку с веткой в левой панели. В ней будет наш изменённый файл index.html. Если его выбрать, то редактор подсветит добавленные и удалённые строки кода. А если нажать на значок +, то VS Code перенесёт файл в индекс.

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

Введите команду git log и посмотрите список коммитов. Их должно быть два: первый коммит мы выполнили через консоль, а второй — через визуальный интерфейс VS Code. Оба способа рабочие, поэтому выбирайте тот, что нравится.

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

git branch имя_новой_ветки

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

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

Заливаем изменения через VS Code в удалённый репозиторий на GitHub

Создадим на сайте GitHub новый репозиторий. После этого перейдём в консоль редактора VS Code и выполним несколько команд: свяжем наш локальный и удалённый репозиторий, проверим связь и загрузим изменения. Подробно этот процесс мы описывали в прошлом разделе, когда заливали проект через консоль.

# Связываем локальный и удалённый репозиторий
git remote add origin https://github.com/Aleksandr-Babaskin/VS-Code-Hub.git

# Проверяем установленную связь 
git remote -v

# Заливаем изменения из локального репозитория в удалённый 
git push -u origin main

После связи локального и удалённого репозитория мы можем закрыть консоль и отправлять новые изменения через графический интерфейс редактора VS Code.

Для примера добавим в проект заголовок и три абзаца текста. Перенесём через графический интерфейс файл в индекс и выполним коммит. Теперь нам доступна ещё одна кнопка — Синхронизировать изменения. Жмём, и файл летит на GitHub.

Устанавливаем плагины для комфортной работы с Git и GitHub

Для работы с Git и GitHub в VS Code есть множество плагинов, но ни один из них устанавливать не обязательно. Стандартных возможностей VS Code достаточно. Плагины вы можете использовать на своё усмотрение лишь для того, чтобы сделать работу с репозиториями более информативной и наглядной.

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

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

Git History. С помощью этого плагина удобно просматривать историю коммитов и сравнивать версии одного файла. Нужный коммит можно найти по поиску и через фильтр. Данные можно сортировать по авторам, веткам, дате и времени.

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