Як створити сайт на 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.