From 2966cbd3253edc9df08983bbaff22c4c1f7c16d3 Mon Sep 17 00:00:00 2001 From: goit-i18n <84774169+goit-i18n@users.noreply.github.com> Date: Thu, 30 May 2024 20:57:06 +0300 Subject: [PATCH] Create README.tr.md file for Turkish added --- README.tr.md | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 README.tr.md diff --git a/README.tr.md b/README.tr.md new file mode 100644 index 0000000..2981c71 --- /dev/null +++ b/README.tr.md @@ -0,0 +1,113 @@ +# Vanilla App Template + +Этот проект был создан при помощи Vite. Для знакомства и настройки +дополнительных возможностей [обратись к документации](https://vitejs.dev/). + +## Создание репозитория по шаблону + +Используй этот репозиторий организации GoIT как шаблон для создания репозитория +своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию +`«Create a new repository»`, как показано на изображении. + +![Creating repo from a template step 1](./assets/template-step-1.png) + +На следующем шаге откроется страница создания нового репозитория. Заполни поле +его имени, убедись, что репозиторий публичный, после чего нажми кнопку +`«Create repository from template»`. + +![Creating repo from a template step 2](./assets/template-step-2.png) + +После того как репозиторий будет создан, необходимо перейти в настройки +созданного репозитория на вкладку `Settings` > `Actions` > `General` как +показано на изображении. + +![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) + +Проскролив страницу до самого конца, в секции `«Workflow permissions»` выбери +опцию `«Read and write permissions»` и поставь галочку в чекбоксе. Это +необходимо для автоматизации процесса деплоя проекта. + +![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) + +Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок +репозитория-шаблона. Далее работай с ним, как с любым другим личным +репозиторием, клонируй его себе на компьютер, пиши код, делай коммиты и +отправляй их на GitHub. + +## Подготовка к работе + +1. Убедись что на компьютере установлена LTS-версия Node.js. + [Скачай и установи](https://nodejs.org/en/) её если необходимо. +2. Установи базовые зависимости проекта в терминале командой `npm install`. +3. Запусти режим разработки, выполнив в терминале команду `npm run dev`. +4. Перейди в браузере по адресу [http://localhost:5173](http://localhost:5173). + Эта страница будет автоматически перезагружаться после сохранения изменений в + файлах проекта. + +## Файлы и папки + +- Файлы разметки компонентов страницы должни находиться в папке `src/partials` и + импортироваться в файл `index.html`. Например, файл с разметкой хедера + `header.html` создаем в папке `partials` и импортируем в `index.html`. +- Файлы стилей должны лежать в папке `src/css` и импортироваться в HTML-файлы + страниц. Например, для `index.html` файл стилей называется `index.css`. +- Изображения добавляй в папку `src/img`. Сборщик оптимизирует их, но только при + деплое продакшн версии проекта. Все это происходит в облаке, чтобы не + нагружать твой компьютер, так как на слабых машинах это может занять много + времени. + +## Деплой + +Продакшн версия проекта будет автоматически собираться и деплоиться на GitHub +Pages, в ветку `gh-pages`, каждый раз когда обновляется ветка `main`. Например, +после прямого пуша или принятого пул-реквеста. Для этого необходимо в файле +`package.json` изменить значение флага `--base=//`, для команды `build`, +заменив `` на название своего репозитория, и отправить изменения на +GitHub. + +```json +"build": "vite build --base=//", +``` + +Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и +выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если +это небыло сделано автоматически. + +![GitHub Pages settings](./assets/repo-settings.png) + +### Статус деплоя + +Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. + +- **Желтый цвет** - выполняется сборка и деплой проекта. +- **Зеленый цвет** - деплой завершился успешно. +- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. + +Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в +выпадающем окне перейти по ссылке `Details`. + +![Deployment status](./assets/deploy-status.png) + +### Живая страница + +Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть +по адресу указанному на вкладке `Settings` > `Pages` в настройках репозитория. +Например, вот ссылка на живую версию для этого репозитория +[https://goitacademy.github.io/vanilla-app-template/](https://goitacademy.github.io/vanilla-app-template/). + +Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок +связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее +всего у тебя неправильное значение флага `--base` для команды `build` в файле +`package.json`. + +## Как это работает + +![How it works](./assets/how-it-works.png) + +1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный + скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. +2. Все файлы репозитория копируются на сервер, где проект инициализируется и + проходит линтинг и сборку перед деплоем. +3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта + отправляется в ветку `gh-pages`. В противном случае, в логе выполнения + скрипта будет указано в чем проблема.