ДИСКЛЕЙМЕР
Эта страница написана больше в формате блога, блога администратора данного сайта. Так что не ожидайте тут увидеть простую для понимания информацию, которая будет важна среднестатистическому посетителю данного сайта. Далее вы увидите много названий библиотек и софта что был использован для разработки данного сайта, а так же жаргона и более свободного языка.
Основной софт #
Движок нашего сайта - 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 аудит и просто пару советов как сделать сайт ещё немного быстрее.