Это шаблон для тренировки чистой верстки на HTML, CSS, JS. Дополнительно поддерживает SCSS и TypeScript.
РЕКОМЕНДОВАННАЯ ВЕРСИЯ Node.js - 22.11.0
- Нажимаем кнопку
Use this template
- Выбираем
Create a new repository - Вписываем название репозитория
- Нажимаем
Create repository - В созданном репозитории нажимаем кнопку
Codeи копируем ссылку
- Открываем папку с проектами в IDE и прописываем в терминале команду
git clone <ссылка которую скопировали>, дожидаемся копирования - После успешного выполнения команды обязательно нужно переключиться в папку с проектом
- Запускаем в терминале команду
npm install, дожидаемся ее выполнения - Можно работать
Папки с конфигами / файлы конфигов лучше не трогать :)
.github - папка с настройками для гитхаба (CI/CD, коммиты)
src - основная папка проекта
----assets - папка для ассетов
--------fonts - папка для локальных шрифтов (можно удалить если таковых нет)
--------images - папка для картинок
----pages - папка для страниц (каждый html-файл - отдельная страница сайта)
----scripts - папка для скриптов
--------app.ts - точка входа для скриптовых файлов. Сюда должны импортироваться все остальные файлы скриптов
----styles - папка для стилей
--------blocks - основная рабочая папка для стилей. В ней каждый файл - отдельная секция на странице/отдельный большой элемент
--------fonts.scss - файл для настройки шрифтов
--------global.scss - файл для глобальных стилей
--------main.scss - точка входа всех стилей. Здесь только импорты из других файлов
--------reset.scss - обнуление стилей
--------variables.scss - SCSS-переменные
----types - папка для типизации (сейчас там декларации для TS, их трогать не нужно)
.gitignore - список файлов и папок для игнорирования системой контроля версий
.prettierrc - конфиг Prettier
eslint.config.js - конфиг ESLint
package.json - основной файл npm, содержит скрипты, зависимости и настройки проекта
tscongfig.json - конфиг для TypeScript
webpack.config.js - конфиг Webpack
-
Развернуть себе проект (инструкция выше)
-
Создать новую ветку от
main. Она должна называться корректно. Пример -feature/BLOCK2-4-add-promo-section -
Внести изменения в ветке согласно задаче. Запушить их
-
Создать
Pull Requestиз рабочей ветки вmain -
При создании автоматически запустится CI/CD пайплайн, который проверит ваш код на форматирование и отсутствие ошибок
-
В случае, если были найдены ошибки в джобах
lint-testилиbuild, необходимо из исправить. Тексты ошибок можно будет найти в информации о джобе, нажав на кнопку Details соответствующей джобы, либо вручную запустив скрипты
npm run lintдля ESLint илиnpm run format:checkдля Prettier
npm run buildeсли проблема с билдом - локально собираем проект с помощью скрипта и проверяем что пошло не такЕсли проблема на последней джобе Deploy, то с большой долей вероятности у вас автоматически не подтянулась настройка деплоя. Можно сделать это самостоятельно В этом же репозитории перейти
Settings->Pagesи выбратьDeploy from a branch->gh-pages /rootПосле этого можно перезапустить джобу деплоя. Это можно сделать следующим образом:
Если все прошло успешно, проверки загорятся зеленым, а в чате ПРа вы увидите сообщение с ссылкой на ваш задеплоенный проект. Иногда для деплоя надо подождать 2-5 минут. Если через это время все равно не заработало, можно написать мне в ЛС
-
Отправить ПР мне на ревью