Repository files navigation

Этот проект был создан при помощи Parcel. Для знакомства и настройкидополнительных возможностейобратись к документации.

1. Убедись что на компьютере установлена LTS-версия Node.js.Скачай и установи её если необходимо.
2. Склонируй этот репозиторий.
3. Измени имя папки сparcel-project-template на имя своего проекта.
4. Создай новый пустой репозиторий на GitHub.
5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиториемпо инструкции.
6. Установи зависимости проекта в терминале командойnpm install .
7. Запусти режим разработки, выполнив командуnpm start.
8. Перейди в браузере по адресуhttp://localhost:1234.Эта страница будет автоматически перезагружаться после сохранения изменений вфайлах проекта.

• Все паршалы файлов стилей должны лежать в папкеsrc/sass и импортироваться вфайлы стилей страниц. Например, дляindex.html файл стилей называетсяindex.scss.
• Изображения добавляй в папкуsrc/images. Сборщик оптимизирует их, но толькопри деплое продакшн версии проекта. Все это происходит в облаке, чтобы ненагружать твой компьютер, так как на слабых машинах это может занять многовремени.

Для настройки деплоя проекта необходимо выполнить несколько дополнительных шаговпо настройке твоего репозитория. Зайди во вкладкуSettings и в подсекцииActions выбери выбери пунктGeneral.

Пролистай страницу до последней секции, в которой убедись что выбраны опции какна следующем изображении и нажмиSave. Без этих настроек у сборки будетнедостаточно прав для автоматизации процесса деплоя.

Продакшн версия проекта будет автоматически собираться и деплоиться на GitHubPages, в ветку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.

1. После каждого пуша в веткуmain GitHub-репозитория, запускается специальныйскрипт (GitHub Action) из файла.github/workflows/deploy.yml.
2. Все файлы репозитория копируются на сервер, где проект инициализируется ипроходит сборку перед деплоем.
3. Если все шаги прошли успешно, собранная продакшн версия файлов проектаотправляется в веткуgh-pages. В противном случае, в логе выполненияскрипта будет указано в чем проблема.