Как опубликовать сайт, сделанный в ChatGPT или Claude

Чтобы опубликовать сайт, который для вас написал ChatGPT или Claude, сохраните код в файл index.html, загрузите его на GitHub, затем выберите репозиторий в панели Coolify на своём сервере и разверните. Сайт окажется по публичному адресу HTTPS, и вы сможете подключить свой домен, если он у вас есть. Это руководство рассчитано на тех, кто делает это впервые, и проводит через все этапы с нуля.

Сначала проверьте, что у вас есть. Сайт, написанный в чате, обычно один файл HTML, который не нужно собирать, и именно о нём это руководство. Если в ответе упоминаются npm install, package.json или Next.js, у вас приложение, и вам лучше в наше руководство по инструментам для кода.

1. Попросите один файл

Отправьте в чат это, чтобы не возиться с несколькими файлами:

Give me this site as one index.html file. Keep the CSS and JavaScript inside that file. If you use images, tell me their file names.

2. Сохраните файл на компьютере

• ChatGPT: код обычно приходит в блоке кода в чате, поэтому скопируйте блок. Если видите кнопку скачивания, можно воспользоваться ею.
• Claude: сайт часто открывается как артефакт рядом с чатом. Документация Anthropic описывает элементы вверху артефакта для просмотра, копирования и скачивания кода. У дизайнов, созданных из шаблона, есть Export, который выдаёт отдельный HTML или .zip.

Если вы скопировали код, вставьте его в текстовый редактор и сохраните как index.html. В Блокноте Windows выберите тип файла «Все файлы», иначе имя заканчивается на .txt. В TextEdit на Mac сначала переключитесь на простой текст. Дважды щёлкните файл, и сайт должен открыться в браузере. Изображения положите в ту же папку.

3. Загрузите файлы на GitHub

Сервер забирает ваш сайт из репозитория на GitHub, который работает как папка для ваших файлов.

1. Создайте аккаунт GitHub. Вверху справа выберите New repository.
2. Дайте короткое имя, выберите видимость Public, включите Add README и нажмите Create repository.
3. Над списком файлов откройте меню Add file, выберите Upload files, перетащите index.html и изображения и нажмите Commit changes.

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

4. Закажите сервер

Закажите на странице Next.js VPS или странице Coolify VPS. В оба варианта входит панель развёртывания Coolify. У простого сайта на HTML нет этапа сборки, поэтому ему не нужно столько памяти, сколько Next.js, и на странице Coolify можно выбрать размер поменьше. После оплаты откройте сервер в разделе Мои серверы своей панели Seturack и дождитесь, пока в строке Приложение на вкладке Обзор не появится сообщение, что он готов.

5. Разверните из панели

1. На вкладке Обзор откройте ссылку Адрес панели и войдите в Coolify с данными из строк Email и Пароль.
2. На странице Projects откройте My first project и production, затем нажмите New resource.
3. Выберите Public Git Repository, введите адрес репозитория GitHub и нажмите Check repository.
4. В поле Build pack выберите Static, оставьте Base Directory равным / и нажмите Continue. Этот вариант публикует файлы как есть, без сборки.
5. Нажмите Deploy. Когда закончится, откройте адрес HTTPS на странице Domains.

Вот и всё, ваш сайт работает. Доступ root у вас есть, и при желании всем можно управлять из панели.

Всё это может сделать инструмент для кода

Если вы собираетесь часто менять сайт, жизнь облегчит инструмент для кода вроде Claude Code или Cursor. Откройте в нём папку с index.html, скопируйте строку Вставьте в свой ИИ-инструмент из панели Seturack и вставьте её. Инструмент создаст репозиторий, развернёт сайт и выдаст адрес. Подробности в нашем руководстве по инструментам для кода. Окна чата ChatGPT и Claude не могут отправлять команды на сервер, поэтому не вставляйте этот текст туда.

Четыре вещи, которые стоит знать

• Формы: контактная форма на простом HTML сама не отправляет почту. Чтобы получать сообщения, её нужно подключить к сервису форм или к серверному коду.
• Аккаунты и платежи: вход, хранимые записи и платежи требуют серверного кода и базы данных. На этом этапе ваш сайт становится приложением.
• Имена файлов: сервер различает заглавные и строчные буквы. Если в коде написано logo.png, а файл называется Logo.PNG, изображение не отобразится.
• Бэкапы: ежедневные бэкапы входят в цену, а основная копия вашего сайта остаётся на GitHub.

Частые вопросы

Сколько RAM нужно простому сайту на HTML?

Без сборки сам сайт требует очень мало, поэтому нижнюю планку задаёт Coolify. Его документация требует минимум 2 ядра и 2 ГБ RAM. Вариант Next.js рекомендует больше из-за сборок: минимум 4 ГБ RAM, 2 vCore и 40 ГБ диска.

Сколько это стоит в месяц?

Рекомендуемый минимум для варианта Next.js стоит около $6 в месяц (включая НДС), а за пределами Турции вы платите в долларах США. Размеры поменьше вы найдёте на странице цен. Ежедневные бэкапы входят в цену, а трафик безлимитный. Домен оплачивается отдельно, и покупаете вы его в другом месте.

Как подключить собственный домен?

Направьте A-запись на IP-адрес сервера у своего поставщика домена. В Coolify нажмите Add domain на странице Domains, введите свой домен с https, сохраните и нажмите Redeploy. Сертификат выдаётся автоматически. A-запись объясняет наша статья о домене.

Как позже обновить сайт?

Попросите ChatGPT или Claude внести изменение, загрузите новый index.html на GitHub под тем же именем и нажмите Redeploy в Coolify. Чтобы публиковать при каждой загрузке, добавьте на GitHub адрес со страницы Webhooks приложения, как объясняет наше руководство по Next.js.

Нужна ли мне база данных?

Для простого сайта на HTML нет. Чтобы хранить данные посетителей, можно создать PostgreSQL в Coolify на том же сервере, но для работы с ней понадобится и серверный код. На этом этапе переходите к нашему руководству по развёртыванию приложений.

Готовое решение на Seturack: Next.js, Coolify.