Откройте VS Code на aisearch.ru, создайте проект и нажмите внизу кнопку «Опубликовать». Редактор создаст репозиторий в вашем аккаунте GitHub и выложит сайт по адресу вида логин.github.io/название. Чтобы обновить сайт, достаточно нажать эту кнопку ещё раз.
Что понадобится
- Бесплатный аккаунт на GitHub. Сайт и код будут храниться в нём, а не у нас.
- Проект с файлом
index.htmlв корне или проект на React из готового шаблона.
Новый проект создаётся так: внизу слева нажмите на название текущего проекта, выберите «Новый проект», затем тип и название.
Как опубликовать сайт в первый раз
- Откройте проект и внизу нажмите «Опубликовать».
- В окне с кодом нажмите «Скопировать код и открыть GitHub».
- На странице GitHub вставьте код и разрешите доступ приложению «AiSearch Код». Пароль от GitHub редактор не видит.
- Вернитесь на вкладку редактора и подтвердите публикацию.
- Проверьте название репозитория: оно войдёт в адрес сайта. Нажмите Enter.
- Подождите одну-две минуты. Появится окно со ссылкой на готовый сайт.
Сначала редактор покажет код для входа в GitHub:
После входа он попросит подтвердить публикацию:
Когда сборка закончится, появится ссылка на сайт:
Репозиторий будет открытым: и сайт, и его код сможет посмотреть любой человек. Файлы .env и ключи редактор не выкладывает, но пароли и токены лучше вообще не писать в коде.
Как обновить опубликованный сайт
- Внесите правки. Редактор сохраняет файлы сам.
- Снова нажмите «Опубликовать». Вопросов больше не будет, адрес останется прежним.
- Через одну-две минуты откройте сайт. Если видна старая версия, обновите страницу.
Вход в GitHub действует, пока открыта вкладка. После её перезагрузки код из окна нужно будет ввести ещё раз. В другом браузере редактор снова спросит название репозитория: введите то же самое и выберите «Заменить файлы». Прошлые версии останутся в истории репозитория.
Как опубликовать проект на React
- Создайте проект из шаблона «React».
- Откройте терминал кнопкой внизу и выполните
npm install. Пакеты поставятся прямо в браузере. - Выполните
npm run dev: приложение откроется в окне «Результат» и будет обновляться после каждого сохранения. - Когда всё готово, нажмите «Опубликовать». Проект соберёт GitHub, поэтому вкладку можно оставить открытой и заниматься другими делами.
Если сборка на GitHub не пройдёт, редактор покажет кнопку с журналом ошибок, а прошлая версия сайта останется на месте.
Как привязать свой домен к сайту
Домен покупается отдельно у любого регистратора. Привязка на GitHub бесплатная.
- На GitHub откройте репозиторий сайта и перейдите в Settings → Pages.
- В поле Custom domain впишите домен и нажмите Save. Сначала сделайте именно это, а DNS меняйте потом: иначе ваш поддомен сможет занять другой человек.
- В панели регистратора добавьте записи:
| Что подключаете | Тип записи | Значение |
|---|---|---|
www.example.ru | CNAME | логин.github.io |
example.ru | A | 185.199.108.153 |
example.ru | A | 185.199.109.153 |
example.ru | A | 185.199.110.153 |
example.ru | A | 185.199.111.153 |
- Подождите: записи DNS расходятся до 24 часов.
- Вернитесь в Settings → Pages и включите Enforce HTTPS. Эта настройка тоже может появиться в течение суток.
При следующих обновлениях домен останется привязанным.
Что так опубликовать нельзя
Этот способ подходит для лендингов, портфолио, визиток и учебных проектов. У него есть границы:
- Выкладываются только статичные сайты и собранные приложения: без своего сервера, PHP и базы данных.
- На бесплатном аккаунте GitHub сайт публикуется только из открытого репозитория.
- GitHub не разрешает использовать Pages как бесплатный хостинг для интернет-магазинов и платных онлайн-сервисов.
- Размер сайта ограничен 1 ГБ, а рекомендованный объём трафика составляет 100 ГБ в месяц.
В редакторе тоже есть ограничения: серверы на Node, npx и файлы .vue и .svelte в браузере не запускаются, а проект можно опубликовать, если в нём не больше 1000 файлов и 50 МБ.
Частые вопросы
Это бесплатно?
Да. Редактор бесплатный, а GitHub Pages и сборка в открытых репозиториях ничего не стоят. Платить придётся только за свой домен, если он нужен.
Нужно ли устанавливать VS Code или Git?
Нет. Всё работает во вкладке браузера, команды Git вводить не нужно.
Можно ли сделать код закрытым?
На бесплатном аккаунте GitHub нет: сайт публикуется только из открытого репозитория. Поэтому пароли и токены в код проекта добавлять нельзя.
Как убрать сайт?
Откройте репозиторий на GitHub, перейдите в Settings и в самом низу страницы удалите репозиторий. Сайт перестанет открываться.
Где хранятся файлы проекта?
Пока вы работаете, они лежат в вашем браузере. Проект можно сохранить в личный кабинет кнопкой «В кабинет», а после публикации его копия будет и на GitHub.