nmk

Лабораторне заняття №8 (2 години). Публікація проекту на GitHub Pages/Vercel.

Мета

Опанувати процеси розгортання (Deployment) статичного веб-додатку. Навчитися робити свій локальний код доступним для всього світу через безкоштовні хостинги GitHub Pages та Vercel.

План

  1. Підготовка проєкту до релізу (перевірка файлової структури, шляхів до картинок).
  2. Валідація HTML (W3C Validator).
  3. Розгортання через GitHub Pages (з гілки main).
  4. Знайомство з сучасною інфраструктурою Vercel: підключення репозиторію.
  5. Налаштування автоматичного деплою (Continuous Deployment).

Хід роботи

Увага: Ми закінчуємо “статичний” етап нашого магазину “TechShop” (розмітка + стилі). Час показати його світу.

  1. Фінальна перевірка та очищення коду:
    • Переконайтеся, що всі зміни злиті в гілку main. Завжди деплоять(публікують) тільки стабільну версію!
    • Перевірте шляхи до файлів: у вас НЕ повинно бути абсолютних шляхів зі старого комп’ютера (напр., C:\Users\Name\Desktop\img.jpg). Тільки відносні шляхи (./assets/img/logo.svg або assets/css/style.css).
    • Відкрийте сайт W3C Validator, скопіюйте ваш код index.html і перевірте на наявність фатальних помилок незакритих тегів.
  2. Запуск через GitHub Pages (Метод 1):
    • Перейдіть на сторінку вашого репозиторію на сайті GitHub.
    • Відкрийте вкладку Settings (Налаштування) (з іконкою шестерні).
    • У лівому меню знайдіть розділ Pages.
    • Знайдіть меню Build and deployment -> Source. Зі списку гілок виберіть main і залиште папку /(root).
    • Натисніть кнопку Save.
    • Зачекайте 2-3 хвилини (оновіть сторінку). Зверху з’явиться повідомлення: “Your site is live at https://[ваш-логін].github.io/[ім’я-репозиторію]/”. Перейдіть за посиланням — ваш сайт в інтернеті.
  3. Запуск через Vercel (Метод 2 - Більш сучасний і професійний):
    • Зареєструйтесь на сайті Vercel (натисніть Continue with GitHub).
    • На головному екрані натисніть “Add New…” -> “Project”.
    • Vercel підтягне список ваших репозиторіїв з GitHub. Знайдіть свій “TechShop” і натисніть кнопку Import.
    • На наступному екрані нічого вводити не потрібно (це статичний HTML, фреймворків немає). Просто натисніть Deploy.
    • Через 5 секунд ви побачите феєрверки — сайт розгорнуто. Він отримає красивий та короткий домен, напр., techshop-xyz.vercel.app.
  4. Безперервне розгортання (Continuous Deployment - CD):
    • Зробіть будь-яку маленьку зміну у себе на комп’ютері в VS Code (наприклад, змініть текст у <footer>).
    • Зробіть стандартний цикл: git add ., git commit -m "Update footer", git push.
    • Оновіть ваш сайт на Vercel. Ви побачите, що зміна застосувалася АВТОМАТИЧНО. Вам більше не потрібно натискати кнопки на сервері. Цей механізм називається CD.

Результат

Вам більше не потрібно закидати проєкти в архівах викладачу чи друзям. Ви маєте одне чи два універсальних посилання в інтернеті, які миттєво оновлюються, щойно ви пушите зміни у гілку main.

Контрольні питання

  1. Чому Vercel (або GitHub Pages) не завантажить зображення, якщо шлях до нього вказано як C:/images/pic.jpg? Який шлях вважається правильним?
  2. Що таке “Continuous Deployment” (Безперервне розгортання)? Яку роль у ньому грає команда git push?
  3. Чим публікація на Vercel (деплой) відрізняється від розміщення файлів Google Диску чи Dropbox? (Підказка: виконання коду + сервер).
  4. Чому для публікації завжди обирають гілку main або master, а не будь-яку іншу робочу гілку?
  5. Навіщо використовувати сервіс безкоштовної перевірки синтаксису (W3C HTML Validator) перед публікацією проєкту? Якій категорії помилок він допомагає запобігти?