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

ChatGPT + GitHub Pages + редактор коду · ~15 хвилин · не потрібен досвід програмування

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

Кроки

  1. Знайдіть сайт-референс. Знайдіть в інтернеті сайт, дизайн якого вам подобається, і скопіюйте посилання.
  2. Згенеруйте сайт у ChatGPT. Зареєструйтеся і надішліть промпт (шаблон нижче), підставивши своє посилання та опис себе.
  3. Скопіюйте код. Натисніть «Копіювати» біля блоку коду у відповіді ChatGPT.
  4. Створіть репозиторій на GitHub. Зареєструйтеся на github.com → «+» → «New repository». Ім'я — строго ваш_логін.github.io (це майбутня адреса сайту, змінити не можна). Опис — будь-який, режим — Public → «Create repository».
  5. Відкрийте редактор коду. На сторінці репозиторія натисніть клавішу . (крапку) або кнопку «Code» → «Codespaces» — відкриється онлайн-версія VS Code.
  6. Створіть index.html. У провіднику натисніть «новий файл», назвіть його рівно index.html і вставте код із ChatGPT.
  7. Зафіксуйте зміни. Вкладка Source Control → напишіть повідомлення (наприклад, «Мій перший сайт») → Commit.
  8. Синхронізуйте. Натисніть Sync Changes унизу і підтвердіть — код поїде на GitHub.
  9. Зачекайте 1–2 хвилини і відкрийте ваш_логін.github.io — сайт уже в інтернеті! 🎉
  10. Вдосконалюйте. Просіть ChatGPT: «зроби шапку липкою», «додай галерею», «поміняй кольори на сині». Щоразу просіть заново повний файл і повторюйте кроки 6–8.

Промпт для ChatGPT (шаблон)

Створи сайт, схожий на [ПОСИЛАННЯ НА САЙТ-РЕФЕРЕНС].

Але це має бути моя робоча сторінка. Розкажи про мене: [ВАША ІНФОРМАЦІЯ — чим займаєтесь, досвід], моя робота: [послуги/проєкти], контакти: [телефон, email, соцмережі], ціни на послуги: [ваш список].

Вимоги: все в одному файлі index.html (HTML + CSS всередині), адаптивний під телефон, сучасний дизайн.
⚠️ Репозиторій називайте точно логін.github.io — малими літерами, без пробілів. Тоді сайт відкриється за адресою https://ваш_логін.github.io

Чек-лист перед публікацією