Для простых проектов на HTML
GitHub Pages отдаёт готовые файлы как есть и ничего не запускает на своей стороне.
Правило простое: если проект открывается двойным кликом по index.html у тебя на
компьютере — эта инструкция твоя. Игра, лендинг, портфолио, калькулятор, визуализация — не важно, что
именно ты сделал.
npm run build. Выкладывать надо не папку, а результат сборки: шаги другие.Проверь папку проекта
Если ИИ-редактор отдал ZIP, сначала распакуй его. Открой получившуюся папку и
найди стартовый файл index.html. Он должен лежать сразу внутри выбранной папки.
Репозиторий
Папка проекта на GitHub вместе с историей изменений.
Коммит
Сохранённая точка состояния проекта. Как отдельное сохранение в игре.
Пуш
Отправка сохранённого коммита с компьютера на GitHub.
Создай аккаунт GitHub
GitHub будет хранить файлы проекта и даст адрес для публикации.
- Открой страницу регистрации GitHub.
- Введи почту, пароль и имя пользователя. Имя станет частью адреса проекта, поэтому используй латиницу, цифры и дефисы.
- Выбери свою страну, пройди капчу и подтверди почту кодом из письма.
- После сообщения об успешном создании аккаунта войди ещё раз.
Сразу включи двухфакторную защиту
Двухфакторная защита — это когда при входе кроме пароля нужен ещё короткий код из шести цифр. GitHub просит её у всех, так что пропустить шаг не выйдет. Один раз настроил — и дальше это пара секунд при входе.
Что за приложение-аутентификатор
Это бесплатная программа на телефон, которая показывает те самые шесть цифр. Каждые 30 секунд код меняется — поэтому подсмотреть его и войти позже не получится. Интернет ему не нужен: код считается прямо на твоём телефоне. Настройка одна: ты один раз наводишь камеру на QR-код с сайта, и приложение запоминает связку с твоим аккаунтом.
Подойдёт любое из этих — они работают по одному стандарту, разница только в оформлении. Ставятся из App Store или Google Play:
Поставь приложение на телефон заранее — открывать его нужно будет через пару шагов.
- На GitHub нажми на аватар → Settings.
- Открой Password and authentication.
- В блоке Two-factor authentication выбери вариант с приложением (Authenticator app).
- Открой приложение на телефоне, нажми в нём «добавить аккаунт» и наведи камеру на QR-код с экрана компьютера.
- Приложение покажет шесть цифр — введи их на сайте. Если не успел и код сменился, введи новый.
- GitHub покажет резервные коды. Про них — сразу ниже, не закрывай окно.
Резервные коды: что это и зачем
Резервные коды — это список одноразовых паролей на случай, когда приложение недоступно: телефон разрядился, потерялся, сломался или ты просто сменил его на новый. Каждый код срабатывает один раз и пускает в аккаунт вместо шести цифр из приложения. Ничего сложного: это запасные ключи от квартиры.
Нажми Download — GitHub сохранит их обычным текстовым файлом. Дальше положи файл туда, где он точно не потеряется и куда не заглянет посторонний: в менеджер паролей, в защищённую заметку или просто распечатай и убери к документам.
Подробнее: официальная справка GitHub о двухфакторной защите и резервных способах входа.
Добавь папку в GitHub Desktop
GitHub Desktop — графическая программа, которая отправит файлы без команд.
- Скачай программу с официальной страницы GitHub Desktop.
- Установи её и нажми Sign in to GitHub.com.
- Браузер попросит разрешить вход. Подтверди и вернись в программу.
На экране Let’s get started! нажми Add an Existing Repository from your Local Drive….
Укажи путь к папке проекта. Для новой папки программа покажет сообщение This directory does not appear to be a Git repository. Это ожидаемо. Нажми ссылку create a repository внутри сообщения.
Создай репозиторий, коммит и пуш
Сначала GitHub Desktop сохранит состояние проекта на компьютере, затем отправит его на GitHub.
my-first-project.None, если ИИ не дал других
указаний.Проверь поля и нажми Create Repository.
Publish project в поле
Summary и нажми Commit to main. main — основная ветка,
то есть линия изменений, которую мы будем публиковать.
Нажми Publish repository. В следующем окне сними отметку Keep this code private, затем нажми Publish Repository.
После отправки сверху появится Fetch origin, а в центре — No local changes. Это значит, что локальные файлы отправлены на GitHub.
Нажми View on GitHub. В браузере должны быть видны index.html, скрипты и
папка с картинками.
Включи GitHub Pages
Теперь GitHub превратит файлы репозитория в работающий сайт.
- На странице репозитория открой Settings.
- В левом меню выбери Pages.
- В поле Source оставь Deploy from a branch.
- В Branch выбери
main, рядом —/ (root). - Нажми Save.
/ (root) означает корень репозитория. Именно там GitHub ищет
index.html.
После сохранения появится сообщение GitHub Pages source saved. GitHub начнёт сборку сайта.
Открой вкладку Actions. Жёлтый значок и подпись In progress означают, что публикация ещё выполняется.
Зелёная галочка и статус Success означают, что сайт опубликован.
Открой проект и забери ссылку
Адрес можно найти в Settings → Pages после успешной сборки.
https://ТВОЙ-ЛОГИН.github.io/ИМЯ-РЕПОЗИТОРИЯ/
Открой адрес в новой вкладке. Проверь картинки, кнопки, ссылки — всё, что должно работать. Если проект открывается — у тебя есть публичная ссылка.
game.js и картинку из папки
assets — значит, опубликован не пустой экран, а настоящий проект из нескольких файлов.
Затем открой ссылку на телефоне или сузь окно браузера. Страница не должна уезжать вбок, а управление должно реагировать на касания.
Тестовая публикация работает
Что пойдёт не так
Ниже не догадки из справки. Эти ситуации были воспроизведены на тестовом репозитории.
Коммит есть, а на GitHub файлов нет
Коммит хранится на компьютере, пока не нажат Push origin. До пуша тестовый файл возвращал 404, после пуша появился на GitHub.
Не загружается картинка или скрипт
GitHub Pages различает заглавные и строчные буквы. Assets/Spark.PNG и
assets/spark.png — разные пути. Неверный тестовый адрес вернул 404.
В корне 404 или пустой экран
Стартовый файл должен называться index.html и лежать в корне. После его тестового
переименования в start.html корневой адрес вернул 404.
index.html существует, а скрипт завершился с ошибкой.
Ссылка возвращает 404 сразу после включения Pages
Подожди до 10 минут и смотри статус во вкладке Actions. Не меняй источник, пока выполняется pages-build-deployment.
Пропали папки с подчёркивания
Jekyll может пропускать имена, начинающиеся с _. Добавь пустой файл
.nojekyll в корень, затем сделай коммит и пуш. В тесте адрес изменился с 404 на 200.
Поведение описано в справке GitHub о Jekyll.
Репозиторий оказался закрытым
GitHub Desktop включил Keep this code private по умолчанию. Для бесплатного Pages репозиторий должен быть Public. Перед открытием удали из файлов ключи и пароли.
GitHub Desktop показал файлы другого проекта
Проект лежит внутри другого репозитория. Перемести его папку за пределы родительского проекта и добавь заново. Не публикуй служебные или чужие файлы.
Тот же путь командами Git
cd "/путь/к/папке-проекта"
git init -b main
git add .
git commit -m "Publish project"
git remote add origin https://github.com/ЛОГИН/РЕПОЗИТОРИЙ.git
git push -u origin main- cd
- открывает папку проекта;
- git init
- создаёт историю и ветку
main; - git add
- готовит файлы к сохранению;
- git commit
- создаёт коммит;
- git remote add
- связывает папку с GitHub;
- git push
- отправляет коммит.
После команд всё равно включи Pages через Settings → Pages → main → / (root) → Save.
Может понадобиться VPN
У части провайдеров GitHub и страница загрузки GitHub Desktop открываются не всегда. Если сайт не грузится или установщик не скачивается — включи VPN. На сами шаги это никак не влияет: порядок действий остаётся тем же.
Покажи, что ты сделал
Вставь полученный адрес в поле «Ссылка на проект». Подходит и репозиторий, и работающая страница — лучше дать ссылку на страницу, чтобы зритель сразу увидел результат.