Содержание

Создание статического сайта на GitHub Pages: пошаговое руководство

Если ты не хочешь делать сложный сайт, забудь про WordPress или CMS с базами данных. Твой выбор — Static HTML. Это быстро, безопасно и бесплатно хостится (например, на GitHub Pages или Cloudflare Pages).

GitHub Pages — это бесплатный хостинг для статических сайтов, который берёт файлы прямо из репозитория на GitHub и публикует их в виде сайта по адресу вида username.github.io или свой домен.

Что такое GitHub Pages

Сервис задуман как простой способ выложить личный сайт, документацию проекта, блог или лендинг на основе HTML, CSS и JavaScript без покупки отдельного хостинга VPS. Вся логика публикации завязана на репозиторий: коммитишь изменения в определённую ветку или папку — и после сборки сайт автоматически обновляется.

Какие сайты можно делать

Технически это любой сайт, который работает как статический: без серверного PHP/Node/Python, только фронтенд. Можно делать довольно сложные проекты: SPA на React/Vue/Svelte, документацию, блоги на Jekyll/статических генераторах, лендинги с формами через сторонние сервисы, небольшие веб‑приложения, документацию к API и т.п.

Ограничения и «сложность» проектов

Основное ограничение — отсутствие собственного серверного кода и базы данных: всё, что требует бэкенда, нужно выносить во внешние API или serverless‑функции на других платформах. Есть лимиты по размеру репозитория и трафику, но для типичных личных сайтов, портфолио и документации они почти не ощущаются.

Уровень сложности для разработчика

Для простого сайта достаточно уметь залить статическую вёрстку в репозиторий и включить публикацию в настройках — порог входа минимальный. Для сложных проектов добавляются шаги сборки (npm, сборщики, статические генераторы, кастомные workflow).

Как создать простой сайт на GitHub Pages шаг за шагом

Ниже — максимально простой и при этом «правильный» пошаговый сценарий, в конце у тебя будет статический сайт на хостинге GitHub Pages со своим доменом. Для создания инструкции я взял бесплатный домен https://hosting.cloudns.nz от сервиса ClouDNS.

1. Подготовка репозитория

  1. Зарегистрируйся/зайди на GitHub и зайди в свой профиль.
  2. Создай новый публичный репозиторий, например hosting-site (имя может быть любым, главное — не username.github.io).
  3. Инициализируй репозиторий с пустым README или без него — не принципиально.

2. Базовый сайт в репозитории

  1. В корне репозитория создай файл index.html.
  2. Впиши в него минимальную HTML‑страницу — заголовок, текст, пару ссылок/списков (любой простой контент, без зависимостей от серверного кода).
  3. Закоммить изменения и запушь их в ветку main или ту, которую используешь как основную.

3. Включение GitHub Pages

  1. Зайди в Settings репозитория.
  2. Найди раздел Pages (обычно в боковом меню).
  3. В блоке Source выбери: «Deploy from a branch»; Branch: main; Folder: / (root) (если index.html лежит в корне) или docs, если решишь хранить сайт в /docs
  4. Сохрани настройки.
  5. Подожди 1–2 минуты, пока GitHub соберёт и опубликует сайт.

GitHub разрешает публиковать сайт только из корня выбранной ветки или папки docs, другие каталоги вроде /site выбрать нельзя.

После этого сайт будет доступен на домене github.io, а com по адресу https://username.github.io/hosting-site/ (подставь свой логин и имя репозитория).

4. Дальнейшая работа с сайтом

  1. Любые изменения в index.html, CSS и JS в репозитории после commit + push автоматически деплоятся на GitHub Pages.
  2. Добавляй подстраницы (about.html, contacts.html и т.п.) и ссылки на них из index.html.
  3. Для стилей создай style.css и подключи его в <head>, для скриптов — script.js и подключи перед </body>.
  4. Статические ресурсы (CSS, JS, изображения) складывай в отдельные папки (css, js, img) и подключай относительными путями.

5. Подключение своего домена

Мне нужно чтобы проект сайта открывался по ссылке в домене https://hosting.cloudns.nz. Репозиторий сайта с исходным кодом вы можете найти по ссылке https://github.com/darkfire13/hosting-site.

  1. В этом же репозитории зайди в Settings → Pages и в поле Custom domain укажи hosting.cloudns.nz, затем сохрани.​
  2. Актуальные IP для сервиса GitHub Pages, вы можете найти в документации на странице Управление личным доменом для сайта "Страницы GitHub".
  3. У DNS провайдера ClouDNS для hosting.cloudns.nz я создал: A‑запись на IP GitHub Pages для основного домена (Apex domain). И обязательно создай запись для www иначе вы не сможете подключить SSL сертификат! Я создал www.hosting.cloudns.nz поддомен просто через запись CNAME. GitHub пишет в документации, что создание www поддомена это просто рекомендация, но по факту без него он не разрешает включить параметр Enforce HTTPS.
  4. Дождись, пока GitHub отметит успешную проверку DNS и включит HTTPS.​
  5. Включите Enforce HTTPS — это опция, которая принудительно включает HTTPS для твоего сайта на GitHub Pages и автоматически перенаправляет весь HTTP‑трафик на HTTPS. Если чекбокс пока недоступен (зачёркнут или с предупреждением), значит, GitHub ещё не завершил проверку DNS или выпуск сертификата, нужно подождать и убедиться, что записи настроены корректно.

Вся структура репозитория и URL https://github.com/darkfire13/hosting-site при этом сохранятся, но основным для пользователей станет домен https://hosting.cloudns.nz.

Заключение или Практическое применение хостинга GitHub Pages

GitHub Pages подходит для документации к open‑source, персонального портфолио, мини‑лендингов под проекты и простых промо‑страниц. Для коммерческих многоязычных проектов с динамикой (личные кабинеты, биллинг, сложная авторизация) логичнее использовать обычный хостинг/VPS, а GitHub Pages — как витрину или документационный сайт.