Цей проект був створений за допомогою Parcel. Для ознайомлення та налаштування додаткових можливостей звернися до документації.
- Переконайся, що на комп'ютері встановлена LTS-версія Node.js. Завантаж та встанови її, якщо необхідно.
- Клонуй цей репозиторій.
- Зміни ім'я папки з
parcel-project-template
на ім'я свого проекту. - Створи новий порожній репозиторій на GitHub.
- Відкрий проект в VSCode, запусти термінал та зв'яжи проект з GitHub-репозиторієм за інструкцією.
- Встанови залежності проекту в терміналі командою
npm install
. - Запусти режим розробки, виконавши команду
npm start
. - Перейди у браузері за адресою http://localhost:1234. Ця сторінка буде автоматично перезавантажуватися після збереження змін у файлах проекту.
- Усі паршали файлів стилів повинні лежати в папці
src/sass
та імпортуватися в файли стилів сторінок. Наприклад, дляindex.html
файл стилів називаєтьсяindex.scss
. - Зображення додавай у папку
src/images
. Збірник оптимізує їх, але тільки під час деплою продакшн версії проекту. Усе це відбувається у хмарі, щоб не навантажувати твій комп'ютер, так як на слабких машинах це може зайняти багато часу.
Для настройки деплою проекту необхідно виконати кілька додаткових кроків для налаштування свого репозиторію. Зайдіть на вкладку Settings
і в підсекції Actions
виберіть пункт General
.
Прокрутіть сторінку до останньої секції, в якій переконайтеся, що вибрані параметри, як на наступному зображенні, і натисніть Save
. Без цих налаштувань збірка не матиме достатньо прав для автоматизації процесу деплою.
Продакшн версія проекту буде автоматично збиратися та деплоїтися на GitHub Pages, у гілку gh-pages
, кожного разу, коли оновлюється гілка main
. Наприклад, після прямого пушу або прийнятого пул-реквесту. Для цього необхідно в файлі package.json
відредагувати поле homepage
та скрипт build
, замінивши your_username
та your_repo_name
на свої, і відправити зміни на GitHub.
"homepage": "https://your_username.github.io/your_repo_name/",
"scripts": {
"build": "parcel build src/*.html --public-url /your_repo_name/"
},
Далі необхідно зайти в настройки GitHub-репозиторія (Settings
> Pages
) і
встановити роздачу продакшн версії файлів з папки /root
гілки gh-pages
, якщо
це не було зроблено автоматично.
Статус деплою останнього коміту відображається іконкою біля його ідентифікатора.
- Жовтий колір - виконується збірка та деплой проекту.
- Зелений колір - деплой завершився успішно.
- Червоний колір - під час лінтинга, збірки або деплою сталася помилка.
Детальну інформацію про статус можна переглянути, клікнувши по іконці та перейшовши
по посиланню Details
в спливаючому вікні.
Через деякий час, зазвичай декілька хвилин, живу сторінку можна буде переглянути
за адресою, вказаною в відредагованому властивості homepage
. Наприклад, ось
посилання на живу версію для цього репозиторію:
https://goitacademy.github.io/parcel-project-template.
Якщо відкривається порожня сторінка, переконайся, що в закладці Console
немає помилок,
пов'язаних з неправильними шляхами до CSS і JS файлів проекту (404). Ймовірно,
ви ввели неправильне значення властивості homepage
або скрипту build
в
файлі package.json
.
- Після кожного пушу до гілки
main
репозиторію на GitHub запускається спеціальний скрипт (GitHub Action) з файлу.github/workflows/deploy.yml
. - Всі файли репозиторію копіюються на сервер, де проект ініціалізується та проходить збірку перед деплоєм.
- Якщо всі кроки пройшли успішно, зібрана продакшн версія файлів проекту
відправляється до гілки
gh-pages
. У випадку невдачі в лозі виконання скрипта буде вказано, в чому проблема.