Цей проект був створений за допомогою 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
оновлюється. Наприклад,
після прямого пушу або прийнятого пул-реквеста. Для цього потрібно змінити поле
homepage
та сценарій build
в файлі package.json
, замінивши 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
. У разі невдачі в лозі виконання скрипта буде вказано, в чому проблема.