Skip to content

Сборка сайта (RC)

Kirill edited this page Mar 31, 2022 · 5 revisions

Организация работы лендинга

Цель данного проекта - статичный лендинг лаборатории полностью независимый от внешнего окружения сайта.

Структура репозитория

Данный репозиторий состоит из трёх отдельных деревьев, каждое из которых имеет отдельное предназначение:

  1. master - хранение кодовой базы проекта
  2. data - хранение представленного на сайте контента (submodule для master)
  3. gh-pages - деплой в виде статичного сайта на GitHub Pages

Сборка статичного сайта

Сайт начинает автоматически собираться при каждом новом коммите в ветки master и data.

Сборка итогового сайта представляет собой чёткую последовательность шагов:

  1. Установка зависимостей проекта.
  2. Преобразование данных из data в понятный сайту вид (подробнее)
  3. Формирование итоговых HTML, CSS и JS файлов (подробнее)
  4. Создание Pull request в gh-pages

Данные для сайта

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

Проекты

Существует два варианта добавления проекта на лендинг:

Вариант 1

Основным источником информации о проекте, который должен оказаться на лендинге, является файл LANDING.md, лежащий в корне репозитория с каждым проектом. Данные в файле должны иметь вид:

# Title
Название проекта
---
# Description
Описание проекта в формате [Markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)
---
# Developers
* Перечисление
* Участников
* В виде
* Списка
---
# Techs
* Список
* Технологий
---
# Images
* Список
* Ссылок
* На картинки
---
# Videos
* Список
* Ссылок
* На видео
---
# SourceCode
| name                         | link                                      |
| ---------------------------- | ----------------------------------------- |
| Таблица                      | С указанием ссылок                        |
| На исходный код              | Проекта                                   |

Кроме файла LANDING.md в репозитории проекта должен быть Action, отправляющий информацию из LANDING.md в ветку data репозитория лэндинга (пример). Так же необходимо в настройках организации расширить секретный ключ RTUITLAB_LANDING_TOKEN на репозиторий проекта.

! В случае приватного репозитория добавить RTUITLAB_LANDING_TOKEN в сам реп

Вариант 2

Если страницу проекта необходимо кастомизировать сильнее, чем позволяет Markdown разметка, то в ветку data, в папку проекта необходимо вручную залить index.pug файл, содержащий разметку страницы.

В случае варианта №2, файл index.pug отменяет генерацию страницы проекта, и ставит кастомизированную как основную.

При этом вариант №1 обязателен. Данные, заполненные на этом шаге, будут отображаться на главной странице.

Достижения

На данном этапе имеется возможность добавлять достижения только в виде Markdown разметки, которая достаточно сильно позволяет персонализировать внешний вид страницы. Формат записи о достижении должен иметь вид:

# Title
Название достижения
---
# ShortDescription
Краткое описание достижения в формате текста. Выводится на странице со списком достижений.
---
# LongDescription
Полное описание достижения в формате [Markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax). Выводится на странице достижения.
---
# Date
Дата события в формате ISO.
---
# Members
* Перечисление
* Участников
* В виде
* Списка
---
# Images
* Список
* Ссылок
* На картинки
---
# Videos
* Список
* Ссылок
* На видео

Формирование статики

После формирования JSON документов с контентом сайта, происходит генерация HTML страницы, которая уже будет включать в себя весь этот контент в статичном виде. Данная статика в дальнейшем будет отправлена в виде Pull request в ветку gh-pages и развёрнута после подтверждения PR.

Или более подробно:

  1. Клонирование репозитория вместе с сабмодулями
  2. Парсинг папки ./data/projects/ и создание .pug файлов в ./src/projects/
  3. Парсинг ./data/achievements/ и создание .pug файлов ./src/achievements/
  4. Копирование изображений из ./data/projects/*/ и ./data/achievements/*/ в ./src/images/ с последующим сжатием и преобразованием к формату .webp
    1. Если картинки указаны ссылками, или отсылаются к пути внутри репозитория, то происходит их загрузка
  5. Парсинг ./data/staff/ и создание файла ./src/js/data/staff.pug
  6. Парсинг ./data/equipment/ и создание файла ./src/js/data/equipment.pug
  7. Сборка статики
  8. Структуризация собранных файлов по каталогам
  9. Создание Pull request из gh-pages-pr в gh-pages