Как быстро подключить кодовую базу вашего локального проекта к репозиторию GitHub!

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

В этом эпизоде Tech Stack Playbook мы рассмотрим процесс загрузки локального репозитория кодовой базы с компьютера на GitHub из командной строки.

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

Временные метки:
00:00 GitHub 101
02:15 Настройте локально свой проект кода
03:20 Создание пустого репозитория в GitHub
04:47 Инициализируйте подключение к GitHub локально
10:28 Просмотр изменений в GitHub
10:53 Настройка GitHub Desktop для управления нашим репозиторием
11:33 Отправка новых изменений через GitHub Desktop на GitHub
12:57 Подведение итогов и размышления о том, что мы настроили в GitHub

👨💻 GitHub 101

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

Мне нравится думать о GitHub как о кодовой версии Google Docs. Вы можете вернуться к предыдущей версии документа, внести правки и отправить их в режиме реального времени, а также сотрудничать с другими пользователями над той же версией документа.

Еще одним важным преимуществом GitHub является разветвление, позволяющее вам иметь различные состояния вашей кодовой базы по разным причинам. Обычная практика для кодовых баз включает 3 основные ветви: dev, stage и prod. Ветвь dev — это то, что вы будете использовать для сборки, тестирования, отладки и добавления новых функций. Ветка stage предназначена для новых дополнений, которые готовы к рассмотрению перед отправкой в prod — причина в том, что вам нужно тщательно протестировать дополнение, чтобы убедиться, что оно готово для пользователей, и чтобы не испортить сборку для клиентов. Прод, или производственная, версия вашей кодовой базы — это то, что работает в реальном времени для ваших клиентов, покупателей или пользователей. В ней (надеюсь) нет ошибок и недочетов, так как предыдущие два шага довели код до этой стадии.

Однако если вы работаете над своим проектом в одиночку, вам может понадобиться только 2 основные ветки: main — версия для сборки/тестирования вашего приложения, и prod — версия в продакшене, которая всегда работает в реальном времени.

В сегодняшнем уроке мы рассмотрим процесс загрузки локального репозитория кодовой базы с компьютера на GitHub из командной строки. В каждом из приведенных ниже шагов я обозначаю, какие из них вы делаете (local) — на своем компьютере, или (web) — на сайте GitHub.

👨💻 Шаг 1: Создайте папку проекта кода (локально)

Для этого примера я создал приложение ReactJS Soundcloud Clone с помощью фреймворка create-react-app и внедрил фреймворк AWS Amplify с управлением идентификацией и доступом Cognito, хранением базы данных NoSQL DynamoDB, объектно-ориентированным хранилищем S3 для медиафайлов и AppSync для управления GraphQL API. Приложение позволяет пользователям создать учетную запись, которая затем позволит им загружать песни в облако через приложение, а затем воспроизводить эти медиафайлы через встроенный плеер. Следите за полным руководством по этой сборке, которое скоро появится ☺️.

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

Если у вас нет локальной базы кода на компьютере для публикации на GitHub, вы можете создать тренировочный репозиторий с шаблоном React.js или NEXT.js ниже, чтобы начать работу:

Для React запустите:

npx create-react-app techstackplaybookpracticerepo
Войти в полноэкранный режим Выйти из полноэкранного режима

Для Next запустите:

npx create-next-app --example with-tailwindcss techstackplaybookpracticerepo
Войти в полноэкранный режим Выйдите из полноэкранного режима

Как только вы создадите папку для своего приложения с помощью одного из этих фреймворков, переходите к шагу 2 ниже.

👨💻 Шаг 2: Создайте пустой репозиторий в GitHub (веб)

Когда вы заходите на сайт https://github.com, в правом верхнем углу, когда вы нажимаете на аватар вашего профиля, появляется выпадающее меню.

Нажмите на выпадающий пункт «Ваши репозитории», который приведет вас на страницу со списком всех репозиториев в вашем аккаунте GitHub. Там будет зеленая кнопка с надписью «New» (Создать) — обязательно нажмите ее, чтобы вызвать поток создания репозитория.

Вам нужно будет выбрать несколько опций, но вот краткое руководство:

  • Шаблон репозитория: (сохраните вариант по умолчанию)
  • Имя репозитория: TechStackPlaybookPracticeRepo
  • Описание: (необязательно)
  • Публичный/Частный: Публичный
  • Инициализируйте этот репозиторий с: (держите эти опции не отмеченными)

Когда вы будете готовы, нажмите кнопку «Создать репозиторий», чтобы завершить настройку пустого репозитория в GitHub.

Когда страница пустого репозитория загрузится, ссылка будет выглядеть примерно так: https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo.

Вы заметите на этой странице URL, который будет находиться справа от кнопки HTTPS. Он будет выглядеть следующим образом: https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo.git. Вы должны скопировать этот URL, так как он понадобится нам в Шаге 3.

👨💻 Шаг 3: Инициализация подключения к GitHub (локально)

Находясь в корне папки вашего проекта (самая внешняя папка, в которую все упаковано, для меня она называется soundcloud, которая содержит папки /amplify, /public, /src и т.д.), убедитесь, что окно терминала установлено на этом уровне.

Вы инициализируете пустой git-репозиторий с веткой под названием main следующим образом:

git init -b main
Войти в полноэкранный режим Выйти из полноэкранного режима

Это создаст скрытую папку .git, которая будет фактически сохранять и хранить все наши изменения в системе контроля версий. Это почти как cookie, который связывает наш локальный репозиторий с версией GitHub.

Далее мы добавляем наши локально созданные файлы в этот файл .git следующим образом:

git add .
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем мы хотим зафиксировать эти файлы, которые мы добавили в main, в нашем конкретном репозитории, который мы инициализируем для GitHub:

git commit -m “First Commit to GitHub”
Войти в полноэкранный режим Выйти из полноэкранного режима

Это, вероятно, добавит много файлов, перечисленных в списке. Убедитесь, что .gitignore включен в этот список добавленных файлов и включает node_modules, чтобы вы не загрузили на GitHub гигантское количество файлов node_modules ☺️.

На странице github.com с URL, который мы скопировали в Шаге 2, теперь мы будем использовать его для отправки наших файлов github на эту конечную точку URL:

  • обязательно измените YourGitHubHandle на ваш реальный аккаунт:
  • обязательно измените TechStackPlaybookPracticeRepo на имя вашей реальной репозитории, которую вы создали на GitHub.
git remote add origin https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo.git
Войдите в полноэкранный режим Выйти из полноэкранного режима

По сути, это означает, что мы сообщаем git, что из удаленной локальной версии нашего репозитория мы собираемся добавить все эти файлы в происхождение этой пустой ссылки на репозиторий GitHub в Интернете.

Теперь мы установим новую удаленную версию с помощью этого:

git remote -v
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы увидите, что в терминале выводится 2 строки, одна из которых заканчивается на (fetch), а другая — на (push). Мы вызываем этот репозиторий GitHub и проталкиваем наш код локально с удаленного сервера на GitHub в облаке.

Теперь, когда мы инициализировали соединение, мы будем локально переносить наш код в origin main, который мы задали в качестве места назначения в GitHub:

git push -u origin main
Вход в полноэкранный режим Выйти из полноэкранного режима

Это перечислит все объекты, которые мы хотим вытолкнуть, затем они будут сжаты в потоки, чтобы вытолкнуть их, и будут вытолкнуты на эту ссылку GitHub, которая является той, которую мы хотим для этого репозитория, и ветка устанавливается как одна под названием main и устанавливает его для отслеживания его из origin.

👨💻 Шаг 4: Просмотр опубликованных изменений в GitHub (веб)

На странице нашего репозитория GitHub (https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo), которая раньше была пустой, после обновления страницы, теперь должна отображаться наша база данных, которая была локально на нашем компьютере, теперь на этой веб-странице.

Мы создали синхронизированную пару между нашим локальным репозиторием (remote) и нашим репозиторием GitHub (origin). Однако это касается только последних изменений в нашем локальном хранилище. Что если мы хотим создавать постоянные пуши в наш репозиторий GitHub и делать регулярные пуши в качестве резервной копии в GitHub? Мы рассмотрим это с помощью инструмента под названием GitHub Desktop в следующем шаге ниже.

👨💻 Шаг 5: Настройка GitHub Desktop для управления нашим репозиторием (локальным)

GitHub Desktop, созданный компанией Microsoft менеджер GitHub, представляет собой GUI (графический интерфейс пользователя) клиент/платформу, которая создает простой и эффективный способ управления нашим репозиторием GitHub прямо с компьютера без необходимости беспокоиться о наборе нужных сценариев командной строки и последовательностей в терминале.

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

В качестве примечания, существуют и другие графические интерфейсы для Git и SCM (управление контролем исходного кода), например, Kraken, который оптимизирован для Azure DevOps, а также GitLab.

Нам нужно будет создать новый репозиторий в клиенте GitHub Desktop, поскольку, хотя репозиторий синхронизирован с github.com, наш клиент GitHub Desktop не будет обновлен для отслеживания этого репозитория, пока мы не разрешим это.

В выпадающем списке «Добавить» на кнопке справа от текстового поля в клиенте GitHub Desktop выберите выпадающий вариант: Add Local Repository.

Когда у нас появится возможность «Выбрать» папку, мы захотим выбрать самый внешний контейнер папки для нашего проекта. Для вас это может выглядеть следующим образом: /user/Documents/GitHub/TechStackPlaybookPracticeRepo.

После того как крайняя папка выбрана, мы нажмем Add Repository.

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

👨💻 Шаг 6: Отправка новых изменений через GitHub Desktop в GitHub (локально)

В GitHub Desktop мы должны увидеть 1 или более изменений файлов, отраженных в списке «измененных файлов» в левой половине приложения. В этом видео я обновил файл README.md, поэтому рядом с README.md стоит галочка, а вверху приложения написано 1 измененный файл.

В правом нижнем углу мы дадим нашему коммиту имя, которое может быть любым по вашему желанию. Я сказал: Updated Readme for YouTube!. Вы также можете написать описание, если хотите, но это необязательно.

Вверху вы увидите, что текущая ветка у меня установлена на main, так как для этого видео создана только одна ветка.

Когда все выглядит хорошо, нажмите на синюю нижнюю кнопку слева внизу с надписью «Commit to main».

Правая нижняя кнопка теперь должна говорить Push origin, и как только вы выберете это, она отправит эти обновленные изменения, зафиксированные в нашей локальной удаленной ветке, в основную ветку GitHub в Интернете.

👨💻 Шаг 7: Просмотр отправленных изменений в GitHub (веб)

На странице нашего репозитория GitHub (https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo), после обновления страницы, вы должны увидеть, что ваши изменения отражены в онлайн-версии кодовой базы и соответствуют вашим изменениям на локальном уровне.

В данном примере изменения отражены в файле README.md, а в списке файлов/папок вы увидите, что все папки/файлы имеют сообщение о фиксации First Commit to GitHub from Local, кроме одного, которым является файл README.md. В нем есть сообщение, которое читается как то же самое, которое мы поместили в рабочий стол GitHub: Update Readme for YouTube!.

Посмотрите полную запись ниже:

Дайте мне знать, если вы нашли этот пост полезным! А если вы еще не сделали этого, обязательно ознакомьтесь с этими бесплатными ресурсами:

  • Следите за моим Instagram, чтобы узнать больше: @BrianHHough
  • Я также на Tik Tok: @BrianHHough
  • Смотрите мое последнее видео на YouTube
  • Слушайте мой подкаст на Apple Podcasts и Spotify
  • Присоединяйтесь к моей БЕСПЛАТНОЙ группе Tech Stack Playbook на Facebook
  • Присоединяйтесь к предпринимателям и разработчикам в HelpMeDev Discord Server

Давайте оцифруем мир вместе! 🚀

— Брайан

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *