From c157e5edeb379932c25e5bff00eed55ba1baf581 Mon Sep 17 00:00:00 2001 From: Alexander Repeta Date: Thu, 26 May 2022 14:45:25 +0300 Subject: [PATCH] add pl readme --- README.pl.md | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++ README.uk.md | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 202 insertions(+) create mode 100755 README.pl.md create mode 100755 README.uk.md diff --git a/README.pl.md b/README.pl.md new file mode 100755 index 0000000..3639d02 --- /dev/null +++ b/README.pl.md @@ -0,0 +1,101 @@ +**Read in other languages: [Русский](README.md), [Polski](README.pl.md).** + +# Parcel template + +Этот проект был создан при помощи 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`. В противном случае, в логе выполнения + скрипта будет указано в чем проблема. diff --git a/README.uk.md b/README.uk.md new file mode 100755 index 0000000..3639d02 --- /dev/null +++ b/README.uk.md @@ -0,0 +1,101 @@ +**Read in other languages: [Русский](README.md), [Polski](README.pl.md).** + +# Parcel template + +Этот проект был создан при помощи 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`. В противном случае, в логе выполнения + скрипта будет указано в чем проблема.