GitHub Pages и PWA для новичка: публикуем игру по ссылке

Вы сделали игру «Змейку» или небольшой сайт. Она отлично работает на вашем компьютере, но хочется поделиться ею с друзьями, родственниками или потенциальными пользователями. Для этого сайт нужно выложить в интернет. Покажем, как сделать это бесплатно с помощью GitHub Pages и как превратить сайт в PWA — приложение, которое можно установить на телефон прямо из браузера.

Мы пойдём пошагово, без предположений, что вы уже разбираетесь в Git и серверах. Главная идея — доверить техническую рутину Claude Code, а сосредоточиться на результате.

Что такое GitHub Pages простыми словами

GitHub Pages — это бесплатный сервис от компании GitHub, который позволяет публиковать статические сайты прямо из репозитория. Слово «статический» означает, что сайт состоит из готовых файлов: HTML, CSS, JavaScript, картинки. На таком сайте нет базы данных, личных кабинетов и сложной серверной логики. Зато он работает быстро, надёжно и не требует настройки сервера.

Представьте, что у вас есть папка с файлами сайта. GitHub Pages берёт эту папку, раскладывает файлы на своих серверах и даёт вам ссылку. Кто угодно может открыть эту ссылку в браузере и увидеть ваш сайт.

GitHub Pages бесплатен для публичных репозиториев. Это значит, что любой желающий может зайти на вашу страницу. Для личных проектов, портфолио, демо-версий игр и небольших сайтов этого более чем достаточно.

Что такое PWA и зачем он нужен

PWA расшифровывается как Progressive Web App, то есть прогрессивное веб-приложение. Это технология, которая позволяет сайту вести себя почти как обычное приложение.

Что умеет PWA:

• устанавливаться на главный экран телефона или рабочий стол компьютера;
• запускаться без адресной строки браузера;
• работать офлайн или при плохом интернете;
• отправлять уведомления;
• иметь собственную иконку и заставку.

Для простой игры вроде «Змейки» PWA особенно полезен. Вместо того чтобы открывать браузер и вводить адрес, игрок нажимает иконку на телефоне — и игра запускается как обычное приложение.

Что понадобится для старта

Вам понадобятся:

• аккаунт на GitHub;
• установленный Git на компьютере;
• папка с файлами вашего сайта или игры;
• Claude Code для помощи с командами.

Если у вас ещё нет аккаунта на GitHub, зарегистрируйтесь на github.com. Это бесплатно и занимает пару минут.

Если Git не установлен, Claude Code может помочь с установкой. Или вы можете скачать установщик с официального сайта git-scm.com.

Что такое Git простыми словами

Прежде чем загружать файлы на GitHub, полезно понять, что такое Git. Git — это система контроля версий. Она позволяет сохранять историю изменений в проекте и при необходимости возвращаться к старым версиям.

Представьте, что вы пишете книгу. Вместо того чтобы хранить только последнюю версию, вы сохраняете каждую главу отдельно. Если новая глава не понравилась, вы можете вернуться к предыдущей. Git делает то же самое для кода и файлов проекта.

Основные понятия Git:

• Репозиторий — папка проекта, за которой следит Git.
• Коммит — снимок состояния проекта в определённый момент. Каждый коммит имеет сообщение, описывающее изменения.
• Ветка — независимая линия разработки. В простых проектах обычно используется одна ветка main.
• Удалённый репозиторий — копия репозитория на сервере, в нашем случае на GitHub.
• Push — загрузка локальных изменений на удалённый репозиторий.
• Pull — скачивание изменений с удалённого репозитория.

Не пытайтесь запомнить все команды сразу. Claude Code будет подсказывать, что вводить. Главное — понимать смысл: Git помогает не потерять вашу работу и удобно делиться ей с другими.

Шаг 1. Подготовка файлов проекта

Убедитесь, что в папке проекта есть главный файл index.html. Именно он будет открываться по ссылке. Если у вас игра «Змейка», то в папке должны лежать index.html, style.css и script.js.

Если файлов много, полезно иметь простую структуру:

snake-game/
├── index.html
├── style.css
├── script.js
├── manifest.json
└── icons/
    ├── icon-192.png
    └── icon-512.png

Файлы manifest.json и иконки понадобятся для PWA. О них мы поговорим позже. Пока главное — чтобы index.html находился в корне проекта.

Шаг 2. Создание репозитория на GitHub

Репозиторий — это хранилище файлов проекта на GitHub. Он позволяет отслеживать изменения, делиться кодом и публиковать сайт.

Чтобы создать репозиторий:

1. Войдите в свой аккаунт на GitHub.
2. Нажмите на кнопку «New» или «Создать репозиторий».
3. Придумайте название, например snake-game.
4. Выберите «Public», чтобы репозиторий был открытым.
5. Не добавляйте файл README, если хотите начать с чистого листа.
6. Нажмите «Create repository».

После создания GitHub покажет вам инструкции по загрузке файлов. Не пугайтесь команд в терминале — Claude Code поможет всё сделать.

Шаг 3. Загрузка файлов через Claude Code

Откройте Claude Code в папке проекта и попросите его загрузить файлы на GitHub. Вот пример промпта:

Я создал репозиторий на GitHub с названием snake-game.
Мой никнейм на GitHub: [ваш никнейм].
Помоги загрузить файлы из этой папки в репозиторий.

Что нужно сделать:
- Инициализировать Git в текущей папке.
- Привязать папку к удалённому репозиторию.
- Загрузить все файлы: index.html, style.css, script.js.
- Сделать первый коммит с сообщением "Initial commit".

Критерий готовности:
- В репозитории на GitHub видны все файлы проекта.

Claude выполнит примерно такие команды:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/ваш-никнейм/snake-game.git
git push -u origin main

После выполнения файлы появятся на GitHub.

Если вы видите ошибку с просьбой войти в систему, GitHub запрашивает аутентификацию. Современный способ — использовать персональный токен доступа. Claude поможет вам его создать и настроить. Никогда не вводите пароль от GitHub напрямую в терминал.

Шаг 4. Включение GitHub Pages

Теперь нужно сказать GitHub, что из этого репозитория нужно сделать сайт.

1. Откройте страницу репозитория на GitHub.
2. Перейдите во вкладку «Settings».
3. В левом меню выберите «Pages».
4. В разделе «Build and deployment» выберите источник «Deploy from a branch».
5. В выпадающем списке выберите ветку main и папку /root.
6. Нажмите «Save».

Через несколько минут GitHub соберёт сайт и даст вам ссылку. Обычно она выглядит так:

https://ваш-никнейм.github.io/snake-game

Эту ссылку можно открыть в браузере и проверить.

Шаг 5. Проверка публикации

После включения GitHub Pages подождите одну-две минуты и откройте ссылку. Если всё сделано правильно, вы увидите свой сайт или игру.

Если страница не открывается, проверьте:

• правильно ли указано имя репозитория в ссылке;
• находится ли файл index.html в корне проекта;
• выбрана ли ветка main в настройках Pages;
• прошло ли достаточно времени с момента включения.

Иногда GitHub Pages публикует сайт не мгновенно, а в течение нескольких минут. Если ссылка не работает сразу, подождите и обновите страницу.

Шаг 6. Добавление PWA

Теперь сделаем так, чтобы сайт можно было установить как приложение. Для этого нужно добавить три вещи:

1. Файл manifest.json — описание приложения.
2. Иконки — картинки, которые будут отображаться на главном экране.
3. Service Worker — небольшой скрипт, который позволяет приложению работать офлайн.

Файл manifest.json

Создайте в корне проекта файл manifest.json с таким содержимым:

{
  "name": "Змейка",
  "short_name": "Змейка",
  "description": "Классическая игра Змейка",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#10B981",
  "icons": [
    {
      "src": "icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Этот файл рассказывает браузеру, как называется приложение, какую иконку показывать и как оно должно выглядеть при запуске.

Иконки

Для PWA нужны квадратные иконки размером 192x192 и 512x512 пикселей. Можно нарисовать их самостоятельно или попросить Claude Code создать простые SVG-иконки и конвертировать в PNG.

Если вы не хотите заморачиваться с картинками, можно сначала сделать PWA без иконок, а потом добавить их. Без иконок приложение установится, но будет выглядеть менее аккуратно.

Подключение manifest

В файле index.html внутри тега head добавьте строку:

<link rel="manifest" href="manifest.json">

Service Worker

Service Worker — это скрипт, который браузер запускает в фоне. Он отвечает за кэширование файлов и работу офлайн.

Создайте файл service-worker.js в корне проекта:

const CACHE_NAME = 'snake-game-v1';
const FILES_TO_CACHE = [
  '/',
  '/index.html',
  '/style.css',
  '/script.js',
  '/manifest.json'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(FILES_TO_CACHE))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Этот скрипт сохраняет файлы игры в кэш браузера и отдаёт их оттуда, даже если интернет пропал.

Регистрация Service Worker

В файле script.js добавьте регистрацию:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(() => console.log('Service Worker зарегистрирован'))
    .catch(error => console.log('Ошибка регистрации:', error));
}

После этих изменений сайт станет полноценным PWA.

Шаг 7. Загрузка обновлений на GitHub

После добавления PWA нужно снова загрузить файлы на GitHub. Попросите Claude Code:

Я добавил файлы manifest.json, service-worker.js и иконки. Загрузи все изменения на GitHub в репозиторий snake-game.

Сделай коммит с сообщением "Add PWA support".

Claude выполнит:

git add .
git commit -m "Add PWA support"
git push origin main

GitHub Pages автоматически обновит сайт через несколько минут.

Шаг 8. Установка PWA на телефон

Когда сайт открывается в браузере и правильно настроен как PWA, браузер предлагает установить его.

На Android

В Chrome появится всплывающее окно «Добавить на главный экран?». Нажмите «Установить». Иконка приложения появится среди других приложений.

Если окно не появилось, нажмите три точки в правом верхнем углу Chrome и выберите «Установить приложение» или «Добавить на главный экран».

На iPhone

В Safari нажмите кнопку «Поделиться» внизу экрана и выберите «На экран «Домой»». Safari добавит иконку на главный экран.

На компьютере

В Chrome или Edge в адресной строке появится иконка установки. Нажмите на неё и подтвердите установку. Приложение появится в меню «Пуск» или в папке приложений.

Типичные проблемы при публикации

Проблема 1: страница показывает 404

Если по ссылке открывается ошибка 404, проверьте:

• файл index.html действительно в корне репозитория;
• в настройках Pages выбрана правильная ветка и папка;
• прошло хотя бы 2–3 минуты после включения Pages.

Проблема 2: стили или скрипты не загружаются

Если сайт открывается, но выглядит без стилей, возможно, пути к файлам указаны неправильно. В GitHub Pages пути должны быть относительными или начинаться с имени репозитория. Claude поможет исправить пути.

Проблема 3: PWA не предлагает установку

Браузер предлагает установку только если manifest.json корректный и Service Worker зарегистрирован. Проверьте консоль браузера на ошибки. Часто помогает добавить все обязательные поля в manifest: name, short_name, start_url, display, icons.

Проблема 4: иконки не отображаются

Убедитесь, что файлы иконок действительно загружены в репозиторий и пути в manifest.json указаны правильно. Иконки должны быть в формате PNG и иметь размеры, указанные в manifest.

Проблема 5: офлайн-режим не работает

Проверьте, что Service Worker зарегистрирован без ошибок. В Chrome откройте инструменты разработчика, вкладку Application, раздел Service Workers. Там вы увидите, активен ли ваш Service Worker.

Как обновлять опубликованную игру

Когда вы захотите что-то изменить в игре, процесс будет таким же, как и в первый раз:

1. Внесите изменения в файлы локально.
2. Попросите Claude Code загрузить изменения на GitHub.
3. Подождите несколько минут, пока GitHub Pages обновит сайт.

Пример промпта:

Я изменил файл script.js: добавил уровни сложности. Загрузи изменения на GitHub в репозиторий snake-game. Коммит: "Add difficulty levels".

Claude выполнит:

git add .
git commit -m "Add difficulty levels"
git push origin main

После этого откройте сайт в режиме инкогнито или очистите кэш, чтобы увидеть изменения. Service Worker может закэшировать старую версию, поэтому обновления иногда видны не сразу.

Как откатить изменения

Иногда после обновления что-то ломается. Git позволяет вернуться к предыдущей версии.

Если вы ещё не загрузили изменения на GitHub

Если изменения только на вашем компьютере, откатите их командой:

git checkout -- .

Это вернёт все файлы к состоянию последнего коммита. Будьте осторожны: необходранные изменения тоже пропадут.

Если изменения уже на GitHub

Можно откатиться к предыдущему коммиту:

git log --oneline

Эта команда покажет историю коммитов с короткими идентификаторами. Найдите коммит, к которому хотите вернуться, и выполните:

git revert [идентификатор коммита]
git push origin main

Команда revert создаёт новый коммит, который отменяет изменения выбранного коммита. Это безопаснее, чем удалять историю.

Если что-то пошло совсем не так

В крайнем случае можно полностью перезаписать ветку на GitHub локальной версией:

git push origin main --force

Используйте эту команду с осторожностью, потому что она удаляет историю изменений на GitHub. Если работаете в команде, лучше обсудить откат заранее.

Как опубликовать сайт без Claude Code

Хотя Claude Code сильно упрощает процесс, полезно понимать, как опубликовать сайт вручную. Это пригодится, если Claude временно недоступен или вы хотите лучше контролировать процесс.

Ручная загрузка через сайт GitHub

1. Откройте страницу репозитория.
2. Нажмите «Add file» → «Upload files».
3. Перетащите файлы проекта в браузер.
4. Напишите сообщение коммита, например «Initial commit».
5. Нажмите «Commit changes».

Этот способ подходит для небольших проектов. Для больших проектов удобнее использовать Git в терминале.

Публикация через Git в терминале

# Перейти в папку проекта
cd snake-game

# Инициализировать Git
git init

# Добавить все файлы
git add .

# Создать коммит
git commit -m "Initial commit"

# Привязать удалённый репозиторий
git remote add origin https://github.com/ваш-никнейм/snake-game.git

# Загрузить файлы на GitHub
git push -u origin main

Если ветка называется master, а не main, замените main на master в последних двух командах.

Как Claude Code упрощает процесс

Весь процесс публикации можно сделать без Claude Code, но с ним гораздо проще. Вот что он берёт на себя:

• помогает правильно инициализировать Git;
• пишет команды для загрузки файлов;
• объясняет ошибки, если что-то пошло не так;
• генерирует manifest.json и Service Worker;
• проверяет пути и настройки.

Ваша задача — описать желаемый результат. Например:

Claude может дать вам пошаговую инструкцию и выполнить техническую часть.

Когда GitHub Pages не подходит

GitHub Pages отлично подходит для статических сайтов, но у него есть ограничения:

• нельзя запускать серверный код, например Python или Node.js;
• нет базы данных;
• есть ограничения на трафик;
• публичные репозитории видны всем.

Если ваш проект требует серверной логики, базы данных или закрытого доступа, понадобятся другие сервисы. Но для игр, лендингов, портфолио, блогов и демо-версий GitHub Pages — идеальный выбор.

Что такое HTTPS и почему он важен для PWA

GitHub Pages автоматически выдаёт сайтам HTTPS. Это значит, что соединение между браузером и сайтом зашифровано. Для PWA HTTPS обязателен: Service Worker и установка приложения работают только на защищённых сайтах.

Вам не нужно ничего настраивать. GitHub делает это сам. Просто знайте, что ссылка на ваш сайт будет начинаться с https://, а не с http://.

Как проверить, что PWA работает

В Chrome откройте ваш сайт, нажмите F12 и перейдите во вкладку «Application». В левом меню вы найдёте разделы:

• Manifest — покажет, загрузился ли manifest.json и корректны ли его поля.
• Service Workers — покажет, зарегистрирован и активен ли ваш Service Worker.
• Storage → Cache storage — покажет, какие файлы закэшированы.

Если в Manifest нет ошибок, Service Worker активен, а в кэше видны файлы игры — PWA настроено правильно. Также можно отключить интернет на вкладке «Network» (выбрать «Offline») и обновить страницу: если игра загрузилась, офлайн-режим работает.

Безопасность и публичность

Помните, что публичный репозиторий на GitHub виден всем. Не загружайте туда:

• пароли и ключи доступа;
• персональные данные;
• конфиденциальную информацию;
• платные ресурсы, на которые у вас нет прав.

Если в проекте есть такие данные, лучше удалить их перед публикацией. Claude Code может помочь проверить файлы на наличие секретов.

Чек-лист публикации

• Я создал аккаунт на GitHub.
• Я создал репозиторий для проекта.
• Claude Code загрузил файлы на GitHub.
• Я включил GitHub Pages в настройках репозитория.
• Сайт открывается по ссылке https://мой-никнейм.github.io/название-репозитория.
• Я добавил manifest.json и подключил его в index.html.
• Я добавил иконки нужных размеров.
• Я добавил Service Worker для офлайн-работы.
• Я загрузил обновления на GitHub.
• Браузер предлагает установить приложение.

Мостик к практикуму

GitHub Pages и PWA — это тот финальный штрих, который превращает ваш проект из локальной игрушки в настоящий продукт, доступный по ссылке. Вы увидели, что публикация не требует серверов, денег и глубоких технических знаний. Достаточно правильно поставить задачу Claude Code и проверить результат.

Если вам интересно научиться не только публиковать игры, но и создавать собственные проекты с нуля — сайты, приложения, инструменты для бизнеса — присоединяйтесь к практикуму «Путь к миллиарду». Там мы проходим весь путь: от идеи до публикации, от первого промпта до готового продукта.

А пока возьмите свою «Змейку», опубликуйте её на GitHub Pages и отправьте ссылку другу. Ничего не мотивирует так, как первый живой пользователь, который играет в то, что сделали вы.