https://github.com/yuriipohorilets/parcel-template

📦 Parcel template v2.0
https://github.com/yuriipohorilets/parcel-template

parcel

Last synced: 3 months ago
JSON representation

📦 Parcel template v2.0

• Host: GitHub
• URL: https://github.com/yuriipohorilets/parcel-template
• Owner: YuriiPohorilets
• Created: 2022-08-21T07:36:40.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-10-06T11:30:42.000Z (over 3 years ago)
• Last Synced: 2025-01-16T15:49:28.429Z (over 1 year ago)
• Topics: parcel
• Language: HTML
• Homepage: https://yuriipohorilets.github.io/parcel-template/
• Size: 1.21 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
**Read in other languages: [Русский](README.md), [Polski](README.pl.md).**

# Parcel template | v2.0

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

дополнительных возможностей [обратись к документации](https://parceljs.org/).

## Подготовка нового проекта

1. Убедись что на компьютере установлена LTS-версия Node.js.

   [Скачай и установи](https://nodejs.org/en/) её если необходимо.

2. Склонируй этот репозиторий.

3. Измени имя папки с `parcel-project-template` на имя своего проекта.

4. Создай новый пустой репозиторий на GitHub.

5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием

   [по инструкции](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url).

6. Установи зависимости проекта в терминале командой `npm install` .

7. Запусти режим разработки, выполнив команду `npm start`.

8. Перейди в браузере по адресу [http://localhost:1234](http://localhost:1234).

   Эта страница будет автоматически перезагружаться после сохранения изменений в

   файлах проекта.

## Файлы и папки

- Все паршалы файлов стилей должны лежать в папке `src/sass` и импортироваться в

  файлы стилей страниц. Например, для `index.html` файл стилей называется

  `index.scss`.

- Изображения добавляй в папку `src/images`. Сборщик оптимизирует их, но только

  при деплое продакшн версии проекта. Все это происходит в облаке, чтобы не

  нагружать твой компьютер, так как на слабых машинах это может занять много

  времени.

## Деплой

Для настройки деплоя проекта необходимо выполнить несколько дополнительных шагов

по настройке твоего репозитория. Зайди во вкладку `Settings` и в подсекции

`Actions` выбери выбери пункт `General`.

![GitHub actions settings](./assets/actions-config-step-1.png)

Пролистай страницу до последней секции, в которой убедись что выбраны опции как

на следующем изображении и нажми `Save`. Без этих настроек у сборки будет

недостаточно прав для автоматизации процесса деплоя.

![GitHub actions settings](./assets/actions-config-step-2.png)

Продакшн версия проекта будет автоматически собираться и деплоиться на GitHub

Pages, в ветку `gh-pages`, каждый раз когда обновляется ветка `main`. Например,

после прямого пуша или принятого пул-реквеста. Для этого необходимо в файле

`package.json` отредактировать поле `homepage` и скрипт `build`, заменив

`your_username` и `your_repo_name` на свои, и отправить изменения на GitHub.

```json

"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`, если

это небыло сделано автоматически.

![GitHub Pages settings](./assets/repo-settings.png)

### Статус деплоя

Статус деплоя крайнего коммита отображается иконкой возле его идентификатора.

- **Желтый цвет** - выполняется сборка и деплой проекта.

- **Зеленый цвет** - деплой завершился успешно.

- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка.

Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в

выпадающем окне перейти по ссылке `Details`.

![Deployment status](./assets/status.png)

### Живая страница

Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть

по адресу указанному в отредактированном свойстве `homepage`. Например, вот

ссылка на живую версию для этого репозитория

[https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template).

Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок

связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее

всего у тебя неправильное значение свойства `homepage` или скрипта `build` в

файле `package.json`.

## Как это работает

![How it works](./assets/how-it-works.png)

1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный

   скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`.

2. Все файлы репозитория копируются на сервер, где проект инициализируется и

   проходит сборку перед деплоем.

3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта

   отправляется в ветку `gh-pages`. В противном случае, в логе выполнения

   скрипта будет указано в чем проблема.