Срібна куля або Як я зробив сайт із нульовою вартістю інфраструктури

Срібна куля або Як я зробив сайт із нульовою вартістю інфраструктури

Привіт. Мене звати Олексій Брилін, і я працюю Front-end Web Developer в компанії Moqod, яка нещодавно стала частиною Opinov8. В моїй роботі я постійно стикаюсь із викликами, пов’язаними зі стартом і розвитком нових проєктів. Практично за кожною ідеєю слідує необхідність запуску сайту. Але, як це часто буває на старті, бюджет обмежений, а ризик того, що проєкт не злетить, великий. Тож, як втілити свою ідею в життя без втрати якості та зекономивши кошти? В цій статті поділюсь рішенням, яке ми в компанії вже неодноразово протестували. Цей рецепт дасть змогу будь-якому стартапу швидко запустити MVP сайту без великих витрат.

То скільки ж коштує сайт?

Мене часто запитують, скільки коштує сайт. І завжди відповідь одна: щоб зробити хоча б приблизний розрахунок, потрібні вимоги, приклади або хоча б конкретна мета і задачі сайту. Однак, завжди в цю вартість входить:

1. Вартість оренди доменного імені,
2. Оплата сервера та час розробника на розгортання сайту,
3. Дизайн та верстка дизайну.

Якщо потрібні додаткові функції та якість сайту, то додаються ще купівля готового рішення (сервісу чи плагіна) чи підписка на відповідний сервіс.

Візьмемо для прикладу реальний і досить розповсюджений кейс: у вас є ідея і мінімум бюджету, а гнучкість сайту потрібна як у повноцінної CMS.

Тоді ціна готового рішення стартувала б приблизно від $1230:

1. $10 — доменне ім’я,
2. $120 — хостинг на 1-2 роки,
3. $500 — дизайн,
4. $100 — верстка,
5. $200 — налаштування сайту,
6. $300 — готове рішення або платні плагіни.

Звісно, на будь-якому етапі можна заощадити. Але, як показує практика, найкраще зекономити виходить за рахунок часу, проведеного за пошуком рішення чи фрілансера або ж часу, який витратиш на самостійне налаштування.

Для себе я знайшов рішення, яке не вимагає витрат на хостинг і налаштування сайту. Тож, далі про нього.

Decap CMS + Netlify

Якщо взяти готовий дизайн, то вартість такого рішення наближається до 160 доларів за сайт. Точніше, за мультимовний сайт з адмін панеллю, з можливість додавати і редагувати контент, із стійкістю до відмови в 99%, і 100% захистом даних. При цьому швидкість завантаження такого сайту 81 ms (TTFB).

Правда, звучить заманливо? В чому ж тут нюанс?

В тому, що фактично це — «конструктор» з готовими блоками. Ми можемо робити з них будь-що, але за новим блоком доведеться йти в магазин і платити додатково. Або ж потрібно навчитися робити блоки самостійно.

Якщо ви не знайомі з Decap CMS, то це — нове покоління контент-менеджер системи (CMS), яка дозволяє легко управляти вмістом вашого веб-сайту. Вона була спеціально розроблена для швидкого розгортання статичних сайтів та забезпечення їх безперервної роботи. Decap CMS не є класичною CMS із базою даних і серверними скриптами; замість цього вона використовує сучасний статичний підхід.

Основні переваги цієї CMS:

• Простота використання: Інтерфейс Decap CMS інтуїтивно зрозумілий, що дозволяє навіть користувачам без досвіду легко додавати та редагувати контент на своєму сайті.
• Швидке розгортання: Завдяки відсутності бази даних і скриптів, створення статичних сайтів з Decap CMS відбувається швидше, що дозволяє зосередитися на важливих аспектах розробки.
• Висока продуктивність: Статичні сайти, розгорнуті з використанням Decap CMS, мають велику швидкість завантаження, що поліпшує користувацький досвід та SEO показники.
• Безпека: Відсутність бази даних та скриптів знижує ризик вразливостей, що можуть бути використані зловмисниками для атак на сайт.

Щодо Netlify, то це — сучасна хмарна платформа, яка спеціалізується на хостингу статичних сайтів та розгортанні веб-додатків. Вона надає широкі можливості для автоматизації процесу розгортання, CI/CD (Continuous Integration/Continuous Deployment) і масштабування проектів. Більше того, Netlify поєднує в собі функції CDN (Content Delivery Network), що поліпшує швидкість завантаження контенту для користувачів з різних регіонів світу.

Основні переваги Netlify:

• Легкість використання: Навігація і розгортання проектів на Netlify здійснюється за допомогою інтуїтивного і дружнього інтерфейсу.
• Зручний CI/CD: Netlify дозволяє автоматизувати процеси збірки, тестування та розгортання веб-додатків, що робить роботу розробників більш ефективною.
• Безкоштовний хостинг: Netlify пропонує безкоштовний хостинг для статичних сайтів, що дозволяє зекономити кошти при розгортанні прототипів або MVP.
• Гнучкість масштабування: Платформа має гнучкі налаштування масштабування, що дозволяє підлаштовувати обсяг ресурсів під вимоги проекту.
• Вбудованний механізм обробки форм зворотного зв’язку. Щоб використовувати форми, не потрібен серверний код або інфраструктура. Форми налаштовуються автоматично і приймають потрібні дані одразу, щойно їх буде розгорнуто на сайті.

Об’єднавши Decap CMS та Netlify, я отримав потужний інструмент для швидкого та ефективного створення статичних сайтів з мінімальними витратами. Такий підхід дозволяє зосередитися на цільових завданнях та економити час і бюджет при розробці веб-проектів.

Корисні посилання:

1. Starter Kit на Github (with live preview)
2. CMS example

Варто зазначити, що це не Wordpress, до якого є тисячі плагінів, і які вирішать будь-яку задачу за рахунок продуктивності або безпеки. Тут всі задачі вирішуються за рахунок часу веб-розробника. Якщо у вас немає таких навичок, додати непередбачену заздалегідь кнопку або підключити чат-бот самостійно буде складно. Так само як додати мовну версію, групування за тегами, внести зміни в дизайн тощо.

Також у Netlify є ліміти на безкоштовне використання. Вони досить великі, наприклад:

— Трафік — 100GB /місяць,

— CI/CD — 300 minutes /month,

— Обробка форм зворотного зв’язку — 100 форм на місяць з одного сайту.

Однак, щойно ваш сайт стане популярним і отримає великий трафік, доведеться обирати інший сервер або переходити на платний тариф.

Зрозуміло, що це не золота куля, а лише срібна.

Це рішення впевнено займає нішу серед корпоративних та інформаційних сайтів у світі, де SEO оптимізація коштує великих грошей і займає важливу роль у просуванні клієнта. Однак цей приклад доводить, що фінансовий поріг входження може бути нижчим, ніж здається. І це без втрати якості, якщо точно визначити цілі та способи їх досягнення.

Які можуть бути альтернативи

Statamic

Високоефективна та масштабована CMS, але має свої недоліки, зокрема:

• Вартість сервера та вартість Statamic може перевищити доступний бюджет, особливо для невеликих підприємств або осіб, які створюють особистий сайт.
• Складність розробки: Statamic вимагає від розробників глибоких знань PHP та Laravel, що може ускладнити процес розробки для новачків або менш досвідчених розробників.

Webflow

Це потужний конструктор сайтів, але він також має свої недоліки:

• Завантаження сторінок на сайтах, створених за допомогою Webflow, може бути повільним, особливо при великому обсязі контенту. Низька швидкість сайту може негативно впливати на SEO та користувацький досвід.
• Обмежена можливість перенесення сайтів на інші платформи. Це означає, що якщо у вас з’являється потреба змінити хостинг або перейти на іншу CMS, це може бути досить складно.
• Webflow працює за принципом підписки на користування платформою, і це може бути додатковим фінансовим обтяженням, особливо для невеликих підприємств та осіб, які тільки розпочинають свій бізнес.

WordPress

Найпопулярніша CMS у світі, але також є нюанси:

• Низька швидкість та стабільність: З ростом обсягу контенту та додатковими плагінами, WordPress може збільшити час завантаження сторінок, що впливає на користувацький досвід та SEO рейтинг сайту. Крім того, низька стабільність може спричинити виникнення проблем з роботою сайту та недоступність для відвідувачів.
• Вартість хостингу: Вартість хостингу для WordPress сайтів може бути високою, особливо для тих, хто хоче забезпечити стабільність та високу продуктивність свого сайту.
• Постійні оновлення та нові вразливості: WordPress вимагає постійного оновлення ядра та плагінів для забезпечення безпеки. Однак, навіть з оновленнями, можуть виникати нові вразливості, що можуть бути використані зловмисниками для атак на сайт. Важливо забезпечити високий рівень безпеки, що вимагає додаткових зусиль і коштів.

Порівняно з цими альтернативами Decap CMS та Netlify хостинг забезпечують відмінний баланс ефективності та економії. З цим інструментом стартапи та невеликі підприємства можуть зосередитися на розвитку своїх ідей, забезпечуючи високу якість сайту та користувацький досвід.

Якщо вам необхідно створити MVP, Decap CMS та Netlify хостинг — чудовий вибір, що допоможе максимально оптимізувати ваші витрати, час та зусилля. Зберігайте цю комбінацію у своїй «скарбничці» ідей!