Как создать и захостить сайт абсолютно бесплатно

Что получится в итоге

Настоящий сайт в интернете с вашим собственным адресом — например, https://ваш_логин.github.io.

Попробуйте прямо здесь — отредактируйте код и сразу увидите результат:

index.htmleditable — try changing something!

<!doctype html>
<html lang="ru">
<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-канал.