🎮Как опубликовать игру на JavaScript в GitHub Pages за 10 минут
Хотите показать свою игру друзьям или добавить в портфолио?
GitHub Pages — бесплатный хостинг для веб-проектов.
Разбираем на примере игры «Поймай фрукт»
Пошаговая инструкция
Шаг 1. Создайте репозиторий
— Зайдите на github.com → нажмите «New repository»
— Название: catch-the-fruit (только строчные буквы и дефисы!)
Шаг 2. Загрузите файлы
Вам нужны 3 файла в корне репозитория:
— index.html — разметка
— style.css — стили
— script.js — логика игры
Совет: все файлы должны быть именно с такими именами. Регистр важен — не Index.html, а index.html!
Шаг 3. Включите GitHub Pages
— Откройте «Settings» → слева выберите «Pages»
— В разделе «Source» выберите:
• Branch: main
• Folder: / (root)
— Нажмите «Save»
Через 1–2 минуты появится ссылка вида:
https://ваш-ник.github.io/catch-the-fruit/
❗️ Частые ошибки новичков
Белый экран? Проверьте имена файлов — должно быть именно index.html (не Index.html!).
Стили не работают? Убедитесь, что в HTML есть правильная ссылка:
<link rel="stylesheet" href="style.css">
Скрипт не запускается? Откройте консоль браузера (клавиша F12) — там будут ошибки.
Видите 404 ошибку? Подождите 2 минуты после включения Pages — иногда нужно время на обработку.
Смотрите рабочий пример
Я выложила готовую игру «Поймай фрукт» с полным кодом:
А вот ссылка на саму игру, которая уже работает:
Скачайте код, запустите у себя и модифицируйте как хотите!
❗️Почему это полезно для портфолио
— Бесплатно и навсегда
— Работает на мобильных устройствах
— Ссылку можно вставить в резюме
— Показывает ваши навыки даже без своего сайта
🌟 Бонус для подписчиков канала
Хотите научиться делать такие игры с нуля?
Запишитесь на бесплатный пробный урок по веб-разработке
#Frontend #GameDev #Обучение
