HERON

Основы · 4

Git и GitHub

Git хранит историю каждой правки в папке сайта. GitHub хранит копию этой папки в интернете и собирает сайт, когда вы отправляете изменения. На этой странице мы настроим оба, от нового аккаунта до первого push.

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

Простыми словами

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

GitHub — сайт, который хранит вашу папку со всеми снимками; это называется репозиторий. Когда вы отправляете туда новые снимки (push), GitHub может сам собрать свежий образ сайта (GitHub Actions) и хранить его рядом с кодом (GitHub Container Registry): лишних аккаунтов не нужно. С HERON Agent (платно) этот образ затем обновится и на вашем сервере. Другие способы публикации — на странице Публикация.

Бытовое сравнение: git — режим «отслеживать изменения» в документе, который ничего не забывает. GitHub — общий диск, где лежит этот документ, и робот, который печатает свежую копию при каждом сохранении.

Когда нужна эта страница: перед публикацией через git push или на GitHub Pages. Когда можно пропустить: если вы публикуете, сами копируя файлы на хостинг.

Слова, которые встретятся

СловоЧто значит
репозиторийПапка сайта вместе со всей историей. На GitHub у неё адрес вида github.com/you/my-site
коммитОдин сохранённый снимок с короткой подписью: «Новая страница о ценах»
pushОтправка новых коммитов на GitHub
pullПолучение коммитов с GitHub на свой компьютер
веткаПараллельная линия истории. Основная называется main
токенДлинный пароль для программ, который можно ограничить и отозвать
GitHub ActionsРобот GitHub, который запускает сборку после каждого push

Установите git

Скажите git, кто вы

В каждом коммите есть имя и email. Задайте их один раз на каждом компьютере. Возьмите email своего аккаунта GitHub или скрытый адрес GitHub из Settings → Emails.

git config --global user.name "Anna Smith" && git config --global user.email "anna@example.com" && git config --global init.defaultBranch main

Аккаунт и репозиторий на GitHub

  1. 1

    Зарегистрируйтесь

    На github.com нажмите Sign up, введите email, пароль и имя пользователя. Имя станет частью ваших адресов: github.com/vashe-imya.
  2. 2

    Создайте репозиторий

    Плюс справа вверху → New repository. Назовите как сайт, например my-site. Галочку «Add a README» не ставьте: в вашей папке уже есть файлы.
  3. 3

    Закрытый или открытый

    Закрытый (Private) прячет черновики. Открытый (Public) нужен для бесплатного GitHub Pages на бесплатном аккаунте. Это можно поменять потом в настройках репозитория.
  4. 4

    Скопируйте адрес

    GitHub покажет адрес пустого репозитория вида https://github.com/vashe-imya/my-site.git. Он понадобится на следующем шаге.

Создайте токен

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

Первый push

В терминале перейдите в папку сайта и выполните, подставив своё имя вместо vashe-imya:

git init && git add . && git commit -m "Первая версия" && git branch -M main && git remote add origin https://github.com/vashe-imya/my-site.git && git push -u origin main

Что делает каждая часть:

  • git init превращает папку в репозиторий;
  • git add . отмечает все файлы для снимка;
  • git commit -m "Первая версия" делает снимок с подписью;
  • git branch -M main называет основную линию main;
  • git remote add origin … запоминает, где GitHub;
  • git push -u origin main отправляет всё.

Git спросит имя пользователя и пароль: введите имя на GitHub, а вместо пароля вставьте токен. При вставке ничего не видно — это нормально. На macOS связка ключей его запомнит; на Linux и в WSL один раз выполните git config --global credential.helper store, чтобы он сохранился.

Обновите страницу репозитория на GitHub: ваши файлы там. Если в папке сайта есть .github/workflows/, откройте вкладку Actions и посмотрите первую сборку.

Каждая следующая правка

  1. 1

    Правка

    Измените страницу в редакторе и сохраните.
  2. 2

    Проверка

    Посмотрите на localhost:8000.
  3. 3

    Снимок и отправка

    git add . && git commit -m "Обновили цены" && git push
  4. 4

    Подождите минуту

    GitHub собирает сайт. Зелёная галочка во вкладке Actions — готово, красный крестик покажет, что пошло не так.
  5. 5

    Проверьте живой сайт

    Откройте свой адрес и обновите страницу.

Без терминала: GitHub Desktop

Если удобнее кнопки, поставьте GitHub Desktop с desktop.github.com (macOS и Windows). Войдите своим аккаунтом GitHub — токен не нужен. File → Add local repository → выберите папку сайта → Publish repository. Дальше каждая правка видна в приложении: напишите подпись, нажмите Commit, затем Push origin. В VS Code те же кнопки есть на панели Source Control.

Вопросы

GitHub бесплатный?

Да, и для закрытых, и для открытых репозиториев. В GitHub Actions каждый месяц есть бесплатные минуты сборки, для сайта их с запасом. GitHub Pages на бесплатном аккаунте требует открытый репозиторий.

Я случайно закоммитил пароль. Что делать?

Сразу отзовите его там, где он выдан (страница токенов GitHub, Docker Hub, нужный сервис), и создайте новый. Удалить файл мало: пароль остаётся в истории.

Что такое .gitignore?

Список файлов, которые git не сохраняет: например, собранную папку dist/ и кэш HERON. В новых сайтах HERON он уже есть.

Можно GitLab или свой git-сервер?

Да. Git работает так же. Файл автоматической сборки написан для GitHub Actions; другим сервисам нужен свой. См. Публикация.

Что дальше?

Опубликуйте сайт: через git push или бесплатно на GitHub Pages со своим доменом.