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

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

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

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

<!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>

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

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

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

Три слова, які зустрінуться нижче, простою мовою:

• Репозиторій — тека проєкту на GitHub. У ній лежать ваші файли й історія всіх змін. От і все.
• Коміт — «зберегти цю версію» з коротким підписом, що змінилося.
• Деплой — викласти збережену версію в інтернет, щоб її побачив світ.

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

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

• Файл називається не index.html — наприклад, Index.html або main.html. GitHub Pages шукає саме index.html, малими літерами.
• Вставили уривок замість цілого файла — сторінка відкривається порожньою або наполовину. Попросіть ChatGPT повний файл заново.
• Репозиторій названий не за шаблоном — логін-github-io або mysite.github.io не спрацює. Потрібен точний формат: логін.github.io, де логін — ваш власний нік на GitHub.
• Репозиторій створений як закритий (Private) — GitHub Pages безкоштовний лише для публічних репозиторіїв. Перевірити й виправити можна в Settings → General → Danger Zone → Change repository visibility.
• Не підтвердили пошту на GitHub — сайт мовчки відмовляється публікуватися. Перевірте лист із посиланням для підтвердження.
• Забули Sync — Commit без Sync лишає зміни лише на вашому комп’ютері.
• Перевіряєте одразу — деплой триває 1–2 хвилини. Оновіть сторінку трохи пізніше.

Що далі?

Коли базовий сайт працює, можна: підключити власний домен, додати сторінку блога, попросити ChatGPT зробити темну/світлу тему з перемикачем — щоразу просіть заново повний файл і повторюйте кроки 6–7.

Два корисні наступні кроки: Ваш перший кодинг-агент збирає такі сторінки прямо на вашому комп’ютері, а Git для вайб-кодерів пояснює кнопку скасування, яка ховається за Commit і Sync. Схожі покрокові посібники зібрані у розділі «Уроки», а нове з’являється в блозі.