Руководство по заливке сайта на GitHub используя Git

20 мая 2023 20 сентября 2023

Олег Миторун Фото Олег Миторун

Подготовка

Что у вас должно быть:

Аккаунт на GitHub.
VSCode с терминалом.
Папка example.com с файлами готового сайта, например который собран с помощью Eleventy. Размер папки не должен превышать 100Mb.
Ваш компьютер должен быть связан с аккаунтом GitHub SSH-ключом.

Создание SSH ключа

[GitHub SSH keys](https://github.com/settings/keys)

Изменение путей для GitHub Pages

Чтобы выложить сайт на Github Pages нужно ко всем ссылкам в сайте добавить адрес репозитория. На примере Eleventy это делается с помощью плагина [html-base](https://www.11ty.dev/docs/plugins/html-base/), а в конфиге сборки нужно записать в `pathPrefix` название директории репозитория — и тогда `/example.com` автоматически добавится ко всем ссылкам сайта (примечание: не ко всем, упускаются ``).

Пошаговый процесс заливки сайта на GitHub

Создаём новый репозиторий на GitHub. Выбираем название репозитория, например также как называется наш проект example.com. Выбираем публичный или приватный репозиторий, по желанию добавить описание репозиторию, файл README лучше пока не создавать. Нажимаем кнопку Create repository.
В терминале заходим в папку проекта, которую нужно залить:
cd example.com или cd example.com/site

Инициализируем эту папку:
git init
При этом в папке проекта создастся скрытая папка .git.
Добавление всех файлов проекта (для подготовки в гитхаб):
git add .

Для проверки всё ли прошло нормально набираем:
git status

Создание коммита — комментария, отпечатка текущего состояния файлов проекта:
git commit -m "init"
Создаём ветку main на гитхабе:
git branch -M main

Если нужно перейти из ветки master в ветку main: git checkout main
Соединяем репозиторий с нашей папкой проекта:
git remote add origin git@github.com:[name-account]/example.com.git

Пушим проект на гитхаб:
git push -u origin main

Всё, фаши файлы залиты на GitHub. Дальше можно создать файл README.md с описанием проекта, выложить сайт на GitHub Pages.

Скачивание сайта и редактирование на ПК

Скачать сайт с гитхаба на ПК

Заходим в нужный репозиторий: https://github.com/your-account/example.com

Выбираем вкладку Code > Local > SSH и копируем строку: git@github.com:your-account/example.com.git

Клонирование репозитория. В терминале перейти в папку, куда нужно добавить проект, и вставить: git clone git@github.com:your-account/example.com.git

Работа на ПК

В VSCode заходим в Систему управления версиями Ctrl Shift G.

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

Отправка (коммит и пуш)

Во вкладке система управления версиями, у нашего проекта в инпуте написать комментарий к изменениям и нажать Фиксация.

Пуш: После коммита нажать на кнопку Синхронизировать изменения.