Переписал сайт-блог 4 раза и вот что из этого вышло
Стоит оговориться, что когда я решил все написать сам с нуля то это должен был получиться не просто сайт блог, а онлайн площадка по изу��ению vue, там были текстовые статьи, тесты, практические упражнения, регистрация (это все было реализовано) и в будущем должна была появится аналитика в личном кабинете по прогрессу в обучение, но не доделал (выгорел)
Привет! Меня зовут Александр и я фронт-лид в крупной компании, решил попробовать себя в блогинге и веду телеграмм канал (кстати подписывайтесь, там много интересных постов о веб-разработке и смешных мемов)
Кому не терпится, итоговый результат можно посмотреть тут
# Сделаю самостоятельно
Выбрал технологии из своего стека и начал разработку
- Frontend-админка: Vue 3
- Frontend-основной сайт: Nuxt 3
- Backend: Express.js / Mongo
- Деплой: Docker / Docker-compose
- Сервер: VPS
Плюсы
- Полная свобода действий / нереальная гибкость
Минусы
- Дорого — оплата VPS и сложности с бесплатным сертификатом (намного дороже чем обычный хостинг)
- Очень долгая разработка (ну тут понятно)
- Качество на 100% зависит от тебя самого, не факт что получится сильно производительнее чем сайт на WordPress
Когда делаешь все сам то приходится разрабатывать — бэкенд, фронтенд, админку для управления контентом, заниматся девопсом (настраивать CI/CD, деплой) настраивать и следить за сервером и все это самому (внезапно)
Позже я пожалел о выборе Mongo и Express.js, да с одной стороны это ускорило разработку на старте, с другой добавило проблем в будущем, поэтому перед тем как выгореть я переписал весь бэк на Nest.js + MySql
# Headless CMS Strapi.js
Strapi.js — opensource headless CMS, это значит что в ней уже есть админка (написана на react.js), а бэкенд создается просто нажатием на кнопочки в этой админке, зачем писать бэкенд самому если можно все сущности и связи создать через админку? Так же и управление контентом, все через готовую админку (которую можно расширять плагинами или дорабатывать самому под себя как угодно)
Стек
- Frontend: Nuxt 3
- Backend: Strapi.js / MySql
- Деплой: Docker / Docker-compose
- Сервер: VPS
Плюсы
- Разработка пошла намного быстрее и проще
- Готовое, хорошо продуманное бэкенд-приложение
- CMS из коробки
Минусы
- Все еще дорого, тот же VPS со всеми вытекающими
- Потеря в гибкости, чтобы что то сделать необычное нужно разбираться с устройством strapi
- Мало плагинов: вышла strapi V5, а плагины только на V4, это opensource поэтому никто не спешит переносить решения на новую версию.
Перейдя на strapi.js сказать что я обрадовался — ничего не сказать, скорость и удобство выросли в разы. Поработав какое то время столкнулся с трудностями и отсутствием плагинов, решил раз уже я перешел на CMS хоть и Headless, почему не попробовать WordPress?
# WordPress
WordPress (WP) ― это самая популярная в мире система управления содержимым сайта (CMS) с открытым исходным кодом.
Стек
- WordPress
Плюсы
- Нереальная скорость создания сайта
- Буквально все настраивается нажатием одной кнопочки — бесплатный SSL, резервное копирование по графику и отправкой в облако, уже молчу про настройку самого сайта
- Безграничное количество готовых решений (плагинов) абсолютно для любой задачи (пример: можно добавить на сайт систему регистрации/авторизации со всеми формами и подтверждением/восстановлением пароля по почте за 10 минут используя бесплатный плагин)
- Очень дешево, почти бесплатно
Минусы
- Коробочное решение со всеми вытекающими, мы не знаем как оно работает внутри, могут быть проблемы с оптимизацией или безопасностью
- Если хочется чего то необычного то нужно лезть в "кишки" wp и там клонировать тему, переопределять блоки и т.д.
- Большая платформа, если хочется делать хороший кастом и настраивать до мелочей — придется разбираться (тратить на это время)
- Программисту с этим работать скучно
WordPress сильно изменился за последние 5 лет и хочу сказать что изменения эти в лучшую сторону. Крутые бесплатные темы которые можно настраивать как в конструкторе сайтов (через elementor), интегрировали ИИ (куда без этого сегодня), видно что платформа динамично развивается и если бы мне нужно было создать коммерческий блог над которым работало бы несколько человек, то я бы точно выбрал WordPress.
Но мой блог не коммерческий, поэтому что еще осталось?
# Astro.js
Astro — веб-фреймворк для создания веб-сайтов, ориентированных на контент, таких как блоги, маркетинг и электронная коммерция. Astro наиболее известен своим новаторским фронтенд архитектурным подходом, направленным на снижение нагрузки и сложности JavaScript по сравнению с другими фреймворками.
Astro.js умеет работать в SPA/SSR режиме, позволяет интегрировать в себя разные фреймворки и библиотеки по типу vue/react, но основное его преимущество это работа в SSG (static site generation) и нативным js, что дает какие то бешенные показатели перфоманса.
Стек
- Astro
Плюсы
- Быстрая и понятная фронтендеру разработка
- Гибкая настройка UI
- Нереальный перфоманс
- Простая реализация клиентской логики
- Дешево, обычный хостинг + бесплатный SSL
Минусы
- Статичный сайт (все редактируется через файлы проекта, вам не нужна база данных или CMS, это можно рассматривать как минус так и как плюс, зависит от задачи)
Если вам нужен сайт, который быстро загружается и имеет отличные показатели SEO, то Astro — это то, что вам нужно.
Итог
Первое что нужно сделать программисту при создании своего проекта это перестать думать как программист. Не стоит мыслить категориями "какой фреймворк лучше", для себя нашел единственный рабочий подход — стать самому себе заказчиком который ничего не знает о технологиях и написать по пунктам хотелки
- Хочу быстрый сайт с классным SEO
- Хочу чтобы было легко настраивать визуал
- Хочу чтобы было легко писать туда статьи
- Хочу поиск по статьям
- Хочу мультиязычный сайт (и чтобы это было просто!)
- Хочу светлую и темную тему
- Хочу чтобы было легко делать бэкапы
- Хочу быстро и не дорого
И вот потом по этим "хочу" и выбирается стэк :)
Спасибо что дочитали до конца! Подписывайтесь на канал, а итоговый сайт можно посмотреть тут