Чтобы бесплатно опубликовать HTML-сайт, загрузите файлы в публичный репозиторий GitHub, откройте Settings, Pages и выберите Deploy from a branch, main и /(root). Ниже соберём минимальный сайт, получим публичную ссылку и разберём 404, пропавшие стили и задержку обновления.
Для первого сайта не нужен платный сервер. GitHub Pages берёт статические файлы из репозитория и раздаёт их как обычную веб-страницу. Такой способ подходит для портфолио, учебного лендинга, документации и небольшого проекта на HTML, CSS и JavaScript.
Положить index.html, style.css и изображения в понятные папки.
Создать публичный репозиторий и добавить в него весь проект.
Выбрать ветку main и папку /(root), затем открыть готовую ссылку.
Что именно публикует GitHub Pages
GitHub Pages работает со статическими файлами. Браузер получает готовые HTML, CSS, JavaScript, изображения и шрифты. Серверного кода, базы данных и секретного хранилища здесь нет. Поэтому токены, пароли и ключи API нельзя добавлять в репозиторий или JavaScript: посетитель сможет их увидеть.
| Проект | Подойдёт Pages | Почему |
|---|---|---|
| Портфолио на HTML и CSS | Да | Все файлы можно отдать браузеру как есть |
| Лендинг с кнопками на JavaScript | Да | Клиентский JavaScript выполняется в браузере |
| Сайт на React или Vue | Да, после сборки | Нужно публиковать готовую папку build или dist |
| PHP, Node.js или база данных | Нет | Pages не запускает серверные процессы |
| Форма с секретным ключом | Нет напрямую | Секрет нельзя безопасно хранить в коде страницы |
Для репозитория my-site страница обычно открывается по адресу https://USERNAME.github.io/my-site/. Вместо USERNAME будет ваш логин GitHub.
GitHub хранит исходные файлы, а Pages превращает выбранную ветку и папку в публичный сайт.
Как подготовить файлы сайта
GitHub Pages ищет входной файл в верхнем уровне выбранной папки публикации. Для обычного HTML-проекта назовите его index.html. Имя пишется маленькими буквами, без пробелов. Рядом можно держать таблицу стилей, скрипт и папку с изображениями.
- Создайте пустую папку
my-siteна компьютере. - Внутри создайте файл
index.html. Проверьте, что система не добавила скрытое расширение.txt. - Вставьте код ниже, сохраните файл и откройте его двойным кликом в браузере.
- Убедитесь, что появился заголовок, текст и синяя кнопка. Только после этого переходите к GitHub.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый сайт</title>
<style>
body {
max-width: 720px;
margin: 80px auto;
padding: 0 24px;
font-family: Arial, sans-serif;
color: #171a3f;
}
a {
display: inline-block;
padding: 12px 18px;
border-radius: 12px;
color: white;
background: #5362ee;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Сайт опубликован</h1>
<p>GitHub Pages работает.</p>
<a href="https://github.com">Открыть GitHub</a>
</body>
</html>- В адресной строке браузера открыт локальный файл
index.html. - Русский текст отображается без странных символов благодаря
UTF-8. - На узком окне страница не выходит за экран благодаря тегу
viewport.
Если источником выбран /(root), файл index.html должен лежать прямо в корне репозитория, а не внутри второй папки my-site.
index.html, открывается локально и лежит рядом с остальными файлами проекта.Как создать репозиторий и загрузить сайт
Войдите в GitHub, нажмите New repository и придумайте имя, например my-site. На бесплатном тарифе для этого сценария выберите Public. Не загружайте в репозиторий пароли, токены, файл .env и личные данные. После создания откройте Add file, Upload files и перетащите содержимое папки проекта.
- Создайте репозиторий
my-siteс видимостью Public. - Нажмите
Add file, затемUpload files. - Перетащите сам
index.htmlи остальные файлы, а не внешнюю папку целиком. - В поле сообщения напишите
Add first siteи нажмитеCommit changes. - Вернитесь на вкладку Code и убедитесь, что
index.htmlвиден в первом уровне списка.
Если Git уже знаком, тот же результат можно получить из терминала. Команды ниже создают локальный репозиторий, связывают его с GitHub и отправляют ветку main. Замените USERNAME и адрес репозитория своими значениями.
git init
git add .
git commit -m "Add first site"
git branch -M main
git remote add origin https://github.com/USERNAME/my-site.git
git push -u origin mainPages публикует содержимое репозитория. Неважно, загрузили вы файлы через браузер или отправили командой git push. Для следующих обновлений удобнее Git, потому что он сохраняет историю изменений.
Если команды пока незнакомы, начните с курса Git в Кодике. А структуру самой страницы можно закрепить в курсе HTML: эти две темы вместе покрывают весь путь от файла до публичной ссылки.
Как включить GitHub Pages и получить ссылку
Теперь укажем GitHub, откуда брать сайт. Откройте репозиторий, перейдите в Settings и выберите Pages в боковом меню. В блоке Build and deployment оставьте простой режим публикации из ветки. Он не требует отдельного workflow и подходит для готовых статических файлов.
- В поле
SourceвыберитеDeploy from a branch. - В списке веток выберите
main. - В списке папок выберите
/(root)и нажмитеSave. - Подождите завершения запуска на вкладке Actions или вернитесь в Settings, Pages.
- Нажмите
Visit site. Первая публикация и последующие изменения могут появиться не мгновенно.
После каждого commit в выбранную ветку GitHub запускает новое развёртывание и обновляет публичную версию.
Для проекта используется путь с именем репозитория: USERNAME.github.io/my-site/. Адрес без /my-site/ относится к отдельному пользовательскому сайту, чей репозиторий должен называться USERNAME.github.io.
Почему сайт не открывается или выглядит сломанным
Сначала откройте Settings, Pages и вкладку Actions. Если развёртывание ещё выполняется, дождитесь зелёной отметки. Если оно завершилось, но страница показывает 404 или стили пропали, проверьте входной файл и пути. На сервере регистр букв важен: Logo.png и logo.png считаются разными файлами.
В выбранном источнике нет index.html верхнего уровня. Переместите файл в корень или поменяйте папку публикации.
Путь начинается с / и ведёт от домена, а сайт живёт внутри /my-site/. Для файлов проекта используйте относительные пути вроде ./style.css и ./images/logo.png.
Commit отправлен не в ветку main, развёртывание ещё идёт или браузер показывает кеш. Проверьте Actions и обновите страницу без кеша.
Нужны права администратора или maintainer на репозиторий. В чужом проекте раздел Pages может быть недоступен.
index.html лежит в корне, Pages смотрит на main и /(root), запуск Actions зелёный, а ссылка открывается в режиме инкогнито.Можно ли бесплатно разместить сайт на GitHub Pages?
Да. На GitHub Free Pages доступен для публичных репозиториев. Этого достаточно для учебного статического сайта на HTML, CSS и JavaScript.
Какой файл открывает GitHub Pages первым?
Для обычного HTML-сайта используйте index.html в верхнем уровне выбранной папки публикации, например в /(root).
Почему адрес содержит имя репозитория?
Это project site. Его стандартный адрес выглядит как USERNAME.github.io/REPOSITORY/. Адрес без имени проекта получают через отдельный репозиторий USERNAME.github.io.
Можно ли запустить PHP или Node.js на GitHub Pages?
Нет. GitHub Pages раздаёт статические файлы и не запускает серверный процесс. Для PHP, Node.js и базы данных нужен другой хостинг.
Сколько ждать публикацию GitHub Pages?
Обычно сайт появляется быстрее, но официальная документация предупреждает, что изменения могут публиковаться до 10 минут. Статус лучше смотреть на вкладке Actions.
Разберите первый сайт на HTML, CSS и JavaScript, затем приведите в порядок профиль GitHub начинающего разработчика. Если хотите обновлять проект без ручной загрузки, пригодятся первые команды Git.
Следующий практический шаг: вынести стили в style.css, подключить JavaScript и отправить новый commit. В Кодике можно пройти короткие задания по HTML и Git, чтобы повторить этот путь уже на собственном проекте.