Как сделать сайт с ChatGPT: три способа, которые работают

Чтобы сделать сайт с ChatGPT, можно попросить его написать HTML и CSS сайта, а затем разместить файлы на хостинге самостоятельно. Можно использовать ChatGPT для плана страниц и текстов, а сам сайт собрать в конструкторе. Можно также подключить AI-конструктор, например Mythex, прямо в ChatGPT, чтобы он собрал, разместил и опубликовал сайт из того же чата. Первый способ бесплатный и подходит для одностраничного сайта; третий нужен, когда сайту требуются формы, которые сохраняют данные, входы или регулярные обновления. В этом руководстве показан каждый способ с промптами и сказано, где он перестает работать.

Что ChatGPT умеет и чего не умеет сам по себе

ChatGPT очень хорошо пишет: код, заголовки, тексты для страниц и планы. По умолчанию это не хостинг. Он не даёт сайту публичный адрес, не запускает базу данных и не сохраняет файлы сайта между проектами так, как это делает конструктор. Каждый способ ниже — это свой ответ на этот пробел.

Способ 1: ChatGPT пишет код, хостинг размещает его у вас

Это классический подход, он хорошо работает для простого статического сайта: портфолио, лендинга, страницы для свадьбы.

Шаг 1: Попросите одну полную страницу в одном файле

Будьте конкретны в содержании и макете:

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

Один файл упрощает сохранение и загрузку.

Шаг 2: Сохраните и откройте

Скопируйте код в текстовый редактор, сохраните как index.html и откройте в браузере. Если что-то выглядит не так, опишите это ChatGPT: «сетка изображений на десктопе в одну колонку; сделай три колонки от 900 пикселей в ширину».

Шаг 3: Замените заглушки

Замените изображения-заглушки своими и исправьте любой текст, который придумал ChatGPT. Внимательно проверьте цены, адреса и имена: ИИ уверенно заполняет пробелы выдуманным.

Шаг 4: Опубликуйте

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

Где заканчивается способ 1

• Формы, которые сохраняют данные. Контактной форме нужно куда-то отправлять заявки. Понадобится сервис форм или сервер.
• Входы и личные кабинеты. Им нужны бэкенд и база данных.
• Много страниц. Поддерживать одинаковую шапку и меню в десяти вручную вставленных файлах утомительно.
• Обновления. Каждое изменение означает новый запрос кода, вставку и повторную загрузку.

Способ 2: ChatGPT планирует, конструктор строит

Здесь ChatGPT занимается мыслями и текстами, а конструктор собирает и размещает сайт.

Шаг 1: Спланируйте сайт с ChatGPT

У меня небольшая семейная пекарня в Манчестере, которая принимает заказы на торты. Предложи страницы, которые нужны моему сайту, что должно быть на каждой и одно действие, которое я хочу, чтобы посетитель совершил на каждой странице. Не больше пяти страниц.

Шаг 2: Напишите тексты

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

Шаг 3: Соберите в конструкторе

Вставьте план и тексты в конструктор сайтов. В конструкторе с перетаскиванием вы размещаете текст в шаблоне. В AI-конструкторе можно передать весь план одним сообщением, и он соберёт страницы; например, в конструкторе сайтов Mythex:

Собери сайт для семейной пекарни в Манчестере по этому плану и тексту: [вставьте]. Добавь форму заявки на заказ, которая сохраняет каждую заявку (имя, телефон, тип торта, нужная дата, сообщение), чтобы я мог видеть их на странице администратора, куда войду только я. Тёплый, домашний дизайн, удобно на телефонах.

Форма заказа здесь сохраняет данные в настоящую базу данных, чего не умеет вставленный HTML-файл. Подробнее об этом пути читайте в статье как сделать сайт с ИИ.

Способ 3: создайте и опубликуйте прямо из ChatGPT

Новый вариант — подключить конструктор к ChatGPT, чтобы ChatGPT мог напрямую использовать его инструменты. Вы остаётесь в диалоге с ChatGPT; конструктор предоставляет проект, превью, базу данных и хостинг.

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

Используя Mythex, создай новый сайт для моей пекарни с главной страницей, страницей меню с тортами и ценами и формой заявки на заказ, которая сохраняет данные в базу. Покажи мне превью, а когда я скажу, что всё хорошо, опубликуй.

ChatGPT создаст проект, напишет код, запустит его и опубликует по публичному адресу, когда вы одобрите. Изменения — это просто новые сообщения в том же чате. Такой же подход к коннекторам работает и из Claude, Cursor и Codex. Чтобы узнать, как это устроено и какие конструкторы это поддерживают, см. AI-конструкторы приложений с MCP.

Какой способ выбрать?

Советы по промптам, которые подходят для любого способа

• Сразу давайте реальные факты. Имя, город, услуги, цены, контакты. Меньше выдуманных деталей — меньше ручной правки.
• Опишите посетителя и цель. «Родитель, который ищет торт ко дню рождения и должен отправить заявку на заказ».
• Просите макет, в первую очередь для телефона. Большинство посетителей заходят с телефонов.
• Меняйте одно за раз, когда первая версия готова.
• Явно просите базовые вещи SEO: уникальный заголовок и описание для каждой страницы, настоящие заголовки, альтернативный текст у изображений. См. SEO для сайтов, созданных ИИ.

В нашем руководстве как писать промпты для AI-конструкторов приложений больше примеров.

Частые проблемы и решения

• Дизайн выглядит шаблонно. Дайте ориентир: «как спокойное скандинавское кафе, много белого и один приглушенный зелёный».
• Код обрезался. Попросите ChatGPT продолжить с последней строки или разбить страницу на разделы и выдавать по одному.
• Он придумал отзывы или статистику. Удалите их. Фейковые отзывы подрывают доверие, а во многих странах они нарушают законы о защите потребителей.
• Сайт ломается после изменения. Сохраняйте копию последней рабочей версии перед вставкой нового кода. Конструкторы вроде Mythex хранят точки восстановления, чтобы можно было откатиться.

Перед публикацией

Прочитайте каждое слово на каждой странице. Проверьте, что контакты работают. Откройте сайт на телефоне. Убедитесь, что изображения ваши или лицензированы должным образом. Затем опубликуйте и поделитесь сайтом там, где уже находятся ваши посетители. Если хотите, чтобы всё это стоило ноль рублей, в руководстве как сделать сайт бесплатно подробнее описаны бесплатные варианты хостинга.

Вопросы