Всем привет. Сегодня хочу рассказать, как мы подошли к разработке сайта для нашего сообщества Digital Shield: какие сервисы использовали, сколько это стоило и что по итогу получилось. ➥ https://digital-shield.tech/ru/

━━━━━━━━━━ Немного вводной ━━━━━━━━━━

Кто не знает, мы сообщество Digital Shield, которое делает open-source продукты в сфере кибербезопасности.

Мы стараемся создавать инструменты не “ради инструмента”, а на основе своего опыта, боли в работе и рутинных задач, которые хочется закрыть нормальным решением.

Сейчас у нас уже есть несколько проектов: ➤ pentester-dashboard Проект про структурное ведение пентеста. Он помогает не раскидывать заметки по разным TXT/MD-файлам, а связывать активы, технологии, функционал, эндпоинты и уязвимости в одну картину.

➤ docker-analyzer Проект про security gates для Docker-образов. Идея в том, чтобы не просто получить сырой список CVE, а оценивать образ через политики, CWE и веса критичности.

И вот сайт стал для нас следующим логичным шагом.

━━━━━━━━━━ Зачем вообще понадобился сайт ━━━━━━━━━━

Причина довольно простая: • бренд • централизация проектов • точка входа для новых людей • понятное описание того, кто мы и что делаем • место, куда можно отправить инвесторов, партнёров или кандидатов в сообщество

GitHub — это неплохо, но если вы хотите, чтобы о команде и проектах узнало больше людей, нужен не только репозиторий, но и “витрина”/“лицо” бренда.

━━━━━━━━━━ С чего начиналась разработка ━━━━━━━━━━

Важный момент: мы не frontend-команда и не fullstack-студия. Я работаю AppSec-инженером с небольшим опытом в мобильной разработке. Коллеги по сообществу тоже из ИБ, а один человек вообще работает руководителем техподдержки и IT как хобби у него.

И у нас не было позиции: “сейчас быстро сядем и как профессиональная фулл стэк команда соберём идеальный сайт”.

Перед разработкой пришлось нормально подумать: • какой стек сейчас актуален • какой дизайн мы хотим получить • что важно для SEO • безопасность инфраструктуры и самого сайта • какие страницы нужны и для чего они нам • какой функционал мы хотим видеть

После формирования ТЗ мы стали смотреть, как быстрее получить хороший визуальный макет. В итоге выбрали Replit. Мы сознательно не пошли в CMS-конструкторы, потому что не хотели сразу упираться в ограничения чужой платформы. Хотелось оставить себе гибкость: менять дизайн, логику, структуру и не зависеть от того, как конкретная CMS видит “правильный сайт”.

Replit в этом плане помог быстро получить первый рабочий макет. Но важная учесть то что: ИИ не сделал нам “готовый идеальный прод”. Он дал хорошую стартовую точку.

Дальше нам пришлось самим дебажить, обновлять стек, чистить мусорные куски кода и уменьшать лишний вес сайта. И это, как по мне, очень важный опыт: ИИ ускоряет разработку, но не отменяет понимание того, что ты делаешь/выкладываешь на всеобщее обозрение.

После макета мы перешли к backend-части. На сайте есть форма обратной связи по трём направлениям: • общие вопросы и предложения • инвесторы / партнёрство • рассмотрение кандидата в сообщество

Backend мы собрали через ChatGPT буквально за пару часов, потому что задача была небольшая: • один эндпонт • валидация входных данных • хранение заявки • CSP / CORS политики • подключение бесплатной капчи от спама

Но опять же, подсвечиваю, мы не просто скопировали код и залили его на сервер. Мы проверяли, что происходит с входными данными, как настроены заголовки, как работает форма и нет ли очевидной дыры на самом старте.

━━━━━━━━━━ Во сколько это вышло ━━━━━━━━━━

По деньгам получилось примерно так: • 50$ — Replit для генерации и проработки дизайна • 20$ — ChatGPT Plus • 10$ / месяц — аренда простого сервера Итого на старт ушло около 80$.

Сервер взяли небольшой, потому что под текущие объёмы нам не нужна избыточная инфраструктура. Для первых пользователей и презентации проектов достаточно.

#AppSec #DigitalShield #OpenSource #CyberSecurity #DevSecOps #Replit #ChatGPT #WebDevelopment #Сетка #IT #Разработка #Стартап