Skip to content

Commit

Permalink
fix text readme.uk
Browse files Browse the repository at this point in the history
  • Loading branch information
AndriSkrypka committed Oct 30, 2023
1 parent 237e27a commit 72971a1
Showing 1 changed file with 60 additions and 67 deletions.
127 changes: 60 additions & 67 deletions README.uk.md
Original file line number Diff line number Diff line change
@@ -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/",
Expand All @@ -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`. У випадку невдачі, причина буде вказана в журналі виконання скрипта.

0 comments on commit 72971a1

Please sign in to comment.