Создать простой сайт сегодня можно даже без опыта программирования. Для этого достаточно выбрать домен и хостинг, описать задачу ИИ, получить готовый код, а затем разместить его на сервере.
В этой статье покажем на практике, как создать простой одностраничный сайт с помощью ChatGPT всего за несколько минут и загрузить его на белорусский хостинг HB.BY.
Шаг 1. Выбираем домен и хостинг
Если вы ещё не определились с названием своего сайта, важно правильно выбрать доменное имя. Оно должно чётко отражать тематику, быть коротким и запоминающимся, легко воспроизводимым и понятным на слух. Для белорусской аудитории лучше выбирать доменные зоны .BY или .БЕЛ.
И самое главное — прежде чем подать заявку на регистрацию, необходимо проверить, доступен ли данный домен. Для этого введите желаемое доменное имя в строку поиска и нажмите «Подобрать домен»:
Домен в зоне .BY/.БЕЛ стоит всего 36,60 BYN в год. Если нужное вам имя свободно, нажмите «В корзину» → «Перейти в заказ». На следующем этапе можно будет выбрать тариф хостинга. Для простого одностраничного сайта подойдёт «Unix Старт» — от 6,10 BYN в месяц. Можно добавить и другие опции, активировав чекбоксы рядом с ними — почта, конструктор сайта, SSL-сертификат и бесплатный приём платежей.
Заполните форму, выберите способ оплаты и ожидайте подтверждения заказа.
Чтобы добавить ваш домен в панель управления хостингом ISPmanager, воспользуйтесь нашей инструкцией в Базе знаний. Если домен уже создан, но ещё не привязан к хостингу, настройте DNS в личном кабинете.
Шаг 2. Создаём сайт с помощью ИИ
Теперь, когда у нас есть доменное имя и хостинг, попробуем создать самостоятельно простой одностраничный сайт вымышленной кофейни.
Вы можете использовать любой доступный вам ИИ: Claude, Gemini, Qwen, DeepSeek и т.п. В этой статье мы воспользуемся ChatGPT.
Результат во многом зависит от того, насколько подробно вы опишете свою задачу. Можно написать просто: «Создай одностраничный сайт кофейни». Но в этом случае результат, скорее всего, придётся дополнительно дорабатывать.
Лучше сразу определиться, каким вы хотите видеть сайт. Заранее продумайте:
- цветовую палитру;
- какие блоки должны быть на странице;
- какую информацию нужно разместить.
Пример готового промпта:
Создай одностраничный сайт для небольшой кофейни «Кофейно». Весь код размести в одном файле index.html.
На странице должны быть:
- шапка с названием кофейни и навигацией;
- заголовок и описание;
- блок «О нас»;
- меню с напитками (эспрессо, латте, капучино, раф и т.п.);
- блок «Почему мы»;
- блок «Мы в соцсетях» с иконками популярных соцсетей и мессенджеров и ссылками на них (если у вас уже есть аккаунты, укажите ссылки в промпте).
Сделай дизайн современным, в тёплых шоколадно-бежевых тонах, аккуратным и адаптивным для компьютеров и мобильных устройств.
Многие нейросети позволяют просматривать результат в отдельном окне. Если такой возможности у вас нет, скачайте файл index.html и откройте его в браузере. При необходимости результат можно доработать:
Если вы хотите добавить собственные фотографии, их можно загрузить на сервер и указать ссылки на них в промпте для ИИ.
Для этого войдите в панель управления ISPmanager и перейдите в раздел «Менеджер файлов»:
Откройте папку /www:
Перейдите в каталог с названием вашего домена:
Нажмите «Загрузить»:
Выберите «Файл с локального компьютера», нажмите «Выбрать файл». В открывшемся окне выделите нужное изображение и нажмите «Открыть», а затем «Загрузить»:
Теперь вы можете дать ссылку на это изображение ИИ, например: site.by/logo.png.
Шаг 3. Загружаем HTML-код на хостинг
В примере мы будем использовать домен, который уже добавлен в ISPmanager и привязан к хостингу.
В разделе «Менеджер файлов» панели управления ISPmanager откройте папку /www и перейдите в каталог с названием вашего домена.
Откройте файл index.html. Если его нет, нажмите «Создать», выберите «Файл» и введите в поле «Имя»: index.html.
Затем откройте index.html, сгенерированный ИИ, в любом текстовом редакторе, например «Блокноте». Скопируйте весь код из него.
Вставьте код в файл index.html в панели управления (если файл не пустой, замените код в нём на новый). Нажмите «Сохранить и закрыть»:
Важно! При генерации кода не передавайте свои пароли в чат с нейросетью.
Шаг 4. Проверяем сайт
Откройте сайт в браузере и убедитесь, что страница отображается корректно:
Проверьте также, как открывается сайт на мобильном устройстве. Убедитесь, что страница адаптируется под размер экрана:
На этом простой одностраничный сайт готов: он размещён на хостинге, открывается по доменному имени и адаптируется под мобильные устройства.