L14. Публікуємо сайт на GitHub Pages

Надамо сайту адресу в інтернеті. Орієнтовно потрібно 40–60 хвилин на підготовку й налаштування; окремо залиште час на розгортання. Потрібні готові index.html і styles.css, доступ до пошти та інтернет. GitHub зберігатиме файли в репозиторії — папці проєкту з історією змін. GitHub Pages показуватиме їх як сайт. Для цього маршруту підходять безплатний обліковий запис і публічний репозиторій. [B204]

Публічний означає, що інші люди зможуть прочитати файли. Перед завантаженням замініть навчальну контактну адресу власною публічною або приберіть посилання. Паролі, about-me.txt і запасну папку не завантажуйте.

На занятті

Викладач покаже шлях від двох локальних файлів до адреси Pages. Разом розрізнимо налаштування профілю й репозиторію та перевіримо сайт у вікні без входу.

Обліковий запис і пошта

• Відкрийте https://github.com/signup. Якщо вже маєте GitHub, виберіть Sign in і перейдіть до кроку 3. Для нового запису введіть свою пошту в Email, унікальний пароль у Password, доступне ім’я в Username, країну в Your Country/Region. Ім’я користувача буде частиною адреси сайту. Виконайте запропоновану перевірку й натисніть Create account. [B202]
• Відкрийте свою пошту, знайдіть лист GitHub і виконайте підтвердження адреси за інструкцією в листі та на сторінці. Якщо листа немає, перевірте «Спам» і адресу, яку ввели. До створення репозиторію переконайтеся, що пошту підтверджено. [B201]
• На GitHub натисніть зображення профілю праворуч угорі → Settings → Emails. Увімкніть Keep my email addresses private. Для змін через вебінтерфейс GitHub використовуватиме службову адресу замість особистої. Це не приховає адресу, яку ви самі написали в HTML. [B203]

Завантажте саме файли сайту

• Відкрийте https://github.com/new. Переконайтеся, що Owner — ваш обліковий запис. У Repository name введіть personal-site. Виберіть Public, увімкніть Add README, натисніть Create repository. README — короткий опис проєкту. Додавши його під час створення репозиторію, ви також отримаєте перший коміт і початкову гілку — основну лінію збережених версій файлів. [B214]
• На вкладці Code виберіть Add file → Upload files. Перетягніть із Провідника index.html і styles.css. Завантажуйте ці два файли, а не папку personal-site: вони мають лежати у верхньому рівні репозиторію. [B205]
• У полі Commit message напишіть Add personal website. Commit, або коміт, — збережений запис про зміну. Для цього власного навчального репозиторію виберіть Commit directly to the main branch, потім Commit changes. Якщо обрано нову гілку, кнопка може називатися Propose changes; поверніться до прямого збереження в main. [B205][B212]

Увімкніть Pages

• Відкрийте Settings → Pages саме в репозиторії, а не в налаштуваннях профілю. У блоці Build and deployment виберіть Source → Deploy from a branch. Нижче виберіть гілку main, папку /(root) і натисніть Save. Root означає верхній рівень, де лежить index.html. [B206]
• Зачекайте на розгортання й оновіть сторінку Pages. Коли з’явиться Visit site, відкрийте його. Типова адреса: https://YOUR-USERNAME.github.io/personal-site/. Тут YOUR-USERNAME треба замінити вашим ім’ям; найпростіше скопіювати готову адресу з GitHub. Оновлення можуть публікуватися до десяти хвилин. [B204][B213]

[[VIS:b5_site_publish]]

• У Chrome або Edge натисніть Ctrl+Shift+N, щоб відкрити приватне вікно. Вставте туди посилання на сайт; у цьому вікні не входьте в GitHub. Перевірте заголовок, меню й оформлення. Сайт має бути доступний відвідувачу без облікового запису.
• Для наступної правки змініть локальний файл, перевірте його й повторіть Add file → Upload files для цього файлу. Збережіть коміт, дочекайтеся розгортання, оновіть сайт. Однакова назва замінює відповідний файл у репозиторії.

> [FIX]

> Бачите 404? Перевірте вкладку Code: файл називається точно index.html і не захований у додатковій папці? Потім звірте Pages: main та /(root). Якщо налаштування правильні, відкрийте вкладку Actions: червоний результат означає помилку розгортання. Її текст можна скопіювати ШІ із запитом «Поясни цю помилку GitHub Pages і запропонуй одну перевірку».

Практика вдома

• У Блокноті створіть Documents\AI-practice\publish-plan-home.txt. Запишіть три адреси: локального файла, репозиторію й опублікованого сайту; скопіюйте їх із відповідних вікон.
• Уявіть, що виправили помилку в заголовку лише в Блокноті. Нижче складіть коротку послідовність дій, потрібних, щоб читач побачив правку. Нічого повторно не публікуйте.
• Перевірте план за кроками 9–10: він має містити завантаження файла, коміт, очікування розгортання й перевірку саме вебадреси. Позначте адресу, яку можна надіслати читачеві.

Самотест

• Яку з адрес — file:, github.com чи Visit site — дати читачеві для перегляду сторінки?
• Ви виправили заголовок у Блокноті, але знайомий бачить старий. Які кроки відділяють локальну правку від публікації?
• Чому сайт перевіряють у приватному вікні без входу в GitHub?

Терміни

• Репозиторій — місце з файлами проєкту та історією змін.
• Коміт — збережений набір змін із коротким описом.
• Розгортання — підготовка й розміщення файлів за адресою сайту.