Предпросмотр веб-проектов Claude Code с помощью GitHub Pages

Простой способ тестировать HTML-приложения, создаваемые Claude Code на мобильных устройствах, используя GitHub Pages для развёртывания веток прямо из облачной среды.

Это AI-перевод статьи, сделанный каналом Про AI: Лучшие Статьи и Исследования.

Предпросмотр веб-проектов Claude Code с помощью GitHub Pages

Previewing Claude Code for web branches with GitHub Pages Автор: Simon Willison Оригинальный текст

Я активно использую Claude Code on the web — облачную версию Claude Code от Anthropic (с не самым удачным названием), которой можно управлять через веб-интерфейс или нативные мобильные и десктопные приложения.

Чаще всего я работаю через приложение Claude для iPhone.

Главный недостаток такого способа работы — помимо CLI-инструментов и библиотек кода, сложно просматривать результат работы Claude в процессе итераций над кодом.

Недавно я начал использовать GitHub Pages с приватными репозиториями, чтобы обойти это ограничение — по крайней мере для HTML-проектов — и это работает отлично.

Вот как я запускаю новый экспериментальный прототип с возможностью предпросмотра на телефоне:

1. Создаю новый приватный репозиторий на <https://github.com/new> — добавляю пустой README, чтобы репозиторий был инициализирован.
2. Запускаю задачу в Claude Code для этого репозитория — возможно, придётся перезапустить приложение, чтобы оно подхватило только что созданный репозиторий.
3. Говорю Claude Code, что нужно создать, используя формулировку вроде «self-contained HTML file, vanilla JavaScript, no build step, load any dependencies from a CDN» — это гарантирует, что код будет работать прямо в браузере без возни с npm.

Claude Code приступает к работе, и через несколько минут создаёт ветку в репозитории. А вот и хитрость:

1. Переходим в настройки Pages репозитория, убеждаемся что выбрано «Deploy from a branch» (по умолчанию), затем открываем выбор ветки и указываем ветку claude/..., которую только что создал Claude Code.

Ждём около минуты, пока завершится деплой (развёртывание), и новый предпросмотр становится доступен по этому (секретному) URL:

https://your-username.github.io/your-repo/index.html 

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

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

Я не обнаружил ограничений по времени жизни этих сессий Claude — возможно, можно держать сессию и PR открытыми бесконечно, постоянно отправляя изменения в развёрнутую среду на протяжении многих недель.

Когда вы сливаете PR, не забудьте обновить настройки Pages, чтобы они снова указывали на основную ветку.

В отличие от собственной функции Artifacts у Claude, на GitHub Pages нет CSP-ограничений для приложений, что означает возможность напрямую взаимодействовать с JSON API на других доменах.

Есть и другие хорошие варианты для развёртывания предпросмотра веток — раньше я использовал для этого Cloudflare Pages — но приятно иметь возможность сделать всё это только средствами GitHub.

Подпишитесь на канал и каждый день читайте лучшие материалы про AI переведенные на русский!

Нашли интересную статью для перевода? Пришлите нашему боту: @ailongreadsbot