Думки та ідеї перед запуском цього блогу
Ділюся міркуваннями щодо запуску цього блогу: від мети та вибору фронтенд-фреймворків до інтеграції з headless CMS.
Я зібрав свої перші думки, які виникли під час запуску цього блогу.
【Мета】
Ведучи блог про технології, які я опановую, я прагну досягти точного та глибокого розуміння технологій, а також спробувати монетизувати його для фінансування обслуговування серверів. Тому пріоритети розподілені так:
- Опановувати найновіші технології.
- Мінімізувати операційні витрати. Якщо витрати перевищують доходи, продовжувати діяльність стає важко.
- Мінімізувати зусилля, не пов'язані з написанням статей (адміністрування, публікації тощо).
- Контент статей планується переважно технічним, з хобі на другому плані.
【Аналіз операційного середовища】
Я перелічив методи запуску та ведення блогу.
<Недоліки безкоштовних платформ>
- Не сприяють вивченню найновіших технологій.
- Безкоштовні сайти автоматично показують рекламу, збільшуючи перегляди, які не приносять вам доходу. Також може відображатися небажана реклама.
- Оскільки це готова платформа для блогів, зусилля на налаштування мінімальні.
<Недоліки платних платформ>
- Не сприяють вивченню найновіших технологій.
- Головна проблема — це витрати. Висока ймовірність того, що проект буде покинуто.
- Ймовірно, вимагає найменше зусиль з адміністрування.
<Власний хостинг: WordPress + домашній сервер + Cloudflare Tunnel>
- Новим є лише використання Cloudflare Tunnel.
- Практично безкоштовно, тому легко продовжувати.
- Сам WordPress став дуже громіздким, що ускладнює керування та оновлення статей, вимагаючи часу на вивчення. *Чи це в межах допустимого?
<Власний хостинг: JS-фреймворк + GitHub + Headless CMS + Cloudflare Pages>
- Керування вмістом через Headless CMS (нову форму CMS) разом із JS-фреймворком.
- Практично безкоштовно, тому мета досягнута.
- Використання SaaS — це зручно, але якщо сервіс закриється, ви опинитеся в глухому куті. Зростають витрати на міграцію.
【Середовище розробки】
Тому, спираючись на вищеописані міркування та наведену нижче інформацію про фреймворки, в рамках підготовки до майбутньої розробки великих додатків я вирішив спробувати створити блог на базі фронтенд-фреймворку, headless CMS та Cloudflare Pages.
<Щодо редактора>
Для написання коду зазвичай встановлюють інтегроване середовище розробки (IDE) та додають розширення для відповідних технологій. VS Code є чудовим варіантом, але оскільки швидкий та легкий редактор Zed реалізував підтримку Astro, я використовуватиму його.
<Робоче середовище розробника>
Розробка коду вимагає інтеграції з хмарними сервісами, такими як npm (Node Package Manager) та GitHub. (Довідка: npx означає "Node Package Execute". На відміну від npm, це інструмент командного рядка для тимчасового виконання пакетів Node.js без їх встановлення в систему, що не засмічує робоче середовище.)
Тип ОС | Особливості |
Linux | Кажуть, що близько 70% веб-серверів у світі працюють на Linux. Він має високу серверну частку та найбільше інструментів розробки. Проте інтерфейс робочого столу та підтримка програм значно гірші, ніж на Mac чи Windows, що робить його менш зручним як основна машина для розробника. |
macOS | Розроблений на основі Unix, він чудово підтримує команди Linux, і більшість із них можна використовувати безпосередньо. Інтерфейс робочого столу чудовий, тому macOS обирають багато розробників. |
Windows | Має колосальну частку на ринку офісного та домашнього використання, а також підходить для ігор. Завдяки встановленню WSL (Windows Subsystem for Linux) можна отримати повноцінне середовище Linux на Windows, об'єднавши найкраще з обох систем. Версія v2.0 має величезну популярність. |
Для блогу не потрібне занадто складне середовище розробки, тому підійде і Mac, і Windows. Проте, щоб не витрачати час на встановлення WSL, цього разу я виберу macOS.
【Dev Container】
При командній розробці уніфікація середовища за допомогою DevContainers є дуже популярною. Однак для проекту, який розробляється однією людиною, це створює більше клопоту з налаштуванням та підтримкою, тому я вирішив відкласти це.
【Особливості фронтенд-фреймворків】
Зазвичай фреймворком називають набір корисних функцій та бібліотек, створених відповідно до певної "філософії дизайну". Дотримання цієї філософії під час написання коду робить розробку ефективною. Хоча це вимагає розуміння концепції та вивчення особливостей коду, згодом це забезпечує однотипність та чистоту коду, зменшуючи кількість багів у великих проектах.
Назва фреймворку | Розробник | Особливості |
React (Багато користувачів) | Meta (Facebook) | Інтерфейс керується за допомогою компонентів, а рендеринг відбувається швидко завдяки оновленню лише змін через Virtual DOM. Більше схожий на UI-бібліотеку, ніж на фреймворк. *Особисто мені не подобається |
Vercel | Фулстек-фреймворк на базі React. Якщо React працює лише на стороні клієнта, Next.js охоплює і серверну сторону, забезпечуючи швидший рендеринг та завантаження. *Наразі застарів! (Директор компанії жахливий, тому він мені більше не подобається) | |
Vue.js (Багато користувачів) | Evan You | Простий для вивчення з низьким порогом входу для розробників-одинаків. Має велику гнучкість завдяки різним комбінаціям. Компонентний підхід. Має багато документації. Мені особисто подобається. |
Alexandre Chopin та ін. | Фулстек-фреймворк на базі Vue.js. Особливо зручний для створення сайтів як SPA (Single Page Application). | |
Astro Technology Company | Astro компилює всю сторінку в статичний HTML та видаляє зайвий JavaScript для максимальної продуктивності. Дозволяє одночасно використовувати різні UI-фреймворки, такі як React чи Vue. Більше підходить для MPA, ніж для SPA, забезпечуючи швидке перше завантаження. Найкращий вибір для блогу. |
<Довідка>
- Результати перенесення сайту з Next.js на Astro
- React має похідні технології, такі як React Native для мобільних додатків. Це зменшує час на вивчення, якщо ви розробляєте для кількох платформ.
- Проте для кросплатформної розробки на iOS та Android зараз більш популярний Flutter від Google, ніж React Native. Спільний інтерфейс користувача полегшує розробку, тому немає сенсу насильно використовувати React.
【Headless CMS з відкритим кодом (Безкоштовні)】
Існує небагато безкоштовних headless CMS з відкритим кодом для розміщення на власному сервері. Більшість компаній надають їх як хмарні сервіси SaaS. Проте відкритий код має великі переваги, якщо ви хочете повністю контролювати дані або боїтеся зростання тарифів. Однак потрібен власний сервер.
Назва | Особливості |
Ймовірно, найвідоміша headless CMS з відкритим вихідним кодом. Ліцензія MIT. Безкоштовна для особистого та комерційного використання, але має платні розширені версії. *Основа побудована на React. | |
Sanity | Сильною стороною є гнучка схема даних та спільне редагування в реальному часі. Добре підходить для динамічного контенту. Хмарний тип (SaaS). Доступний безкоштовний тарифний план. |
Написано на JavaScript, працює на Node.js. Ліцензія MIT. Офіційний образ на Docker Hub. Спеціалізована під блоги система з структурою, близькою до WordPress. | |
Колишня Netlify CMS. Ліцензія MIT. Мало документації. CMS на базі Git, що підключається безпосередньо до репозиторію коду. | |
Часто використовується великими компаніями. Написано на JavaScript для Node.js. Миттєво перетворює існуючі бази даних SQL на швидкі API. | |
На базі Python. Використовується NASA та Google. | |
База даних обмежена MongoDB. Працює на JavaScript. | |
Використовується в Unity. Ліцензія Apache 2.0. | |
Розробка комерційної компанії. | |
Ліцензія GPL 3.0. Зберігає вміст у файлах JSON без використання бази даних. |
<Вибір Headless CMS>
Оскільки це особистий блог, який не може існувати без безкоштовної основи, вибір звузився до систем під ліцензією MIT, таких як Strapi, Ghost та Directus. Серед них Strapi виглядає найкращим вибором для майбутнього розширення та створення інтернет-магазинів, тому я зупинився на ньому.
【Висновок】
Отже, як технологічну основу для цього блогу я вирішив обрати поєднання Astro + Strapi + AlloyDB (PostgreSQL) + TailwindCSS + Cloudflare Pages + MacBook Pro + редактор Zed. Ключовим моментом є процес складання (build flow).
- Запустити контейнер Strapi на Mac, створити статті.
- Під час складання блогу скопіювати статичні сторінки та зображення зі Strapi, не запускаючи її в робочому середовищі (власний сервер в інтернеті не потрібен!).
- Завантажити (розгорнути) весь набір статичних даних на Cloudflare Pages. Сайт повністю складається зі статичних сторінок з мінімумом JavaScript. Завантаження відбувається надзвичайно швидко.
Найголовніша перевага полягає в тому, що робоча версія сайту складається **виключно зі статичних даних**. Strapi потрібна лише під час написання нових статей.