Використовуй цей репозиторій організації GoIT як шаблон для створення
репозиторію свого проекту. Для цього натисни на кнопку «Use this template»
і
обери опцію «Create a new repository»
, як показано на зображенні.
На наступному етапі відкриється сторінка створення нового репозиторію. Заповни
поле його імені, переконайся, що репозиторій публічний, після чого натисни
кнопку «Create repository from template»
.
Після того, як репозиторій буде створено, необхідно перейти в налаштування
створеного репозиторію на вкладку Settings
> Actions
> General
як показано
на зображенні.
Проскроливши сторінку до самого кінця, в секції «Workflow permissions»
обери
опцію «Read and write permissions»
і постав галочку в чекбоксі. Це необхідно
для автоматизації процесу деплою проекту.
Тепер у тебе є особистий репозиторій проекту, зі структурою файлів та папок репозиторію-шаблону. Далі працюй з ним, як з будь-яким іншим особистим репозиторієм, клонуй його собі на комп'ютер, пиши код, роби коміти та відправляй їх на GitHub.
- Переконайся, що на комп'ютері встановлено LTS-версію Node.js. Скачай та встанови її якщо необхідно.
- Встанови базові залежності проекту в терміналі командою
npm install
. - Запусти режим розробки, виконавши в терміналі команду
npm run dev
. - Перейдіть у браузері за адресою http://localhost:5173. Ця сторінка буде автоматично перезавантажуватись після збереження змін у файли проекту.
- Файли розмітки компонентів сторінки повинні лежати в папці
src/partials
та імпортуватись до файлуindex.html
. Наприклад, файл з розміткою хедераheader.html
створюємо у папціpartials
та імпортуємо вindex.html
. - Файли стилів повинні лежати в папці
src/css
та імпортуватись до HTML-файлів сторінок. Наприклад, дляindex.html
файл стилів називаєтьсяindex.css
. - Зображення додавай до папки
src/img
. Збирач оптимізує їх, але тільки при деплої продакшн версії проекту. Все це відбувається у хмарі, щоб не навантажувати твій комп'ютер, тому що на слабких компʼютерах це може зайняти багато часу.
Продакшн версія проекту буде автоматично збиратися та деплоїтись на GitHub
Pages, у гілку gh-pages
, щоразу, коли оновлюється гілка main
. Наприклад,
після прямого пуша або прийнятого пул-реквесту. Для цього необхідно у файлі
package.json
змінити значення прапора --base=/<REPO>/
, для команди build
,
замінивши <REPO>
на назву свого репозиторію, та відправити зміни на GitHub.
"build": "vite build --base=/<REPO>/",
Далі необхідно зайти в налаштування GitHub-репозиторію (Settings
> Pages
) та
виставити роздачу продакшн версії файлів з папки /root
гілки gh-pages
, якщо
це не було зроблено автоматично.
Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора.
- Жовтий колір - виконується збірка та деплой проекту.
- Зелений колір - деплой завершився успішно.
- Червоний колір - під час лінтингу, збірки чи деплою сталася помилка.
Більш детальну інформацію про статус можна переглянути натиснувши на іконку, і в
вікні, що випадає, перейти за посиланням Details
.
Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за
адресою, вказаною на вкладці Settings
> Pages
в налаштуваннях репозиторію.
Наприклад, ось посилання на живу версію для цього репозиторію
https://goitacademy.github.io/vanilla-app-template/.
Якщо відкриється порожня сторінка, переконайся, що у вкладці Console
немає
помилок пов'язаних з неправильними шляхами до CSS та JS файлів проекту
(404). Швидше за все у тебе неправильне значення прапора --base
для
команди build
у файлі package.json
.
- Після кожного пуша у гілку
main
GitHub-репозиторію, запускається спеціальний скрипт (GitHub Action) із файлу.github/workflows/deploy.yml
. - Усі файли репозиторію копіюються на сервер, де проект ініціалізується та проходить лінтинг та збірку перед деплоєм.
- Якщо всі кроки пройшли успішно, зібрана продакшн версія файлів проекту
відправляється у гілку
gh-pages
. В іншому випадку, у лозі виконання скрипта буде вказано в чому проблема.
- Всі підключення зображень ведемо не з паршалів, а з головних сторінок
- Не забуваємо підключати скрипти в потрібних сторінках, не підключаємо все підряд, лиш потрібне
- Якщо підключаємо скрипт, на сторінці мають бути вказані всі селектори, які там є
- Найпростіший у використанні слайдер http://kenwheeler.github.io/slick/
- Доступна інфо по слайдерам https://www.youtube.com/watch?v=rXNfDfqtM3M