Как сделать сайт бесплатно без знания кода и конструкторов с помощью ИИ

Чтобы запустить сайт в 2026 году, не обязательно платить за конструкторы или изучать синтаксис HTML. Если у вас есть контент и доступ к нейросети, вы можете самостоятельно создать одностраничный сайт за один или пару вечеров. Технический бэкграунд необязателен — достаточно уметь чётко формулировать задачи для нейросети и следовать её подсказкам в чате. В статье разберём путь от чистого листа до готового сайта на примере сайта-портфолио. 

Подготовка: что нужно сделать до работы с нейросетью

На этом этапе важно собрать весь контент, чтобы в процессе общения с ИИ было понимание и примерное видение результата.

Подготовьте структуру страниц. Чтобы сделать правильную структуру, представьте свой сайт как путь пользователя. Для простого портфолио достаточно одной страницы (лендинга). Базовые блоки для страницы:

• Hero-секция. Большой заголовок, фото или тематическая иллюстрация и кнопка призыва к действию.
• Раздел «Обо мне». Описание опыта и ключевых навыков в формате списка или инфографики.
• Проекты. Те самые 3–5 кейсов в виде карточек.
• Контакты. Ссылки на мессенджеры и почту.

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

❌ Не очень: «Пишу тексты на заказ быстро и качественно».

✅ Лучше: «Создаю коммерческие тексты, которые снижают стоимость привлечения лида (CPL). Специализируюсь на сложных нишах: IT, финтехе и производстве».

ИИ поможет написать текст, но определить стиль и позиционирование придётся самостоятельно. Если попросить нейросеть «сделать красиво», на выходе получится стандартный шаблон. В 2026 году люди мгновенно считывают нейросетевой глянец и перестают доверять написанному. Без вашего авторского голоса и конкретики сайт превращается в «белый шум»: клиент пролистает его за секунду, так и не поняв, чем вы отличаетесь от сотен других специалистов.

Соберите кейсы и портфолио. Перечислять все проекты не лучшая идея — стоит сосредоточиться на самых сильных примерах. Для портфолио достаточно 4–6 экспертных кейса, упакованных по единому сценарию. Например, по методу STAR:

• S — Situation. С чем пришёл клиент? Например, «Магазин мебели не получал заявок из соцсетей».
• T — Task. Какая стояла цель? «Привлечь 50 заявок на расчёт кухни».
• A — Action. Что конкретно сделано? «Разработал серию прогревающих постов и настроил лид-форму».
• R — Result. Цифры и факты на языке бизнеса. Например, «Получено 74 заявки по 320 рублей, 12 продаж в первый месяц».

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

Создайте папку с медиа. Заранее подберите визуальные ассеты в отдельную папку images. Имена файлов лучше сразу писать латиницей, например, my-photo.jpg, чтобы было проще прописать пути в коде. Вам потребуются:

• Ваше фото. Портрет в хорошем качестве на нейтральном фоне.
• Обложки для кейсов. Это могут быть 3–5 скриншотов или авторских коллажей. Рекомендуемый размер 1200x800px.
• Favicon. Маленькая иконка для вкладки браузера формата .png или .ico, 32x32px.
• Open Graph изображение. Картинка, которая будет отображаться при репосте ссылки на ваш сайт в Telegram или соцсетях.

Картинки в папке images должны называться точно так же, как в коде. Регистр имеет значение: Photo.jpg и photo.jpg на GitHub — это разные файлы. 

Выбор ИИ

Конструкторы сайтов перегружены лишним кодом, который замедляет сайт, и привязывают вас к ежемесячной оплате. У сайта, написанного на чистом коде, сгенерированном ИИ, есть ряд преимуществ:

1. Быстродействие. Как правило, ИИ пишет оптимизированный код и не содержит избыточные JS-библиотеки, скрипты админ-панели и визуального редактора, лишние шрифты и наборы иконок. Поэтому страницы сайта загружаются быстро.
2. Отсутствие платы за использование. В конструкторах нужно платить за платформу, в бесплатных CMS — за доработки кода или платные плагины, расширяющие функциональность админ-панели. В сайте, написанном с помощью ИИ, всё бесплатно.
3. Кастомность. Сайт на конструкторе или бесплатной CMS всегда выглядит шаблонно из-за ограничений готовых блоков. ИИ позволяет получить практически любой функционал без плагинов и дорогих тарифов.

С написанием кода справится практически любая нейросеть. В этом гайде рассмотрим пример сайта от Gemini — она хорошо понимает визуал. Gemini можно отправить скриншот понравившегося сайта в качестве референса, и она довольно точно переведёт визуал в код. 

Как правильно писать промты, чтобы ИИ вас понимал. Правильный промпт — это 90% успеха. В 2026 году нейросети стали умнее, но они по-прежнему ценят структуру и контекст. Чтобы нейросеть выдала качественный результат с первого раза, забудьте о коротких фразах. Представьте, что вы ставите задачу начинающему разработчику.

1. Давайте роль. Начинайте промпт с фразы: «Действуй как опытный фронтенд-разработчик, специализирующийся на Tailwind CSS и минималистичном дизайне». Это заставляет модель использовать более чистые и современные методы написания кода.
2. Один блок — один чат или этап. Не просите всё сразу. Сначала: «Напиши код для навигации и Hero-секции». Проверьте результат. Затем: «Добавь под Hero-секцию блок с сеткой кейсов». Так ИИ не запутается в закрывающих тегах </div>.
3. Описывайте поведение, а не только вид. Вместо «сделай кнопку синей» пишите: «Сделай кнопку синей (#2563eb), которая плавно осветляется при наведении и имеет небольшую тень». ИИ сам пропишет нужные классы hover: и transition.
4. Запрещайте «самодеятельность». Если вам нужен строгий дизайн, напишите в конце промпта: «Не добавляй никаких лишних элементов, скриптов или стилей, о которых я не просил. Используй только стандартные классы Tailwind».

Создание сайта с помощью ИИ

Создание Boilerplate — каркаса сайта

Самая частая ошибка — сделать всё за один промт. В этом случае ИИ выдаст примитивную страницу, в которой нет адаптивности, блоки слипаются, а в дизайне использованы базовые шрифты и стандартный белый фон. С ИИ лучше работать поэтапно и дробить большие задачи на подзадачи и краткие команды-инструкции. 

Начинаем с базы: просим ИИ создать фундамент на Tailwind CSS. Это индустриальный стандарт современной вёрстки и быстрого прототипирования, который подключает стили через одну строчку кода (CDN), не создавая отдельных файлов. Такой сайт будет выглядеть дорого без написания сотен строк стилей.

Первый промт — задаёт контекст, а не ставит задачу. Если нет чёткого видения структуры или дизайна будущего сайта, можно спросить совета у нейросети. Она проанализирует аналогичные ресурсы и поможет составить карту сайта, порекомендует варианты визуала. 

Работа с ИИ напоминает строительство дома: нельзя клеить обои, пока не залит фундамент и не возведены стены. Двигайтесь по методу трёх шагов, чтобы нейросеть выдавала максимально корректный результат. В таком случае сценарий общения с ИИ будет выглядеть так: 

1. Промт-контекст.
2. Промт-фундамент.
3. Промт для точной корректировки.

Промт-контекст. Не заставляйте ИИ гадать. Поставьте ему задачу и обозначьте рамки, в которых её нужно выполнить. Это сэкономит вам 2-3 часа на исправление правок в будущем.

По промту для сайта-портфолио копирайтера нейросеть предложила такую структуру:

• Header. Фиксированное меню, пункты: главная, кейсы, опыт, отзывы, контакты.
• Hero-блок. Справа — фото, слева — заголовок, краткое описание и 2 кнопки «Написать на почту» и «Смотреть кейсы».
• Избранные кейсы. Превью из 9 самых сильных работ.
• Отзывы. Карточки с круглыми фото клиентов.
• Опыт. История работы по годам в минималистичном стиле.
• Этапы работы. Иконочный блок (Брифинг -> Анализ -> Текст -> Дистрибуция).
• Сертификаты. Галерея изображений.
• Партнёры. Сетка логотипов в стиле grayscale.
• Footer. Почта, иконки соцсетей, дубль меню.

Промт-фундамент. Когда рамки обозначены, сверяемся с ответом ИИ и просим создать черновик или набросок по задаче. Копируем структуру и требования по стилю в новый запрос и даём нейросети команду написать код с учётом вашего ТЗ.

Промт-корректировка. Теперь, когда база готова, можно просить ИИ генерировать блоки по очереди. 

1. Hero-секция (главный экран).
2. Сетка кейсов.
3. Контакты и подвал.

Если что-то непонятно, можно спрашивать у Gemini, как это работает или для чего это нужно. Также в промте-корректировке можно попросить ИИ оценить результат работы и спросить, что можно улучшить.

После разработки всех блоков для страницы сайта ИИ выдаст готовый код, который нужно сохранить в текстовый файл и назвать его index.html. 

Просмотр прототипа index.html на компьютере

Index.html — это физическая страница, которая размещается на хостинге и загружается браузером, как только пользователь переходит на сайт. Чтобы посмотреть, как выглядит код, созданный ИИ, можно открыть index.html локально — на своём компьютере. 

Вот как это сделать:

1. Создаём текстовый документ или открываем стандартное приложение Блокнот.
2. В редактор вставляем код, нажимаем в меню Файл и выбираем пункт Сохранить как.
3. В поле Имя файла пишем index.html.
4. В поле Тип файла выбираем Все файлы.

Когда файл сохранён, у него должна появиться иконка браузера, который используется по умолчанию (Chrome, Yandex). Чтобы его открыть, можно дважды кликнуть по файлу или вызвать правой кнопкой мыши контекстное меню, выбрать пункт на файл «Открыть с помощью» и указать нужный браузер.

Проверка ошибок и оптимизация

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

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

Кроме общих рекомендаций ИИ указал конкретные участки кода, которые можно улучшить. Например:

1. Так как шапка фиксированная (fixed), при клике по якорям заголовки секций будут «залезать» под шапку. Добавьте в CSS (в тег <style>) это свойство, чтобы заголовки секций не проваливались под меню, а открывались ровно под ним с комфортным отступом:

CSS

section {
    scroll-margin-top: 80px; /* Высота вашей шапки */
}

2. Замените некорректный цвет:

HTML

<h2 class="text-3xl font-bold mb-4 text-black-600">Как строится процесс</h2>
<h2 class="text-3xl font-bold mb-4 text-slate-900">Как строится процесс</h2>

С этими рекомендациями возвращаемся в первый чат, вставляем в промт исправленные куски кода и просим нейросеть отредактировать нужный блок. Небольшие изменения можно вносить в файл с кодом и вручную.

Вёрстка и UX/UI-доработка 

На этом этапе уже есть прототип сайта, но он нуждается в доработке: где-то нужно добавить кнопку, а где-то — убрать лишние карточки. Для каждого изменения пишем отдельный промт и просим внести правки только в соответствующую часть кода или меняем её вручную. Если поставить нейросети глобальную задачу по исправлениям в коде, она может по своему усмотрению заменить и другие части, которые не нужно было редактировать.

В первоначальной версии нашего сайта-портфолио блок с кейсами включал 9 карточек с картинкой, тегом и заголовком. Блок представляет собой обычную галерею изображений с подписями — в карточках не хватает кнопок и места под описания.

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

Таким образом редактируются все блоки поэтапно. Если нужно исключить самодеятельность ИИ, то в каждом промте так и уточняем: «Не добавляй правки от себя».

Наполнение контентом

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

Если во время загрузки контента возникли проблемы с вёрсткой, то достаточно скопировать проблемный кусок кода и попросить нейросеть выровнять объекты в блоке, чтобы всё поместилось.

Картинки загружаются немного иначе, чем текстовый контент. Изначально нейросеть ставит в коде ссылки на временные картинки, например, https://placehold.co/800x800. Ссылки в тегах <img> нужно заменить на свои из папки images, которую подготовили заранее ещё на первом этапе. Например:

• Было: <img src="https://placehold.co/800x800">
• Стало: <img src="images/case-1.jpg">

В конце не забываем настроить header и footer: назначить кнопки навигации, повесить ссылки на значки соцсетей и указать свои контакты.

Внедрение интерактива и функциональности 

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

Например, со временем блок с отзывами будет пополняться и большинство карточек будут скрыты. Чтобы пользователь мог скроллить отзывы, нужно добавить слайдер.  

Чтобы подключить интерактивный слайдер, нейросеть сама изучила код и внедрила три правки в нужных местах:

• HTML: внутри блока .testimonialSwiper добавлены пустые контейнеры для кнопок swiper-button-prev и swiper-button-next.
• CSS: добавлены правила для кастомизации стрелок (сделал их белыми кругами с синими иконками), чтобы они вписались в общую стилистику.
• JavaScript: в инициализацию слайдера добавлен объект navigation, который связывает JS-логику с новыми кнопками.

В 2026 году для анимации слайдеров код с нуля не создаётся — это долго и чревато багами. Вместо этого используются библиотеки — готовые наборы инструментов, которые уже умеют правильно крутить картинки, реагировать на свайпы пальцем и плавно переключать отзывы. 

Gemini сама добавила в код скрипт, вызывающий готовую библиотеку Swiper.js. Она берёт на себя самую сложную часть — расчёты и анимацию, чтобы не пришлось прописывать сотни строк кода вручную. 

Где разместить сайт бесплатно

Когда код готов и сохранён в файл index.html, остаётся разместить сам сайт в интернете. Сайты-одностраничники обычно не предполагают регулярное обновление, поэтому в качестве бесплатного хостинга можно выбрать GitHub Pages.

Пошаговая инструкция по запуску:

1. Регистрация. Зайдите на GitHub и создайте аккаунт. 

2. Создание репозитория. Нажмите кнопку «New», чтобы создать репозиторий. Название можно дать любое, например, my-portfolio. Важно: сделайте его публичным, поставив отметку «Public», иначе бесплатный хостинг не заработает.

3. Загрузка файлов. Нажмите uploading an existing file и просто перетащите свой файл index.html и папку images в окно браузера. Затем нажмите Commit changes, чтобы сохранить файлы.
4. Активация сайта. Перейдите в раздел Settings (Настройки) вашего репозитория → слева в меню вкладка Pages. В разделе Branch выберите main и нажмите Save.

Через пару минут ваш сайт будет доступен по техническому адресу: ваш-логин.github.io/название-репозитория/.Это адрес вашего портфолио на домене третьего уровня с бесплатным хостингом от GitHub.

Когда бесплатный хостинг не подойдёт

Бесплатного хостинга достаточно для небольшого статического портфолио, запуска проектов и тестирования гипотез. Но у каждого такого решения есть свои технические ограничения. Например, некоторые хостинги устанавливают ограничения по трафику — все посещения свыше лимита придётся оплачивать отдельно. Ещё один важный минус — отсутствие серверной части (backend). Это значит, что на бесплатном хостинге не получится:

• Сделать форму обратной связи, которая сохраняет данные в базу без задействования внешних сервисов, организовать личные кабинеты для клиентов.
• Превратить портфолио в популярный сайт с возможностью регистрации и обновляемым блогом.
• Установить WordPress или другие популярные движки сайтов (CMS).
• Эффективно продвигать сайт в поиске. Для SEO наличие домена второго уровня и быстрого хостинга будет ощутимым преимуществом.

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

В FirstVDS есть готовые тарифы виртуальных серверов, которые позволяют запустить сервер за несколько минут, а управлять им можно через панель ispmanager — специальных знаний для этого не потребуется. Подробную инструкцию по размещению сайта можно посмотреть здесь. 

Что дальше: поддержка и масштабирование

Ваш сайт запущен и работает. Но на этом работа не заканчивается — портфолио важно сохранять актуальным.

Как вносить правки с помощью ИИ. Главное преимущество метода — не нужно обращаться к разработчику для каждой мелкой правки.

1. Добавление нового кейса. Скопируйте блок кода существующего проекта, вставьте его в чат с Gemini и напишите: «Вот код моей карточки проекта. Сделай на его основе новую, заменив текст и картинку на эти данные: [ваши новые данные]».
2. Редизайн. Захотели сменить шрифт или цвета? Снова к ИИ: «Вот мой файл index.html. Сделай основной акцентный цвет золотым вместо синего и поменяй шрифт заголовков на более современный».
3. Обновление. Просто замените старый файл index.html новым в вашем репозитории на GitHub, если сайт остался на бесплатном DNS-хостинге. Сайт обновится автоматически в течение пары минут.

Как отслеживать посещаемость. Если вы хотите знать, сколько потенциальных клиентов заходило на сайт и по каким кнопкам они кликали, добавьте скрипт аналитики.

1. Создайте счётчик в Яндекс.Метрике или Google Analytics.
2. Скопируйте полученный код.
3. Попросите ИИ: «Вставь этот код аналитики [вставьте ваш код] перед закрывающим тегом </head> в моём index.html».

Теперь у вас будет полноценная статистика посещений, как на коммерческом ресурсе.

Что стоит запомнить

Уделите внимание контенту. Прежде чем открывать чат с ИИ, соберите свои лучшие кейсы по формуле «Задача — Решение — Результат». Нейросеть сделает красивую обёртку, но смыслы должны быть вашими — только в этом случае они смогут вызвать доверие.

Делите задачи на подзадачи. Главное правило при общении с ИИ — поэтапные промты. Попросите сначала сделать каркас сайта, затем наполнение блоков, в конце — дизайн и анимации.

Задумайтесь о покупке домена. Сайт с полноценным доменом смотрится солиднее и даёт ряд преимуществ для дальнейшего апгрейда. 

Сайт — это живой проект. Не забрасывайте своё портфолио, даже если это статичный сайт. С помощью ИИ можно отредактировать или добавить контент за 5 минут: просто просите нейросеть переписать блок кода под новый кейс и загружайте файл обратно на GitHub или арендованный сервер.