Вибір бекенда для GatsbyJS
Нещодавно у мене з’явився шість місяців на свербіж, щоб переробити сайт свого портфоліо, і я вирішив, що буду вчитися користуватися Гетсбі. Але це здається лише половиною битви. Після того, як ви побудували свій фронтенд, як ви вирішили прийняти бекенд? Там так багато!
Передумови - Чому Гетсбі?
Єдине, що рясніше, ніж безголовкові CMS, - це параметри статичного веб-сайту. Від Hugo (побудований на мові Go від Google) до Jekyll (Ruby) і навіть Nuxt, який базується на VueJS. Я вибрав Гетсбі з пакета з кількох причин, головна з яких - це те, що я професійно розробник React.js, тому використання Реакту в цих швидких проектах є великою користю.
Гетсбі виступає як "швидкоплинний статичний генератор сайту для React". Тож, якщо я можу створювати сайти, але також охоплювати деякі знання React, все краще, правильно? І я завжди шукаю побічні проекти та сайти для інших, тому якщо мені вдасться отримати сортований JAMstack швидше та простіше, ніж попередній стек WordPress, тоді все краще йти вперед! Я вважав, що найкраще почати з власного сайту, перевірити життєздатність.
Що-стек? JAM означає JavaScript, API, розмітку. Існує маса переваг для цього типу веб-сайтів, але мене цікавить те, що ваша CMS відірвана від вашого веб-сайту. Немає здорової WordPress складання для вашого крихітного блогу. Більше можна прочитати на веб-сайті JAMstack .
Я знайшов Гетсбі справжню насолоду. Ви можете знайти підручники на їхньому сайті для налаштування, і як тільки ви побачите код, це досить просто. Я особисто можу порекомендувати серію Скотта Толінського - доступну на Youtube . Гетсбі чудово завершує маршрутизатор React and React із приємною структурою папок, веб-програмою, ES6, підтримкою Sass та - що важливо - GraphQL.
Що-QL? GraphQL - мова запитів для API. Там, де в дні WordPress мені доведеться отримати весь пост просто для відображення заголовка, за допомогою GraphQL я можу сказати API, щоб він дав мені лише назву. Їх сайт також дуже зручний .
Налаштування сайту я отримав досить швидко, дізнавшись про нього. Навколо є тонна навчальних посібників та навчальних матеріалів. І ви можете використовувати скільки-небудь реально реагувати, скільки хочете. Існує також масивний список доступних плагінів , який лише збирається рости.
Тож якщо у вас є досвід роботи з React або якщо ви тільки починаєте роботу, це чудовий вибір. Гетсбі не розповідає, як повинен виглядати ваш код. Насправді це налаштування, щоб ви могли використовувати файли Markdown для сторінок, але я цього не уявляв, тому не хочу. Просто як це! Так само, якщо я хочу масштабувати це, щоб створити веб-сайти для інших людей, я не хочу витрачати віки, навчаючи їх користуватися Markdown, клонувати рето Git і додавати його до репоту Git. Черга безголового CMS .
Ви будуєте свій сайт. У вас є Sass, у вас є файли Markdown (чи ні), але все порожнє! То тепер що? Як ми заповнюємо його вмістом?
Наступний крок: бекенд
Тепер нам потрібна система для управління та доставки нашого вмісту в приємному API (доручено нашим GraphQL, звичайно). І їх ціла купа. Щоб допомогти нам, у Гетсбі є плагіни, які обслуговують деякі безголові CMS, такі як WordPress API, Contentful, Cockpit, Prismic та NetlifyCMS - про що насправді має керівництво Гетсбі. Я перегляну декілька з них, щоб побачити, який із них може бути кориснішим для цього невеликого проекту, і рухатись уперед.
Опублікувавши це, я почув щось дійсно добре про GraphCMS - Він призначений для роботи з GraphQL по суті, і у них є приклад проекту Gatsby Starter для перевірки.
По-перше, однак, чому ми хочемо CMS без голови та JAMstack для проекту? Є кілька причин, по яких більшість людей використовує їх, і деякі, які не відповідають особистим уподобанням:
- Просте налаштування!
- Немає резервного коду. Я дивний розробник і, чесно кажучи, не хочу витрачати години на налаштування PHP, який мені не сподобається. Дайте хороші речі.
- Сервер не потрібен. Хмарні CMS означають, що мені не потрібно платити хостингу для налаштування бази даних SQL.
- Легко редагувати. Якщо мені потрібно відредагувати сайт на ходу або мати клієнта, який повинен зробити те саме, їм не потрібно торкатися жодного коду чи бігати на домашню робочу станцію, щоб виправити орфографічну помилку. Вони можуть отримати доступ до нього будь-де.
Зміст
Це те, про що я найбільше чув у своїх дослідженнях. Зміст великий і відомий - його використовують понад 130 тисяч розробників, якщо вірити їхньому веб-сайту. Мені також подобається їх опис «Швидко. Гнучка. Майбутнє. Це все, що ваша CMS не є. "Це може також сказати" Моя CMS може побити ваш CMS ".
Однак, з усякою прихильністю, ви можете отримати здорову ціну. Зміст має вільний рівень, якщо ви показуєте їх логотип у нижньому колонтитулі, ви можете зберігати до 10 000 записів і мати 3 користувачів - що зовсім не погано. Для мого особистого веб-сайту я радий наклеїти будь-яку атрибуцію на дні. Якщо ви хотіли скористатися цим клієнтом, і він загинув проти того, як на ньому лежить логотип когось іншого, ви можете піднятися на піврівні з тією ж специфікацією за 39 доларів на місяць.
Від платного видання Developer вгору здається, що плата є досить крутою, особливо порівняно з деякими іншими. Це сказало, якщо у вас є клієнт, готовий роздрібнити гарячі 949 доларів, чому б ні?
Як тільки ви зареєструєтесь (безкоштовно), ви отримаєте доступ до інформаційної панелі з деяким фіктивним вмістом та посиланнями на підручники * . Ви можете побачити інформаційну панель зі всіма типами вмісту. Я встановлюю тип сторінки для тексту на своїх сторінках. Ви можете робити повідомлення або інші користувацькі типи.
* У відеороликах хлопець вимовляє Зміст, як «вміст», як задоволений чи задоволений. Я завжди вважав, що це вміст із вмістом, як у CMS. Але що я знаю? Він там працює.
Потім ви налаштовуєте свої поля, вибираючи з великого списку. Якщо ви хочете простий заголовок / тіло, ви можете встановити його як вище, або ви можете використовувати час і дати, зображення, цілі об’єкти JSON тощо. Ви також можете локалізувати поля, щоб відображатися лише в певних країнах, робити їх необхідними та як вони відображаються в CMS. Наприклад, я не міг бачити, як створити прапорець (оскільки для нього немає типу поля), але якщо ви створюєте коротке текстове поле, у вас є можливість дозволити лише певні значення. Потім ви можете встановити CMS-вигляд у спадному меню або в деяких перемикачах. Мені б хотілося, щоб це було варіантом, як тільки я додаю поле - щось на зразок користувальницьких полів WordPress - але, коли ви знаєте, що це є, це має сенс.
Зміст виглядає як фантастична послуга. Це не ідеально, але він перевіряє всі мої скриньки - а що ви нічого не хочете? Це, безумовно, той, хто повинен бити.
WordPress 'REST API
З моменту початку кодування я використовував WordPress як традиційну CMS. Мені знайоме, як це працює, термінологія та документація. Я знаю, що WordPress дуже добре задокументований. API включає ACF - плагін, відомий більшості, якщо не всім розробникам WP і розробникам тем - який відкриває публікації, щоб прийняти всілякі різні поля. Насправді, одне з моїх питань щодо Змістовного ґрунтувалось на моєму багаторічному досвіді з ACF та WP.
Я впевнений, що мені не потрібно витрачати занадто багато часу, розповідаючи про переваги WordPress. Підтримка чудова, інтерфейс чудовий, і це чудово масштабує. Насправді WordPress може похвалитися 29% всього інтернету, який користується їх послугою. Це абсолютно величезно. Існує мільйон і один плагіни для всього, від SEO до електронної комерції, типів спеціальних повідомлень, спеціальних полів тощо.
Як тоді будується ця гачка до нашого Гетсбі? Добре, якщо у вас є WordPress.com - безкоштовна платформа для блогів WP - ви можете робити це автоматично безкоштовно. Якщо у вас є WordPress.org - старший брат, який дозволяє розробити спеціальні розробки, то вам потрібно буде десь розмістити його (можливо, безкоштовно, але швидше за все, платне, якщо ви отримаєте багато трафіку). Моя проблема з API WP полягає в тому, що я хотів щось, що могло б позбавити мене від звичайної настройки сервера-бази даних. Але це те, що мені потрібно для запуску CMS WordPress.org - навіть у нерозділеній якості. Я дійсно просто один хмарний магазин для моєї CMS, як Contentful.
Важливим є варіант WordPress.com. У них є блог розробників про те, як розпочати роботу, посилання на дійсно прикольну консоль API, де ви можете експериментувати з різними типами запитів, які ви можете зробити. Насправді Гетсбі робить це легше за допомогою
gatsby-source-wordpressплагіна . У файлі конфігурації Гетсбі ви встановлюєте URL-адресу установки WP. Потім на вашому сайті WordPress налаштуйте нову програму , і ваші дані будуть готові до зняття за допомогою GraphQL Query.
Багато цієї інформації надійшло з фантастичного підручника Джеремі Дюваль . Він проходить налаштування Гетсбі, WordPress.com і підключає його до GraphQL. Це вся установка саме там.
Єдина проблема з налаштуванням WordPress.com полягає в тому, що вона обмежена публікаціями та сторінками, які зводяться до заголовка / зображення / вмісту. Якщо вам потрібен ACF або інші плагіни, вам знадобиться платний пакет WP, який повертається до випуску WordPress.org: я не можу ним користуватися без оплати.
NetlifyCMS
Ми дізнаємось більше про Netlify в іншій статті - їх оригінальний продукт - це CDN для всього вашого сайту, і я буду писати докладніше про обслуговування вашого сайту Gatsby - але зараз ми зупинимось на їх CMS. По-перше, він базується на React, тому гарно пограє, що він буде добре грати з Гетсбі (не кажучи вже про плагін Gatsby, про який я згадував раніше).
Велика відмінність від інших тут полягає в тому, що вміст у NetlifyCMS зберігається у вашому репортажі Git, тобто код і вміст узагальнено. Ви ніколи не втратите вміст, якщо у вас все ще є репо, і ви можете бачити історію на натисканні кнопки - так само, як і зі своїм кодом.
У Гетсбі є зручний підручник для NetlifyCMS, але вони наголошують, що для збереження в GitHub тощо вам знадобиться власний сервер:
Щоб зберегти свій вміст у репортажі Git, його потрібно буде розмістити на такій службі, як GitHub, і вам знадобиться спосіб аутентифікації з цією службою, щоб Netlify CMS міг вносити зміни через API служби. Для більшості сервісів, включаючи GitHub, для автентифікації потрібен сервер.
Однак вони також кажуть, що якщо ви використовуєте NetlifyCMS з Netlify, вони зручно обробляти автентифікацію для вас. Netlify спостерігає за вашим сховищем Git за змінами та оновленням автоматично. Це важливо враховувати, що вони розроблені для того, щоб використовуватись разом, тож якщо ви один для одного, то вигідніше буде бути для іншого. Це не закон, але ви можете зрозуміти, чому вони зробили б це зручніше, якщо ви замикаєтесь в їх екосистемі.
Найкраще з решти - Prismic.io & Cockpit
Призмічний - це на зразок змістовно схожого сервісу, який в основному робить те саме, що має декілька відмінностей. Я вітаю творця, що створює тип, схожий на Contentful, я можу створити редактор з низкою полів, таких як Назва, Тіло, Зображення, Місце, Посилання, Колір.
Prismic має схожу структуру ціноутворення як Contentful - але має ще кілька варіантів на кінець бюджету. Насправді єдиною різницею між трьома меншими ярусами є кількість користувачів, яких можна додати до CMS. Крім того, існують ще кілька преміум-версій з нескінченною кількістю користувачів та деякими вигадливими функціями, такими як ролі користувачів та співпраця. Звичайно для великих проектів та великих клієнтів, які були б корисні.
Кокпіт також, здається, має багато однакових особливостей, за винятком двох великих відмінностей:
- Це відкритий код - кожен може завантажити його, будь-хто може внести свій внесок у сховище Git та покращити його, це означає, що він повністю безкоштовний і буде доступний - в тій чи іншій формі - назавжди. Я міг побачити проблему із Contentful, якщо служба коли-небудь перестала працювати. У них є резервні копії на AWS та створюють нічні резервні копії на своїх преміальних планах, але фактичний інтерфейс може стати недоступним. Оскільки кокпіт є відкритим кодом, вони можуть вийти з бізнесу або перейти в офлайн на ніч або просто перестати працювати взагалі, і там є репо, доступний з вашою CMS.
- Він розміщений самостійно - це зв’язується з останньою точкою, і якщо все таки вийде з ладу, до тих пір, поки ваш сайт ще активний, таким буде і ваша CMS. Чудова новина для техно-параноїка!
Висновок - який підхід є правильним?
Якщо нічого іншого, написання цієї статті дало мені контрольний список, який мені потрібен CMS. Деякі інші CMS мають чудові функції, але декілька з них набагато важливіші для мого використання, ніж інші.
Безкоштовна опція
Це верхня частина списку. Якщо я просто псуюся з системою, я не хочу розкручуватися. Якщо у мене є більший проект з клієнтом, який має фактичні гроші, то я б передумав. Також до цього моменту я хотів би, щоб вона була масштабованою. Якщо я зроблю маленький сайт друга з Гетсбі, а потім протягом ночі його компанія стає мільйонним бізнесом, я хочу мати змогу оновити CMS, щоб обробити збільшення кількості користувачів або публікацій.
Простота використання
Здається, найкраще для цього розміщуються хмарні або Git-сервіси. Мені не потрібен сервер, щоб запустити їх, і я можу це все контролювати в одному місці. Користувальницький інтерфейс повинен бути досить легким для не розробника, і було б непогано, якби система була добре підтримана, щоб я міг отримати допомогу у вирішенні проблем.
Що стосується CMS, то вони мають великі заслуги, і я можу бачити, що вони корисні для різних проектів. Але для моїх потреб - для менших побічних проектів та для особистих сайтів - контент та призмічні здаються такими, які потрібно шукати. Вони обидва є хмарною базою з мінімальними налаштуваннями та працюють за допомогою API, тому я можу отримати доступ до них де завгодно. Крім того, їхні вільні яруси мають чудові функції та масштабування легко, так що якщо у мене є "належний" проект, я можу отримати версію, яка відповідає будь-яким потребам.
Чи корисна ця публікація? Чи використовуєте ви будь-яку з цих CMS або іншу? Будь ласка, дайте мені знати, я хотів би почути, як ви їх отримуєте з ними. І погляньте на майбутній пост про хостинг. Я згадував, що NetlifyCMS чудово працює з Netlify, але є й інші варіанти! Я перегляну сторінки GitHub Pages, Heroku та багато іншого!
Коментарі
Дописати коментар