From 72971a147aa8a1b3db291acf85311ee55962da2e Mon Sep 17 00:00:00 2001 From: AndriSkrypka <102464331+AndriSkrypka@users.noreply.github.com> Date: Mon, 30 Oct 2023 12:21:44 +0200 Subject: [PATCH] fix text readme.uk --- README.uk.md | 127 ++++++++++++++++++++++++--------------------------- 1 file changed, 60 insertions(+), 67 deletions(-) diff --git a/README.uk.md b/README.uk.md index ce390a3c10a..e7555078ef2 100755 --- a/README.uk.md +++ b/README.uk.md @@ -1,52 +1,51 @@ # 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`. +Цей проект створено за допомогою 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`. Без этих настроек у сборки будет -недостаточно прав для автоматизации процесса деплоя. +Прокрутіть сторінку до останньої секції, переконайтеся, що вибрані параметри так, +як показано на наступному зображенні, і натисніть `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. +Продакшн-версія проекту автоматично збирається та розгортається на 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/", @@ -55,45 +54,39 @@ Pages, в ветку `gh-pages`, каждый раз когда обновляе }, ``` -Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и -выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если -это небыло сделано автоматически. +Потім вам потрібно зайти в налаштування репозиторія GitHub (`Settings` > `Pages`) +та вказати розповсюдження файлів продакшн версії з папки `/root` гілки `gh-pages`, якщо це +не було зроблено автоматично. ![GitHub Pages settings](./assets/repo-settings.png) -### Статус деплоя +### Статус розгортання -Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. +Статус останнього коміту розгортання відображається піктограмою біля його ідентифікатора. -- **Желтый цвет** - выполняется сборка и деплой проекта. -- **Зеленый цвет** - деплой завершился успешно. -- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. +- **Жовтий колір** - триває збірка та розгортання проекту. +- **Зелений колір** - розгортання завершилося успішно. +- **Червоний колір** - під час лінтінгу, збірки або розгортання сталася помилка. -Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в -выпадающем окне перейти по ссылке `Details`. +Докладну інформацію про статус можна подивитися, клацнувши на піктограму і перейшовши за +посиланням `Details` у спливаючому вікні. ![Deployment status](./assets/status.png) -### Живая страница +### Жива сторінка -Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть -по адресу указанному в отредактированном свойстве `homepage`. Например, вот -ссылка на живую версию для этого репозитория +Зазвичай через кілька хвилин живу сторінку можна буде переглянути за адресою, +яку ви вказали у властивості `homepage`. Наприклад, ось посилання на живу версію +для цього репозиторію: [https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template). -Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок -связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее -всего у тебя неправильное значение свойства `homepage` или скрипта `build` в -файле `package.json`. +Якщо відкривається порожня сторінка, переконайтеся, що у вкладці `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`. В противном случае, в логе выполнения - скрипта будет указано в чем проблема. +1. Після кожного натискання на `main` репозиторій GitHub спеціальний скрипт (GitHub Action) запускається з файлу `.github/workflows/deploy.yml`. +2. Усі файли репозиторію копіюються на сервері, де проект ініціалізується та проходить збірку перед деплоєм. +3. Якщо всі етапи успішно пройдені, зібрана продакшн версія файлів проекту надсилається до гілки `gh-pages`. У випадку невдачі, причина буде вказана в журналі виконання скрипта.