Создание сайта на GitHub Pages: бесплатный хостинг
Что такое GitHub Pages и зачем это нужно
GitHub Pages — это hosting для static-страниц: сервис берёт содержимое repository и отдаёт его как веб-страницу. Такой формат подходит под портфолио, документацию, лендинг и любой project, где достаточно html, css и картинок. Когда нужен backend, база данных или личный кабинет, вариант с GitHub не закрывает задачу: придётся брать обычный host и настраивать серверную часть. Практическое руководство: вы выкладываете файлы, включаете github pages и проверяете, что в браузере открылся ваш сайт.
Создание учетной записи на GitHub
Зайдите в github и нажмите Sign up. Укажите почту и пароль, подтвердите email, затем в настройках безопасности включите 2FA. После входа в правом верхнем углу появится аватар — это быстрый признак, что можно работать с репозиториями GitHub.
Создание репозитория
Шаг 1: Регистрация на GitHub
Если аккаунт уже есть на GitHub, просто войдите и откройте главную страницу профиля. Проверьте, что вы видите кнопку «+» рядом с аватаром: через неё создаются новые репозитории.
Шаг 2: Создание нового репозитория
В GitHub нажмите «+» → New repository. Важно различать два варианта. User/organization — это отдельная страница профиля GitHub, где имя репозитория фиксировано. Project pages — публикация внутри обычного хранилища: адрес будет вида https://имяпользователя.github.io/название-репозитория/. Выберите Public, добавьте README и нажмите Create repository. В списке появится запись о новом репозитории — контрольная точка №1. Не надо сразу создавать несколько архивов: начните с одного и доведите его до публикации. Дальше логика простая: исходники лежат на github, а github pages будет развертывать их в публичную страницу.
Загрузка файлов на GitHub
Шаг 3: Создание index.html и web.css
Главный файл должен называться index.html и лежать в корне: иначе при открытии будет 404 или пустая страница. Создавать файлы GitHub можно прямо в интерфейсе: Add file → Create new file. Для проверки достаточно минимального шаблона:
| <!doctype html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Портфолио</title> <link rel=»stylesheet» href=»web.css»> </head> <body> <h1>Моя страница</h1> </body> </html> |
Сохраните commit, затем рядом добавьте web.css (хотя бы одну строку со шрифтом) и сделайте второй commit. Откройте вкладку Code и убедитесь, что оба файла видны в корне — контрольная точка №2. Если вы видите index.html, значит этот сайт есть из чего собирать.
Шаг 4: Загрузка файлов в репозиторий
Если проект уже готов на компьютере, используйте Add file → Upload files и перетащите их. Проверьте две вещи: имена не изменились, а index.html лежит на верхнем уровне, не внутри дополнительной папки. После Commit changes откройте историю: свежая дата — значит изменения приняты и можно включать публикацию.
Настройка GitHub Pages
Шаг 5: Включение GitHub Pages
Откройте Settings репозитория и найдите раздел pages. В Source выберите ветку main и папку /(root), затем нажмите Save. Если у вас ветка называется master, выбирайте её: важно не имя, а то, где лежит index.html. Ещё один вариант — папка /docs: её используют, когда исходники и документация живут рядом, но для первого проекта проще держать всё в корне. Через несколько минут появится ссылка на публикацию. Откройте её: если вы видите заголовок «Моя страница», значит github работает, и теперь вы просто обновляете файлы.
Подключение собственного домена
В настройках можно указать Custom domain. У регистратора обычно нужны DNS-записи: CNAME на имя пользователя.github.io или набор A-записей на IP из документации сервиса. Типовые проблемы здесь приземлённые: DNS обновился не сразу, в CNAME опечатка, либо забыли включить HTTPS. После подтверждения домена включите «Enforce HTTPS» — так сайт будет открываться без предупреждений, а github pages будет корректно отдавать контент по защищённому протоколу.
Проверка работы сайта
Проверьте страницу в обычном и приватном режиме браузера. Если видите старую версию, сделайте «жёсткое обновление» (Ctrl+F5 / Cmd+Shift+R), очистите кэш или временно добавьте параметр ?v=2 в адрес, чтобы убедиться, что обновление дошло. Посмотрите вкладку Actions: если там зелёная галочка, публикация прошла, и github pages отдаёт актуальные файлы.
Обновление и поддержка сайта
Обновление — это новые коммиты в main. Меняете файл, делаете commit, и публикация подтягивается автоматически. README держите как короткую инструкцию: что за project, где менять тексты, какие папки за что отвечают, как запустить локально при необходимости. В README можно оставить короткую пометку уровня «use VS Code для правок». Это второе руководство внутри репозитория, которое экономит время, когда к проекту возвращаются через месяц. Если вы правите часто, удобнее работать через git локально: using привычный редактор, вы делаете изменения и видите diff до коммита. После push github pages снова развертывать обновлённый сайт.
Типичные ошибки и их исправление
Ошибка «404 Not Found»: нет index.html в корне или выбрана не та папка.
Публикация включена, но белый экран: проверьте кодировку UTF-8 и закрытие тегов в html.
Стили не применяются: перепроверьте путь к web.css и регистр букв в имени документа.
Изменения «не приехали»: дождитесь завершения Actions и сбросьте кэш браузера.
Неверная ветка: в Source должна быть main, иначе развернута будет другая версия.
Домен не работает: проверьте DNS и не меняйте записи слишком часто — обновление может занять время.
HTTPS не включается: сначала дождитесь подтверждения домена, затем включите «Enforce HTTPS».
Случайно залили лишнее: удалите документ коммитом и добавьте .gitignore при работе локально.
Полезные инструменты для работы с GitHub
Для первых проектов удобен GitHub Desktop: он делает commit и push без командной строки. Для редактирования подойдёт VS Code или любой другой редактор, где видно структуру документа и папок. Если вы собираете статический проект генератором, подключите CI через Actions, чтобы сборка и выкладка шли автоматически. Следите за простотой: один репозиторий, понятные имена, минимум магии.
Итоги и рекомендации
Схема простая: вы создали хранилище, положили index.html, включили публикацию и получили рабочий сайт под портфолио или лендинг. Дальше вы поддерживаете его коммитами и проверяете результат через браузер и Actions.
Если нужен коммерческий результат: дизайн, структура и тексты под заявки — заказать создание сайта для вашего бизнеса можно в VICTORY group. Такой подход даёт аккуратный внешний вид и сохраняет этот способ как хороший старт для размещения.
