Делаем домашнюю страничку для своего pet-проекта из подручных средств

Предположим, у вас есть OpenSource проект и вы хотите его продвигать. Вы даже написали README. md и LICENSE. md, но народ почему-то не бежит вам ставить заслуженные звездочки и покупать кофе. Кажется чего-то не хватает. Правильно — сайта, где вы красиво расскажете о своем проекте. Поговорим про то, как с помощью GitHub Pages быстро сделать страничку для своего проекта, а так же как потом ее сделать красиво с помощью React и Bootstrap.

1. Делаем домашнюю страничку для своего проекта из подручных средств Романов Алексей ИТ-Холдинг Т1
2. О СПИКЕРЕ + В индустрии более 15 лет. + Основная специализация – разработка на Java и DevOps. + Работаю в роли Sofware Архитектора в ИТ-Холдинге Т1 уже более 5ти лет. + Мы с вами встречались на других конференциях 🙂 2
3. О ЧЕМ ПОГОВОРИМ + Зачем нужна персональная страница для вашего проекта? + Делаем простейшую лендинг из README.md проекта. + А теперь делаем красивую страницу. + Что ещё можно сделать на GitHub Pages? + Когда GitHub Pages становится недостаточно. + Как задеплоить сайт у себя на заднем дворе на сервере. + Посмотрим что у нас получилось. 3
4. ЗАЧЕМ НАМ ВООБЩЕ СТРАНИЧКА? Федеральный закон № 152-ФЗ «О персональных данных» регулирует обработку персональных данных физических лиц и направлен на защиту их прав и свобод, в частности права на неприкосновенность частной жизни. Кратко: закон определяет, как можно собирать, хранить, использовать и передавать персональные данные, и вводит ограничения для операторов данных (компаний, сервисов, госорганов). Запрещено: • хранить данные без необходимых мер безопасности; • допускать утечки, несанкционированный доступ. 4
5. ЗАЧЕМ НАМ ВООБЩЕ СТРАНИЧКА? 5
6. ЗАЧЕМ НАМ ВООБЩЕ СТРАНИЧКА? romanow/log4j2-masking-lib 6
11. А ТЕПЕРЬ ДЕЛАЕМ ПО-КРАСОТЕ 11
12. А ТЕПЕРЬ ДЕЛАЕМ ПО-КРАСОТЕ Чтобы настроить деплой в Github Pages: + нужно перенести этот код в отдельную ветку (orphan branch) и выбрать Deploy from a branch + написать деплой (.github/ workflows) с помощью GitHub Actions. 12 .github/workflows/deploy.yml
14. А ТЕПЕРЬ ДЕЛАЕМ ПО-КРАСОТЕ https://romanow-alex.ru/log4j2-masking-lib/ 14
15. romanow/romanow.github.io 15
16. ВОЗМОЖНОСТИ MARKDOWN Разметка Markdown отлично подходит для ведения технической документации. На GitHub поддерживает дополнительный синтаксис: + Диаграммы Mermaid. + Математические формулы. + HTML внутри Markdown. + Checkbox. + Alerts. 16
19. ОФОРМЛЯЕМ ДОКУМЕНТАЦИЮ Для оформления документации можно использовать Docusaurus – OS инструмент, для создания сайтов документации из Markdown-файлов с использованием React. Мы пишем документацию как код, а Docusaurus трансформирует Markdown файлы в полноценный сайт с навигацией, поиском и UI: + Навигация: sidebar, автоматическая структура; + UI: готовый интерфейс, адаптированный к мобильным устройствам; + Поиск: встроенный поиск по документации; + Версионирование: можно хранить версии документации (v1, v2, ...); + Markdown + React: можно писать Markdown и при необходимости встраивать React-компоненты. 19
20. ОФОРМЛЯЕМ ДОКУМЕНТАЦИЮ docs/ 20 sidebars.js
21. ОФОРМЛЯЕМ ДОКУМЕНТАЦИЮ docusaurus.config.js 21
23. ОГРАНИЧЕНИЯ GITUB PAGES Для бесплатной версии GitHub ваша страница на GitHub Pages может быть только публичной. 23
24. КОГДА ЭТОГО НЕДОСТАТОЧНО Все что мы смотрели выше – статическая страница. Следующий логичный шаг — собственный сервер с полным контролем над инфраструктурой. Для настройки своего сервера нужно: + Покупаем VPS сервер (Яндекс Cloud, AWS, Microsoft Azure и т.д.). + Покупаем домен и настраиваем A запись → IP адрес вашего сервера. + Устанавливаем nginx и настраиваем сайт. + Настраиваем HTTPS. 24
25. НАСТРАИВАЕМ СВОЙ САЙТ 25
26. НАСТРАИВАЕМ СВОЙ САЙТ /etc/nginx/sites-enabled/default.conf 26
27. НАСТРАИВАЕМ СВОЙ САЙТ Для гарантии того, что сервер является тем, за кого он себя выдает, являются сертификаты — электронный документ, который использующийся для идентификации сервера. Сертификат подтверждает две вещи: + Лицо, которому он выдан, действительно существует. + Оно управляет сервером, который указан в сертификате. 27
28. НАСТРАИВАЕМ СВОЙ САЙТ certbot – это инструмент для автоматического получения и обновления SSL/TLS сертификатов Let's Encrypt. https://certbot.eff.org/ https://letsencrypt.org/ 28
29. НАСТРАИВАЕМ СВОЙ САЙТ /etc/nginx/sites-enabled/default.conf 29 /etc/nginx/sites-enabled/domain.com.conf
30. ЧТО У НАС В ИТОГЕ ПОЛУЧИЛОСЬ? + Домашняя страница проекта — это не про технологии. Это про снижение порога входа, доверие и удобство для пользователя. + Работа с GitHub Pages – идеальный MVP. + Инструменты no-code вроде Wix или Tilda позволяют сделать красивый сайт, но усложнит развитие в дальнейшем. + Генерация через LLM так же позволит сделать красивый сайт и даже оставит больше контроля над кодом. + Самое главное: keep it simple. Не надо сразу строить сложную архитектуру. Каждый следующий шаг появляется только тогда, когда предыдущего уже недостаточно. 30
31. Спасибо за внимание @romanow @romanowalex