Як створити та захостити сайт абсолютно безкоштовно

Що отримаєте в результаті

Справжній сайт в інтернеті з вашою власною адресою — наприклад, https://ваш_логін.github.io.

Спробуйте прямо тут — відредагуйте код і одразу побачите результат:

index.htmleditable — try changing something!

<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8" />
  <title>Іван Іванов — фотограф</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #0f1115;
      color: #fff;
      text-align: center;
    }
    h1 { color: #d97757; font-size: 2.5rem; margin: 0; }
    p { color: #9ca3af; max-width: 32rem; }
    a {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.6rem 1.4rem;
      background: #d97757;
      color: #fff;
      border-radius: 0.5rem;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div>
    <h1>Іван Іванов</h1>
    <p>Фотограф. Знімаю життя, а не пози.</p>
    <a href="#">Мої роботи</a>
  </div>
</body>
</html>

Open Sandbox

⬇️ Завантажити інструкцію одним файлом

Що знадобиться

Аккаунт ChatGPT — chat.openai.com (безкоштовного тарифу вистачає)
Аккаунт GitHub — github.com
~15 хвилин часу

Більше нічого. Усе інше працює прямо в браузері, платити не потрібно.

Крок за кроком

Знайдіть сайт-референс
Знайдіть в інтернеті сайт, дизайн якого вам подобається. Скопіюйте посилання — ChatGPT зробить сайт у схожому стилі, але з вашим наповненням.
Згенеруйте сайт у ChatGPT
Зареєструйтеся в ChatGPT і надішліть промпт за шаблоном — підставте своє посилання та інформацію про себе:
Промпт для ChatGPT
Створи сайт, схожий на [ПОСИЛАННЯ НА САЙТ-РЕФЕРЕНС]. Але це має бути моя робоча сторінка. Розкажи про мене: [чим займаєтесь, досвід], моя робота: [послуги/проєкти], контакти: [телефон, email, соцмережі], ціни на послуги: [ваш список]. Вимоги: все в одному файлі index.html (HTML + CSS всередині), адаптивний під телефон, сучасний дизайн.
ChatGPT генерує весь сайт одним файлом
Натисніть «Копіювати» біля блоку коду — він знадобиться на кроці 6.
Зареєструйтеся на GitHub
Перейдіть на github.com і створіть аккаунт:
github.com — кнопка Sign up у правому верхньому куті
Створіть репозиторій
Натисніть «+» у правому верхньому куті → New repository і назвіть його строго ваш_логін.github.io:
Ім'я репозиторія = адреса вашого майбутнього сайту
Ім'я не можна змінити
Називайте репозиторій логін.github.io — малими літерами, без пробілів. Тоді сайт відкриється за адресою https://логін.github.io, без жодних префіксів. Це найчистіше ім’я для особистої сторінки.
Додайте короткий опис, оберіть Public → Create repository.
Відкрийте редактор коду
Репозиторій порожній, тож натисніть кнопку Create a codespace просто на сторінці — або кнопку Code → Codespaces. Відкриється онлайн-версія VS Code, у якій можна додавати, видаляти та редагувати файли прямо в браузері.
Натисніть Create a codespace — онлайн-редактор відкриється прямо в браузері
Створіть index.html і вставте код
У провіднику зліва натисніть новий файл (+), назвіть його рівно index.html і вставте код, який згенерував ChatGPT:
Вставляємо код із ChatGPT в index.html
Зафіксуйте та синхронізуйте
Відкрийте вкладку Source Control (іконка гілки зліва), напишіть повідомлення для історії змін (наприклад, «Мій перший сайт») і натисніть Commit. Потім унизу натисніть Sync Changes і підтвердіть:
Commit, потім Sync — код поїде на GitHub
Зачекайте пару хвилин — і все!
GitHub Pages деплоїть сайт за 1–2 хвилини. Відкрийте https://ваш_логін.github.io — ваш сайт уже в інтернеті 🎉
Вдосконалюйте скільки завгодно
Просіть ChatGPT: «зроби шапку липкою», «додай галерею з ефектом наведення», «поміняй кольори на сині». Щоразу просіть заново повний файл і повторюйте кроки 6–7 — сайт оновиться приблизно за хвилину.

Скриншоти ілюстративні

Інтерфейси GitHub і ChatGPT періодично змінюються — кнопки можуть називатися трохи інакше, але порядок кроків не змінюється вже роками.

Типові помилки

Файл називається не index.html — наприклад, Index.html або main.html. GitHub Pages шукає саме index.html, малими літерами.
Репозиторій названий не за шаблоном — логін-github-io або mysite.github.io не спрацює. Потрібен точний формат: логін.github.io.
Забули Sync — Commit без Sync лишає зміни лише на вашому комп’ютері.
Перевіряєте одразу — деплой триває 1–2 хвилини. Оновіть сторінку трохи пізніше.

Що далі?

Коли базовий сайт працює, можна: підключити власний домен, додати сторінку блогу, попросити ChatGPT зробити темну/світлу тему з перемикачем. Про все це — наступні посібники у розділі «Уроки». Заглядайте в блог, там з’являється нове.

Залишилися питання?

Якщо щось не вийшло або залишилися питання — заходьте у Telegram-канал.