Як опублікувати сайт, створений за допомогою 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 за допомогою рядків Електронна пошта і Пароль.
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 на сторінці Domains натисніть Add domain, введіть домен із https, збережіть і натисніть Redeploy. Сертифікат випускається автоматично. Запис A пояснює наша стаття про домен.

Як пізніше оновити сайт?

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

Чи потрібна мені база даних?

Для простого сайту HTML ні. Щоб зберігати дані відвідувачів, можна створити PostgreSQL у Coolify на тому самому сервері, але для її використання потрібен ще й серверний код. На цьому етапі переходьте до нашого посібника з розгортання застосунків.

Готове до роботи в Seturack: Next.js, Coolify.