Открыть все спойлеры
ДИСКЛЕЙМЕР
Эта страница написана больше в формате блога, блога администратора данного сайта. Так что не ожидайте тут увидеть простую для понимания информацию, которая будет важна среднестатистическому посетителю данного сайта. Далее вы увидите много названий библиотек и софта, что был использован для разработки данного сайта, а так же жаргона и более свободного языка.
Основной софт #
Движок нашего сайта — Eleventy, это генератор статических сайтов, который идеально подходил под нашу задачу.
Это безопасно — нету никаких админ-панелей и мест из которых наш сайт можно взломать. Всё локально и загружается только с компа, на котором это всё и компилируется.
Это эффективно — после того, как основной сайт доведён до рабочего состояния, можно абсолютно не задумываться над кодом и сфокусироваться на написании статей. Статьи пишутся в совсем слегка модифицированном Markdown, это простой язык, разметки отлично компилируемый в HTML, что позволяет любому человеку, кто умеет писать статьи, но полный ноль в коде, научиться его использовать. Так же на Eleventy очень удобно разрабатывать расширения и темплейты. Жаль что дебажить не так удобно как хотелось бы. Вроде бы и не C, но местами недосказанность в логах есть. (TL;DR: Админ доволен, админ ❤ Eleventy)
Это быстро — компиляция всего сайта (CSS, JS, картинки, MD в HTML) вместе с запуском Eleventy, Sass и остальных зависимостей составляет чуть меньше двух минут, и это на low-end компьютере администратора данного сайта.
Вес сайта — сайт загружается очень быстро, потому что он статический и очень лёгкий.
UPD по пункту 2: Неа, не бывает такого что сайт будет доведён до того самого мнимого рабочего состояния, как бы я не пытался наконец остановиться, но сайт продолжает с каждой версией обрастать новыми фичами, местами даже не заметными, но фичами. Кстати, а вы знали что абсолютно все фичи при разработке я адаптирую под юзеров кто будет использовать сайт без JS? К примеру, не будет висеть какой-то нерабочий readerBar, все фичи с JS по умолчанию скрываются для пользователей версии без JS.
Мы используем CSS фреймворк spruce-css для всего на нашем сайте.
Гифка в тему
За основу сайта был взят шаблон от Cone Developement sprucecss-eleventy-documentation-template, огромное им спасибо, благодаря им, мне не пришлось разрабатывать сайт с нуля.
Хоть и да, под наши потребности его пришлось допилить достаточно сильно, как по дизайну, так и по коду, к примеру мобильная версия не была полностью допилена, там были всякие приколы с адаптивностью, что уже, конечно, пофикшено мной. Не говорю уже про вагон фич который я навесил поверх
Стороннее программное обеспечение #
Для многих мелких и рутинных операций с файлами был написан софт на языке Python.
К примеру, чтобы перенести всю библиотеку статей #SD! я использовал:
Маленький скрипт JavaScript, чтобы собрать все ссылки на статьи с канала #SD!
Софтину на основе этого скрапера (переписанного где-то на 50 процентов под меня, в основном, чтобы скачивать много статей и скачивать их быстро)
Скрипт для преобразования HTML в формат который кушает наш движок (добавляет front matter, запихивает ссылку на источник статьи и форматирует её, а так же форматирует картинки, чтобы те открывались в новой вкладке (я пока что не понял как прикрутить это в обработчик MD Eleventy, хотя убил на копании в коде не один час. UPD: Понял, но уже настолько много фич навешал на мой шорткод, что и перелазить обратно не хочется), для этого была использована библиотека markdownify
MarkDown-lint для того чтобы поправить некоторые косяки файлов, что выдавал мне Markdownify (по типу пяти переносов строк, там, где должен быть только один). Он в принципе позволил относительно быстро разбить статью на заголовки и поправить мелкие косяки, которые возникли при переезде ещё из вк в тг.
Ну и… конечно же, как же без них? Google (вы не представляете насколько много, а если представите — умножайте то что представили на 4), ChatGPT, Phind, Amazon CodeWhisperer (под конец разработки даже обзавёлся подпиской на GitHub Copilot) и StackOverflow
Как редактор кода использовал VSCode, там писал и JS, и Python, и темплейты, и CSS(SCSS), и даже эту страницу.
Как проводник использовал Directory Opus, очень удобно с помощью него искать какой-то css параметр среди не маленького spruce-css. (По сути проводник на стероидах, в котором есть виндовый grep, с интерфейсом, кнш)
Ну и по мелочи всякое типо Git, что кстати не был использован на момент создания первой версии этой страницы и бекапы я делал вручную.
Разработка #
Данный проект (а точнее его кодовую базу) я писал, хоть и не с нуля, но в соло. Попытался сделать так, чтобы было как можно меньше всякого bloat'а, но сайт всё ещё содержал в себе достаточно полезного функционала.
И немного контекста: это мой первый Веб проект, который я делал как Production-ready. До этого я немного знал Веб, но к примеру в JS был практически полный ноль. Никаких сайтов я никогда до этого не писал, и не представляю, как бы писал, без штук по типу ChatGPT и Phind. Считайте, что учился я всему этому прямо во время разработки, шёл в одну ногу с сайтом, так сказать, наблюдая как мы оба развиваемся и становимся лучше с каждым днём.
Спонсоры и благодарности #
Главный спонсор моего хорошего настроения во время разработки: музыка. Все песни группы "ПОРНОФИЛЬМЫ", Альбом "Because Maybe" от Renard'а, мой плейлист, в котором чего только нету, а так же случайные миксы Hard Techno с ютуба :)
Ну и нельзя не выразить благодарность администратору сайта adultbaby.ru за небольшой SEO аудит и просто пару советов как сделать сайт ещё немного быстрее.