Как создать сайт на BOLT NEW и загрузить его на хостинг

Чтобы создать сайт, больше не нужно писать код и продумывать дизайн – ИИ-ассистенты могут сделать всё за вас. Одним из таких инструментов является BOLT NEW – платформа от StackBlitz для full-stack разработки. На ней вы можете создавать веб-сайты прямо в браузере, без необходимости настраивать локальную среду.

Сегодня мы подробно рассмотрим, как создать полноценный веб-сайт на этой платформе и разместить его на виртуальном хостинге от HostPro.

Шаг 1. Регистрация

Сначала нужно зарегистрироваться на платформе BOLT NEW. Для этого заполните поля в регистрационной форме: почта, имя и пароль. После этого на указанную вами электронную адресу придёт письмо для подтверждения регистрации.

После подтверждения ваш аккаунт успешно создастся, и вы попадёте в рабочее пространство платформы.

Шаг 2. Формирование промпта

Чтобы начать создание сайта, вернитесь на главную страницу BOLT NEW и вставьте заранее подготовленный промпт в поле ИИ. Проще говоря, промпт – это текстовое сообщение, которое объясняет языковой модели, что именно вы хотите сгенерировать.

После вставки промпта нажмите на стрелку, чтобы начать его интерпретацию. Для демонстрации принципа работы сервиса мы зададим промпт для создания лендинга отеля.

Шаг 3. Создание сайта

BOLT считывает все ваши требования и на их основе пошагово генерирует код веб-сайта. Справа вы можете наблюдать за процессом создания кода, а слева – увидеть структуру файлов и папок проекта.

Также вы можете наблюдать, как постепенно формируется дизайн будущего сайта. Для этого нужно перейти на вкладку «Preview».

Шаг 4. Предварительный просмотр

Вуаля – сайт готов! ИИ-ассистент создал его буквально за несколько минут.

Теперь вы можете проверить, как сайт выглядит на разных устройствах, в частности на ПК и смартфонах. Для этого нажмите на иконку с названием «Responsive mode».

После нажатия перед вами появится окно предварительного просмотра сайта. Вы можете переключаться между типами устройств с помощью той же кнопки «Responsive mode».

Шаг 5. Развёртывание сайта

Чтобы развернуть веб-сайт, нажмите на кнопку «Deploy» в правом верхнем углу рабочего поля.

После завершения развёртывания система предоставит ссылку на сгенерированный лендинг.

Нажмите на эту ссылку – в новой вкладке откроется сгенерированный сайт. Здесь можно просмотреть его содержимое и проверить работу всех кнопок.

Шаг 6. Перенос сайта на хостинг

Чтобы разместить сгенерированный ИИ лендинг на хостинге, сначала нужно скачать архив с его файлами с платформы BOLT. Для этого перейдите на вкладку «Export» и нажмите «Download».

Загрузить архив в директорию сайта можно несколькими способами. Мы покажем, как сделать это с помощью файлового менеджера. После входа в Личный кабинет нажмите кнопку «Войти в cPanel» рядом с услугой хостинга.

В разделе «Файлы» нажмите на «Диспетчер файлов».

После этого откроется файловая система cPanel – проще говоря, домашний каталог пользователя. Здесь нужно выбрать корневой каталог вашего сайта и нажать кнопку «Загрузить».

В открывшемся окне нажмите «Select file» и выберите архив на вашем компьютере. Также можно просто перетащить файл в это поле.

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

Перед вами появится окно, в котором нужно выбрать домен. Выбранный домен будет основным для размещения лендинга, в нашем примере это – «boltnew.arsenratusnak.pp.ua». Далее нажмите «Extract Files».

После распаковки перейдите в созданную директорию «project».

Затем нажмите «dist».

Dist – это ключевая директория, содержимое которой нужно перенести в корневую директорию вашего сайта. Для этого нажмите «Выбрать всё», а затем – «Копировать».

В окне копирования скорректируйте путь, куда будут скопированы элементы директории «dist». Для этого из адресной строки удалите «project/dist» и нажмите «Copy Files».

После этого в корневой директории сайта появятся все необходимые файлы.

На этом всё! Чтобы проверить результат, вставьте домен вашего сайта в адресную строку браузера. В нашем случае это субдомен «boltnew.arsenratusnak.pp.ua». Если все действия выполнены правильно, сайт откроется, и все его элементы будут отображаться корректно.

Если какой-либо из шагов остался непонятным, обращайтесь в нашу техподдержку. Мы работаем круглосуточно и всегда готовы помочь.

Также рекомендуем посмотреть видеоинструкцию, чтобы увидеть наглядный пример создания сайта на BOLT NEW.