Коротко: найпростіше — GitHub Pages: безкоштовно, без реєстрації хостингу, сайт відкривається за посиланням через кілька хвилин після завантаження файлів.
Готовий HTML-файл на компʼютері дитини поки що ніхто не бачить, крім самого автора. Щоб сайт отримав власну адресу в інтернеті, потрібні три кроки: завантажити код на GitHub, увімкнути в налаштуваннях репозиторію функцію GitHub Pages і зачекати кілька хвилин, поки сервіс згенерує посилання виду username.github.io/назва-проєкту.
Де в програмі курсу зʼявляється публікація сайту
У курсі «Frontend Старт: перший сайт» (156 занять, 18 місяців) тема «Git та GitHub Pages» — 20-й із 21 модуля програми, одразу перед фінальним проєктом «сайт-портфоліо». До цього моменту дитина вже пройшла HTML5, CSS3, flexbox і grid, адаптивність, основи JavaScript і зробила два міні-проєкти — фотогалерею та калькулятор із перемикачем теми. Публікація тут не окрема технічна дрібниця в кінці, а спосіб показати світові все, що зроблено за курс.
Що конкретно відбувається на занятті з Git та GitHub Pages
Спочатку дитина знайомиться з Git — системою контролю версій, яка запамʼятовує кожну зміну в коді. Потім реєструє репозиторій на GitHub і завантажує туди файли сайту командами git add, git commit, git push. Останній крок — у налаштуваннях репозиторію знайти розділ Pages і вказати, з якої гілки й папки брати файли для публікації.
Скільки часу займає весь процес публікації, якщо сайт уже готовий?
Сама публікація — це 10-15 хвилин на занятті: реєстрація репозиторію, завантаження файлів і увімкнення Pages. GitHub Pages зазвичай генерує робоче посилання протягом кількох хвилин після першого завантаження, іноді трохи довше при першій публікації на новому акаунті.
Чи потрібно платити за хостинг і домен для шкільного проєкту
Ні. GitHub Pages безкоштовний для публічних репозиторіїв, і саме тому це стандартний вибір для навчальних і портфоліо-проєктів: не потрібна ні оплата хостингу, ні купівля домену. Адреса виду username.github.io/назва-проєкту не найкоротша, зате повністю робоча і безкоштовна.
А що з доменом? Чи можна підключити власне імʼя сайту?
Технічно можна прикріпити власний домен до сторінки на GitHub Pages, але купівля домену — окрема стаття витрат, яка в курсі не передбачена і для шкільного портфоліо-проєкту зазвичай не потрібна: посилання github.io цілком годиться, щоб показати сайт учителю, друзям чи додати в резюме для вступу.
Чи потрібно знати англійську, щоб розібратися з Git і GitHub?
Інтерфейс GitHub — англомовний, а самі команди git add, git commit, git push завжди пишуться латиницею незалежно від мови інтерфейсу. Але на занятті викладач пояснює кожен крок українською, а дитині для самого процесу публікації достатньо розпізнавати кілька стійких слів на кнопках — «Settings», «Pages», «Save» — а не читати технічну документацію.
Найчастіші причини, чому сторінка не зʼявляється одразу
Найчастіше — файл головної сторінки називається не index.html, а якось інакше, і GitHub Pages просто не знає, що показувати першим. Друга причина — у налаштуваннях Pages обрана не та гілка чи не та папка з файлами. Обидві помилки виправляються за хвилину в тих самих налаштуваннях репозиторію, без переписування коду сайту.
Що робити далі, коли сайт уже опубліковано
Опублікована адреса не змінюється, поки не видалити репозиторій, тож дитина може додавати посилання на сайт у портфоліо, ділитись ним у соцмережах чи показувати на співбесіді до профільного класу. У курсі «Frontend Pro» цей самий навик розвивається далі — там зʼявляється модуль «Деплой проєкту» вже для складніших застосунків на React.
Повну програму курсу з усіма 21 модулем дивіться на сторінці Frontend Старт: перший сайт. А про те, з чого дитині краще почати — з HTML, CSS чи одразу JavaScript, — ми писали в статті «HTML, CSS чи одразу JavaScript: з чого дитині краще починати».
