Публикация проекта на GitHub

Загрузка файлов в репозиторий

В прошлом уроке создали репозиторий на GitHub. Теперь он пустой, только файл README внутри. Файлы сайта ADC Hub лежат на вашем компьютере: HTML, CSS, JavaScript, картинки. Нужно загрузить их в репозиторий. Как посылку отправить по почте, только для кода.

Есть два способа загрузить файлы: через веб-интерфейс GitHub или через Git с компьютера. Первый способ простой, но неудобный для больших проектов. Второй профессиональный, но требует установки программ. Разберём оба.

Способ 1: Через веб-интерфейс

Начнём с простого. Откройте репозиторий на GitHub в браузере. Видите зелёную кнопку «Code» и рядом плюсик? Нажмите на плюсик. Откроется меню. Выберите «Upload files», загрузить файлы.

Появится страница загрузки. Перетащите файлы с компьютера прямо в окно браузера. Или нажмите «choose your files» и выберите через диалог. Выберите все файлы проекта: index.html, style.css, script.js, папку с картинками. Все сразу, одним действием.

Файлы загрузятся. Ниже появится форма коммита. Commit, фиксация изменений. Это как подпись под документом: «Я добавил эти файлы, вот дата и причина». В первое поле напишите короткое сообщение: «Добавлены основные файлы сайта». Во второе можете добавить подробности, но необязательно.

Нажмите зелёную кнопку «Commit changes», зафиксировать изменения. Страница перезагрузится. Видите список файлов в репозитории? index.html, style.css, script.js, README.md. Файлы загружены на GitHub.

Этот способ работает, но неудобен. Каждый раз при изменении файла нужно вручную загружать его через браузер. Изменили цвет кнопки в CSS? Зайдите на GitHub, найдите файл, загрузите новую версию. Это долго. Профессионалы используют другой способ через Git.

Способ 2: Через GitHub Desktop

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

Откройте desktop.github.com в браузере. Нажмите «Download for Windows» или «Download for Mac», в зависимости от системы. Скачается установщик. Запустите его. Следуйте инструкциям. Программа установится.

Откройте GitHub Desktop. При первом запуске попросит авторизоваться. Нажмите «Sign in to GitHub». Введите логин и пароль от GitHub. Разрешите приложению доступ. Авторизация завершена.

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

Теперь клонируем репозиторий на компьютер. Clone, клонирование. Это копирование репозитория с GitHub на ваш компьютер. Работаете локально, потом отправляете изменения обратно.

В GitHub Desktop нажмите «File», потом «Clone repository». Откроется окно. Видите список ваших репозиториев? Найдите adc-hub. Выберите его. Ниже укажите путь, куда сохранить. Например, C:\Projects\adc-hub на Windows или /Users/username/Projects/adc-hub на Mac.

Нажмите «Clone». Программа скопирует репозиторий на компьютер. Откройте эту папку в проводнике. Видите файл README.md? Это и есть клонированный репозиторий.

Добавление файлов проекта

Теперь переместите файлы сайта в эту папку. Скопируйте index.html, style.css, script.js, папку images из старого места в папку репозитория. Как обычное копирование файлов, только в специальную папку.

Вернитесь в GitHub Desktop. Видите изменения? Слева список файлов с галочками. Это новые файлы, которые вы добавили. Программа автоматически их обнаружила.

Внизу слева поле для сообщения коммита. Напишите: «Добавлены основные файлы сайта ADC Hub». Нажмите синюю кнопку «Commit to main», зафиксировать в главной ветке. Изменения зафиксированы локально.

Отправка изменений на GitHub

Но они пока на вашем компьютере, не на GitHub. Нужно отправить. Наверху появилась кнопка «Push origin», отправить на origin. Origin это имя удалённого репозитория на GitHub. Нажмите кнопку. Файлы загружаются.

Через несколько секунд загрузка завершится. Вернитесь в браузер. Обновите страницу репозитория на GitHub. Видите файлы? index.html, style.css, script.js, папка images. Всё на месте. Проект опубликован на GitHub.

Работа с изменениями

Теперь когда меняете файлы, процесс простой. Редактируете style.css в VS Code. Сохраняете. Открываете GitHub Desktop. Видите изменения. Пишете сообщение коммита: «Изменён цвет заголовка». Нажимаете «Commit to main». Нажимаете «Push origin». Готово, изменения на GitHub.

GitHub Desktop показывает, что именно изменилось. Красным выделяет удалённые строки, зелёным добавленные. Видите: «Было так, стало так». Это помогает контролировать изменения. Случайно удалили важную строку? Увидите в GitHub Desktop до коммита, вернёте.