Миторун Студио
  1. Главная
  2. Блог
  3. Сайт на GitHub

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

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

Подготовка

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

  • Аккаунт на 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` автоматически добавится ко всем ссылкам сайта (примечание: не ко всем, упускаются `<use href="">`).

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

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

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

  2. В терминале заходим в папку проекта, которую нужно залить:
    cd example.com или cd example.com/site

  1. Инициализируем эту папку:
    git init
    При этом в папке проекта создастся скрытая папка .git.

  2. Добавление всех файлов проекта (для подготовки в гитхаб):
    git add .

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

  1. Создание коммита – комментария, отпечатка текущего состояния файлов проекта:
    git commit -m "init"

  2. Создаём ветку main на гитхабе:
    git branch -M main

    Если нужно перейти из ветки master в ветку main: git checkout main

  3. Соединяем репозиторий с нашей папкой проекта:
    git remote add origin git@github.com:[name-account]/example.com.git

  1. Пушим проект на гитхаб:
    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.

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

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

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

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