Skip to content

Latest commit

 

History

History
113 lines (82 loc) · 7.61 KB

README.ru.md

File metadata and controls

113 lines (82 loc) · 7.61 KB

Vanilla App Template

Этот проект был создан при помощи Vite. Для знакомства и настройки дополнительных возможностей обратись к документации.

Создание репозитория по шаблону

Используй этот репозиторий организации GoIT как шаблон для создания репозитория своего проекта. Для этого нажми на кнопку «Use this template» и выбери опцию «Create a new repository», как показано на изображении.

Creating repo from a template step 1

На следующем шаге откроется страница создания нового репозитория. Заполни поле его имени, убедись, что репозиторий публичный, после чего нажми кнопку «Create repository from template».

Creating repo from a template step 2

После того как репозиторий будет создан, необходимо перейти в настройки созданного репозитория на вкладку Settings > Actions > General как показано на изображении.

Settings GitHub Actions permissions step 1

Проскролив страницу до самого конца, в секции «Workflow permissions» выбери опцию «Read and write permissions» и поставь галочку в чекбоксе. Это необходимо для автоматизации процесса деплоя проекта.

Settings GitHub Actions permissions step 2

Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок репозитория-шаблона. Далее работай с ним, как с любым другим личным репозиторием, клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на GitHub.

Подготовка к работе

  1. Убедись что на компьютере установлена LTS-версия Node.js. Скачай и установи её если необходимо.
  2. Установи базовые зависимости проекта в терминале командой npm install.
  3. Запусти режим разработки, выполнив в терминале команду npm run dev.
  4. Перейди в браузере по адресу 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=/<REPO>/, для команды build, заменив <REPO> на название своего репозитория, и отправить изменения на GitHub.

"build": "vite build --base=/<REPO>/",

Далее необходимо зайти в настройки GitHub-репозитория (Settings > Pages) и выставить раздачу продакшн версии файлов из папки /root ветки gh-pages, если это небыло сделано автоматически.

GitHub Pages settings

Статус деплоя

Статус деплоя крайнего коммита отображается иконкой возле его идентификатора.

  • Желтый цвет - выполняется сборка и деплой проекта.
  • Зеленый цвет - деплой завершился успешно.
  • Красный цвет - во время линтинга, сборки или деплоя произошла ошибка.

Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в выпадающем окне перейти по ссылке Details.

Deployment status

Живая страница

Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть по адресу указанному на вкладке Settings > Pages в настройках репозитория. Например, вот ссылка на живую версию для этого репозитория https://goitacademy.github.io/vanilla-app-template/.

Если открывается пустая страница, убедись что во вкладке Console нет ошибок связанных с неправильными путями к CSS и JS файлам проекта (404). Скорее всего у тебя неправильное значение флага --base для команды build в файле package.json.

Как это работает

How it works

  1. После каждого пуша в ветку main GitHub-репозитория, запускается специальный скрипт (GitHub Action) из файла .github/workflows/deploy.yml.
  2. Все файлы репозитория копируются на сервер, где проект инициализируется и проходит линтинг и сборку перед деплоем.
  3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта отправляется в ветку gh-pages. В противном случае, в логе выполнения скрипта будет указано в чем проблема.