Что такое GitHub Pages и как выложить свою первую страницу бесплатно

GitHub Pages — это бесплатный способ опубликовать статическую страницу в интернете прямо из репозитория на GitHub. Проще говоря: вы храните файлы сайта (обычно index.html и папку с картинками/стилями) в GitHub, а GitHub сам превращает их в доступный всем URL. Подходит как “сайт-визитка”, портфолио, учебная страница или страничка проекта.

Вам не нужен сервер и хостинг “как для полноценного сайта”. Достаточно уметь собрать страницу из HTML (и при желании CSS). Дальше GitHub сделает публикацию за вас: вы один раз включаете Pages, и сайт появляется по ссылке.

Что такое репозиторий и зачем он нужен

Разберём 2 слова, которые почти гарантированно встретятся.

Репозиторий (repo) — это “папка с историей изменений” на GitHub. Туда вы кладёте файлы сайта и фиксируете изменения (это называется коммит). Git — это система, которая хранит историю правок и позволяет откатываться назад при ошибках.

На первых шагах вам не нужно понимать Git глубоко. Нужен минимум:

• создать репозиторий;
• положить туда файлы сайта;
• отправить (push) изменения на GitHub;
• включить публикацию через GitHub Pages.

Если хотите двигаться дальше системно, полезной следующей ступенью будет курс Git и GitHub с нуля: от первого коммита до pull request. Он как раз закрывает базу, без которой дальше становится больно.

Делаем первый репозиторий и первую страницу

Сайт для Pages должен быть статическим: HTML/CSS/JS. Формы, которые отправляют данные без серверной части, работают через сторонние сервисы или готовые решения, но для первой страницы это не нужно.

Шаг 1. Подготовьте файлы

Создайте папку проекта, например my-page. Внутри сделайте файл index.html. Минимальный рабочий пример:

<!doctype html>
<html>
  <body>
    <h1>Привет! Это мой первый сайт на GitHub Pages</h1>
  </body>
</html>

Пара слов по строкам:

• <!doctype html> — говорит браузеру, что это современный HTML.
• <h1> — заголовок, который увидят люди на странице.
• Больше ничего не обязательно для старта.

Шаг 2. Создайте репозиторий на GitHub

1. Зайдите на GitHub и нажмите New repository.
2. Назовите репозиторий так, чтобы Pages могла его публиковать. Упростим:
   • если у вас есть сайт на домене формата username.github.io, то обычно репозиторий называют username.github.io.
   • если не хотите возиться с этим вариантом, можно сделать репозиторий с любым именем и публиковать как “проектную страницу” через настройки Pages (об этом ниже).
3. Поставьте репозиторий public (иначе Pages не будет доступна публично).
4. Не добавляйте README в самом начале (чтобы не запутаться). Можно оставить пустым — вы загрузите файлы позже.

Шаг 3. Загрузите файлы в репозиторий

Самый простой вариант для новичка — “перетащить файлы” прямо в браузере:

1. Откройте созданный репозиторий.
2. Нажмите Add file → Upload files.
3. Загрузите index.html (и остальные файлы, если есть).

Шаг 4. Убедитесь, что GitHub видит index.html

После загрузки откройте репозиторий и посмотрите, что файл index.html лежит в корне (на верхнем уровне), а не внутри какой-то подпапки.

Включаем GitHub Pages и получаем ссылку

Теперь включаем публикацию.

1. В репозитории откройте вкладку Settings (настройки).
2. В боковом меню найдите Pages.
3. Ищите блок Build and deployment.
4. В пункте Source выберите один из вариантов:
   • Deploy from a branch.
   • Далее обычно нужен branch main (или master, если так у вас).
   • В Folder выберите корень: обычно /(root) или /(root)-подобный вариант.
5. Нажмите Save.

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

• https://username.github.io/ (если вы делали username.github.io)
• или https://username.github.io/имя-репозитория/ (если проектная страница)

Частые ошибки (чтобы не терять дни)

Вот что чаще всего ломает публикацию у новичков:

• Нет index.html в корне репозитория. GitHub Pages ожидает точку входа. Если index.html лежит в папке вроде src/, сайт не откроется.
• Неверная ветка (branch). Вы включили Pages на main, а файлы отправили в другую ветку. Убедитесь, что именно нужная ветка содержит ваши файлы.
• Папка неправильно указана. В настройках Pages “Folder” должна соответствовать тому месту, где лежит index.html.
• Сайт не статический, а вы ждёте сервер. GitHub Pages — не полноценный backend. Если вы сделали что-то, что требует сервера (например, обычные PHP-запросы), оно не заработает.

Что потом: маленькое улучшение портфолио

Как только первая страница заработала, можно быстро сделать её “чуть взрослее”:

• добавьте описание (кто вы, чем занимаетесь);
• вставьте пару секций: “проекты” и “контакты”;
• подключите CSS (стили) — просто добавьте файл style.css и подключите его в index.html.

С точки зрения GitHub Pages ничего сложного: вы просто меняете файлы и снова отправляете изменения. Ссылка остаётся той же, обновления появляются после повторной сборки.

С чего начать прямо сейчас

1. Создайте папку проекта и файл index.html с текстом “Привет, это мой сайт”.
2. Создайте репозиторий на GitHub и загрузите index.html в корень репозитория.
3. Откройте Settings → Pages, включите публикацию из нужной ветки и дождитесь ссылки.

А дальше — если хотите понять Git и GitHub не “в режиме тыка”, а спокойно разобраться, можно идти по программе Git и GitHub с нуля: от первого коммита до pull request. Это как раз помогает делать такие публикации уже уверенно, а не по инструкции.