Як створити сайт з ChatGPT: три способи, які працюють

Щоб зробити сайт з ChatGPT, можна попросити його написати HTML і CSS сайту, а потім самостійно розмістити ці файли на хостингу; використати його, щоб спланувати сторінки та написати тексти перед створенням у конструкторі сайтів; або підключити ШІ-конструктор, наприклад Mythex, прямо в ChatGPT, щоб він створював, хостив і публікував сайт з того ж чату. Перший спосіб безплатний і підходить для односторінкового сайту; третій потрібен, коли сайту потрібні форми, що зберігають дані, входи або регулярні оновлення. Цей посібник показує кожен спосіб з промптами і чесно каже, де кожен із них зупиняється.

Що ChatGPT може і чого не може сам

ChatGPT дуже добре пише: код, заголовки, тексти сторінок і плани. Із коробки він не є хостинговою компанією. Він не дає вашому сайту публічної адреси, не запускає базу даних і не зберігає файли сайту між проєктами, як це робить конструктор. Кожен із способів нижче — це різна відповідь на цю прогалину.

Спосіб 1: ChatGPT пише код, ви розміщуєте його

Цей класичний підхід добре працює для простого статичного сайту: портфоліо, лендінгу, сторінки весілля.

Крок 1: Попросіть одну повну сторінку

Будьте конкретними щодо змісту і макета:

Напиши повноцінний односторінковий сайт як один HTML-файл, CSS всередині тегу style. Він для Майї Хаддад, фрилансерки-ілюстраторки з Амману. Розділи: шапка з її іменем і написом «Ілюстрації для книжок і брендів», сітка з шести портфоліо-зображень (використай шляхи-заглушки, які я зможу замінити), короткий абзац «Про мене», список із трьох послуг з початковими цінами і блок контактів з її email як посиланням mailto. Чистий сучасний дизайн, багато білого простору, працює на телефонах. Без JavaScript-фреймворків.

Просьба про один файл спрощує збереження і завантаження.

Крок 2: Збережіть і відкрийте

Скопіюйте код у текстовий редактор, збережіть як index.html і відкрийте у браузері. Якщо щось виглядає не так, опишіть ChatGPT: «сітка зображень на комп’ютері в один стовпець; зроби три колонки для екранів шире за 900 пікселів».

Крок 3: Замініть заглушки

Замініть зображення-заглушки на свої і вигадані ChatGPT тексти. Уважно перевірте ціни, email і імена: ШІ впевнено заповнює прогалини.

Крок 4: Опублікуйте

Завантажте файл на безплатний статичний хостинг, наприклад GitHub Pages, або на будь-який веб-хостинг, за який ви вже платите. Ви отримаєте публічну адресу. Щоб використати власний домен, дотримуйтеся інструкцій свого хостингу; наш посібник про підключення власного домену пояснює частину з DNS.

Де спосіб 1 зупиняється

• Форми, що зберігають дані. Форма зв’язку має кудись надсилати заявки. Потрібен сервіс форм або сервер.
• Входи і кабінети користувачів. Вони потребують бекенду і бази даних.
• Багато сторінок. Підтримувати однакові шапку й меню в десяти вручну вставлених файлах стомлююче.
• Оновлення. Кожна зміна означає новий запит коду, вставку і повторне завантаження.

Спосіб 2: ChatGPT планує, конструктор будує

Тут ChatGPT виконує думання і написання, а конструктор сайтів — створення і хостинг.

Крок 1: Спланувати сайт з ChatGPT

Я маю невелику сімейну пекарню в Манчестері, яка приймає замовлення на торти. Запропонуй сторінки, які потрібні моєму сайту, що має казати кожна сторінка і одну дію, яку я хочу, щоб відвідувач зробив на кожній сторінці. Не більше п’яти сторінок.

Крок 2: Написати тексти

Попросіть текст для кожної сторінки, а потім перепишіть його своїм голосом. Додайте реальні деталі, яких ChatGPT не може знати: години роботи, ціни, зони доставки, чим ваші торти відрізняються.

Крок 3: Створити в конструкторі

Вставте план і тексти в конструктор сайтів. У конструкторі з перетягуванням ви розміщуєте текст у шаблоні. В ШІ-конструкторі можна дати весь план одним повідомленням, і він побудує сторінки; наприклад, у конструкторі сайтів Mythex:

Побудуй сайт для сімейної пекарні в Манчестері за цим планом і текстами: [вставте]. Додай форму замовлення, яка зберігає кожну заявку (ім’я, телефон, тип торта, дата, повідомлення), щоб я міг бачити їх на адмін-сторінці, в яку увійду лише я. Теплий, домашній дизайн, працює на телефонах.

Форма замовлення тут зберігає дані в справжній базі даних, чого не може вставлений HTML-файл. Більше про цей шлях читайте в посібнику як створити сайт за допомогою ШІ.

Спосіб 3: Створити і опублікувати прямо з ChatGPT

Найновіший варіант — підключити конструктор до ChatGPT, щоб ChatGPT міг користуватися інструментами конструктора напряму. Ви лишаєтеся в розмові з ChatGPT; конструктор надає проєкт, прев’ю, базу даних і хостинг.

Mythex працює так через свій додаток для ChatGPT (MCP-конектор). Ви підключаєте його в налаштуваннях облікового запису в Mythex; підключення працює на будь-якому тарифі, а інструменти, що запускають пісочницю проєкту, потребують Pro. Після підключення можна написати ChatGPT щось на кшталт:

Використовуючи Mythex, створи новий сайт для моєї пекарні: головна сторінка, сторінка меню з тортами і цінами та форма замовлення, яка зберігає заявки в базі даних. Покажи мені прев’ю і опублікуй, коли я скажу, що все добре.

Потім ChatGPT створює проєкт, пише код, запускає його і публікує на публічній адресі, коли ви схвалюєте. Зміни — це просто нові повідомлення в тому ж чаті. Той самий підхід із конекторами працює і з Claude, Cursor і Codex. Про те, як це працює і які конструктори це підтримують, читайте в ШІ-конструкторах додатків з MCP.

Який спосіб обрати?

Поради щодо промптів, які працюють для будь-якого способу

• Давайте реальні факти одразу. Ім’я, місце, послуги, ціни, контакти. Менше вигаданих деталей означає менше прибирання.
• Опишіть відвідувача і мету. «Батько, який шукає торт на день народження і має в результаті надіслати заявку на замовлення».
• Просіть макет, спершу для телефона. Більшість відвідувачів заходять з телефонів.
• Міняйте одну річ за повідомлення, коли перша версія вже є.
• Прямо просіть базові речі SEO: унікальний заголовок і опис для кожної сторінки, справжні заголовки, alt-текст для зображень. Див. SEO для сайтів, створених ШІ.

Наш посібник як писати промпти для ШІ-конструкторів додатків містить більше патернів.

Типові проблеми і їх вирішення

• Дизайн виглядає шаблонно. Дайте приклад: «як спокійна скандинавська кав’ярня, багато білого і один приглушений зелений».
• Код обрізався. Попросіть ChatGPT продовжити з останнього рядка або поділити сторінку на розділи і давати по одному.
• Він вигадав відгуки або статистику. Видаліть їх. Фейкові відгуки руйнують довіру, а в багатьох місцях вони порушують правила захисту споживачів.
• Сайт ламається після зміни. Зберігайте копію останньої робочої версії перед вставкою нового коду. Конструктори на кшталт Mythex зберігають контрольні точки, щоб можна було відкотитися.

Перед публікацією

Прочитайте кожне слово на кожній сторінці. Перевірте, що контакти працюють. Відкрийте сайт на телефоні. Переконайтеся, що зображення ваші або мають належну ліцензію. Потім опублікуйте і поділіться там, де вже є ваші відвідувачі. Якщо хочете, щоб усе коштувало нічого, як створити сайт безплатно детально описує безплатні варіанти хостингу.

Запитання