Нещодавно я отримав сповіщення про ліміт безкоштовного тарифу від AWS, через два місяці після того, як розмістив свій особистий додаток для нотаток на EC2 інстансі. Тому я вирішив дослідити, як можна розмістити блог на сайті безкоштовно (або найбільш економно). Під час досліджень моя остання мета була — Як розмістити це, використовуючи github як сховище!
Було багато варіантів, як це зробити (дякуючи реддиторам!). Один з найкращих способів — це генерація статичних вебсайтів і використання CMS, що дозволяє синхронізацію з GitHub. Я вибрав 11ty (Eleventy) + Decap CMS (колишній Netlify CMS) + Netlify Identity, і мені вдалося створити щось схоже на це за кілька днів:
Можливо, я запізнився на вечірку, але ділюсь цим, сподіваючись, що хтось знайде це корисним.
Чому 11ty або Decap?
Очевидно, що існує десятки варіантів для генерації статичних вебсайтів (ефективно і швидко), від класичного Jekyll до нового Next.js. І ви можете вибрати будь-який з них, якщо вам він підходить. Я вибрав 11ty, тому що:
- Мої вимоги були простими і не вимагали великої кастомізації.
- З точки зору користувача, 11ty працює блискавично швидко (і це ПРАВДА)
- 11ty пропонує великий вибір мов шаблонів, перевірте тут
У вас можуть бути свої причини, чому ви не використовуєте його. Ось деякі з них:
- Отриманий сайт важко налаштувати (важко, але можливо)
- Документація має типу DIY формат, і деяким це може бути складно (одна з причин, чому я вибрав це!)
Що стосується Decap CMS, я вирішив, що це найкращий спосіб зробити це. Існували кілька альтернатив, як Keystatic, Contentlayer (не повний CMS), і т. д… Єдина обмеження полягає в тому, що він змушує вас хостити на Netlify і використовувати Netlify Identity (можливо, з Cloudflare або GitHub OAuth, але це складний процес).
Я поділюсь коротким покроковим посібником, як я це зробив; припускаючи, що у вас є базові знання веб-розробки або ви вже робили щось подібне.
1. Створіть проект 11ty
- Створіть порожню директорію і ініціалізуйте node проект, створивши package.json
mkdir eleventy-decap && cd eleventy-decap
yarn init # або npm init -y
Тепер у вас є папка тільки з файлом package.json.
Для решти цього блогу я буду використовувати yarn. Ви можете використовувати npm, замінивши команду на відповідну, якщо вам зручніше.
- Встановіть пакет 11ty у ваш проект
yarn add @11ty/eleventy
- Додайте деякий контент
Створіть index.html і додайте в нього контент
Світ змінюється так швидко, що людина, яка каже, що це неможливо, зазвичай переривається тим, хто це вже робить. - Гаррі Емерсон
``` - Додайте скрипт для запуску Eleventy в **package.json** ``` { "name": "eleventy-decap", "version": "1.0.0", "main": "index.js", "author": "shinjith-dev", "license": "MIT", "scripts": { "dev": "eleventy - serve", "build": "eleventy" }, "dependencies": { "@11ty/eleventy": "³.0.0" } } ``` - Запустіть проект ``` yarn dev ``` Ви побачите сайт, який працює за адресою [http://localhost:8080](http://localhost:8080) (якщо ні, перевірте термінал). Це було буквально найшвидше (або найпростіше) налаштування фреймворку, яке я робив! - Перевірте цю сторінку [Getting Started](https://www.11ty.dev/docs) для детальних інструкцій ## Додавання блогів Створіть папку під назвою **blogs** і збережіть у ній кілька файлів. Ви побачите в терміналі, що файли, які ви оновлюєте, відображаються на сайті в реальному часі.
Наприклад, створіть файл **/blogs/first.md** та додайте до нього вміст.
Мій перший блог в Eleventy + Decap
Etiam massa mauris, feugiat ut pharetra in, malesuada eu orci. Nullam aliquam elit sit amet urna posuere aliquet.
```
Тепер ви можете відкрити цей вміст за URL http://localhost:8080/blogs/first. Як ви могли помітити, 11ty автоматично генерує шляхи до сторінок з шляху до вихідного файлу відносно кореня проєкту. Ви також можете побачити, що статичний веб-фолдер генерується в папці /_site.
Хостинг
Тепер, будь ласка, зробіть цей крок самостійно, оскільки я не хочу, щоб цей блог став занадто довгим і нудним. Це досить просто — завантажте на GitHub і хостіть на Netlify. Будь ласка, зверніться до цих блогів, якщо ви не впевнені, як це зробити:
- Завантаження на GitHub
- Хостинг на Netlify
На останньому етапі конфігурації проєкту ви можете вибрати шаблон Eleventy для Netlify, щоб він самостійно обробляв все за вас. Використовуйте yarn build як скрипт для зборки (ми вже додали цей скрипт на початкових етапах).
2. Інтеграція Decap CMS
Decap — це як плагін і грай частина вашого проєкту. Його легко налаштувати і має легкий інтерфейс CMS. Єдина складність — це додавання Netlify Identity для аутентифікації, але це можна легко зробити, оскільки документація проста для розуміння і слідування.
Встановлення Decap
Створіть папку з назвою admin в корені вашого проєкту (або використовуйте іншу назву, якщо не хочете, щоб до вас потрапили непрохані гості, оскільки це очевидний шлях для пошуку адміністративних інтерфейсів).
Створіть index.html та config.yml у цій папці.
/admin/index.html
/admin/config.yml
backend:
name: git-gateway
branch: main
commit_messages:
create: create {{collection}}/{{slug}}
update: update {{collection}}/{{slug}}
delete: delete {{collection}}/{{slug}}
uploadMedia: upload {{path}}
deleteMedia: delete {{path}}
openAuthoring: '{{message}}'
media_folder: "_site/assets/uploads"
public_folder: "/assets/uploads"
collections:
- name: "blog"
label: "Blog"
folder: 'blogs'
create: true
slug: "{{slug}}"
fields:
- { label: "Title", name: "title", widget: "string" }
- label: "Tags"
name: 'tags'
widget: 'list'
default: ['web']
allow_add: true
collapsed: false
- { label: "Date", name: "date", widget: "datetime" }
- { label: "Body", name: "body", widget: "markdown" }
site_url: https://notes.shinjith.dev
Це базова конфігурація для Decap, припускаючи, що ви хостите її на Netlify і використовуєте Netlify Identity для аутентифікації.
Встановіть значення site_url на netlify URL вашого проєкту.
- Ознайомтеся з цим для альтернативних варіантів встановлення і
- Перевірте це, щоб дізнатися, як налаштувати Decap відповідно до ваших потреб.
Decap та 11ty
Файли .yml за замовчуванням не обробляються 11ty, тому вони не будуть створені в папці виводу (/_site/admin/). Також вам не потрібно, щоб 11ty обробляв чи компілював всю папку /admin, оскільки вона не має відношення до частини генерації контенту.
Щоб завершити встановлення Decap, потрібно повідомити про це Eleventy. Для цього створіть файл eleventy.config.mjs та додайте наступні рядки.
/eleventy.config.mjs
export default function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("admin");
};
Тепер перезапустіть проєкт. Щоб дізнатися більше про файл eleventy.config.mjs, зверніться до документації 11ty. Більше про функцію addPassthroughCopy можна дізнатися тут.
Додати Netlify Identity
Netlify має сервіс під назвою Identity, який дозволяє додавати аутентифікацію до цього проєкту, включаючи зовнішніх провайдерів аутентифікації, таких як Google.
Увімкнути Netlify Identity
Відкрийте свій розміщений проєкт у панелі керування Netlify та виконайте наступні кроки:
- Identity > Netlify Identity — Enable, натисніть Enable Identity
- Перейдіть до Configuration and usage, у розділі Registration виберіть Open або Invite only, для базових потреб достатньо Invite only
- Додайте зовнішні провайдери для вашої аутентифікації в розділі External providers
- Прокрутіть униз до Services > Git Gateway, і натисніть Enable Git Gateway
Додати віджет для обробки аутентифікації
Додайте віджет Netlify Identity на сторінку адміністратора та, бажано, на основну сторінку.
Тег script:
Файли сторінки після додавання скрипта,
/index.html
Світ змінюється так швидко, що людина, яка каже, що це неможливо, зазвичай переривається тим, хто це вже робить. - Гаррі Емерсон
``` **/admin/index.html** ``` ``` За бажанням, ви можете перенаправити користувача до CMS після того, як Netlify вас автентифікує, додавши фрагмент скрипта. Зверніться до документації Decap для отримання додаткової інформації. Тепер ви можете завантажити зміни на GitHub. Почекайте деякий час, поки це побудується, і перейдіть за шляхом **/admin** на вашому розміщеному вебсайті, щоб перевірити налаштування Decap. Після аутентифікації ви зможете легко керувати своїми блогами тут. Кожного разу, коли ви натискаєте **Publish**, зміни негайно комітяться на GitHub і після процесу збірки ці зміни з'являються на розміщеному сайті приблизно через хвилину. Я вже згадував посібник _Quick Start_. Для більш детальної інформації зверніться до документації Decap CMS:
1. [Встановлення Decap CMS](https://decapcms.org/docs/install-decap-cms/)
2. [Вибір бекенду](https://decapcms.org/docs/choosing-a-backend/)
3. [Конфігурація Decap CMS](https://decapcms.org/docs/configure-decap-cms/)
## Останні штрихи
До цього часу ми змогли створити прості сторінки блогу та інтегрувати веб-орієнтовану CMS у проєкт. Тепер ніхто не хоче відвідати вебсайт, що є просто простим текстом без будь-якої структури чи організації. Як я вже згадував раніше, 11ty дещо складно налаштувати за вашим бажанням, але з іншого боку, це досить просто, коли ви зрозумієте [ідею Eleventy](https://www.11ty.dev/docs/glossary/) (як працюють шаблони, управління макетами тощо…).
## Мови шаблонів
11ty пропонує кілька мов для використання у шаблонах (для генерації сторінок). Щодо макетів чи посадкових сторінок, на яких ви хочете перерахувати ваші блоги, вам знадобляться певні скрипти.
У світі 11ty, після невеликого пошуку, я знайшов, що [Liquid](https://www.11ty.dev/docs/languages/liquid/) та [Nunjucks](https://www.11ty.dev/docs/languages/nunjucks/) є двома простими (але потужними) варіантами. Хоча **Liquid** краще підходить для базових потреб, **Nunjucks** здається кращим для трохи складніших операцій; він також здатний виконувати деякі функції JavaScript. Я використовував лише Nunjucks для своїх макетів і шаблонів, які включають скрипти.
[11ty — Мови шаблонів](https://www.11ty.dev/docs/languages/)
## Макети
Ви можете створювати багато макетів і включати їх у свої сторінки. Декілька важливих моментів про макети:
- Макети можна [ланцюжити](https://www.11ty.dev/docs/layout-chaining/) (або вкладати один в один)
- Макет може [каскадувати](https://www.11ty.dev/docs/data-cascade/) дані: макети можуть містити набір атрибутів даних, які називаються [Front Matter](https://www.11ty.dev/docs/data-frontmatter) (або просто метадані). При використанні макета на сторінці або в іншому макеті ці дані передаються і зливаються з даними сторінки (або макета).
## Налаштування
11ty також здатний включати [CSS, JavaScript або користувацькі шрифти](https://www.11ty.dev/docs/assets). Ви також можете налаштувати [tailwindcss](https://tailwindcss.com) для стилізації.
## Пошук
Ви можете використовувати [pagefind](https://pagefind.app/) для індексації своїх сторінок і впровадження простого функціоналу пошуку. Якщо вам потрібен демо-варіант того, як це виглядає, найкращим прикладом буде [пошук 11ty](https://www.11ty.dev/docs/search/)!
Я намагався зробити блог якомога простішим і коротшим. Якщо ви помітили, що якийсь крок пропущено або описано неправильно, залиште коментар.
Перевірте вихідний код [мій вебсайт](https://notes.shinjith.dev), якщо вам потрібна референція, [https://github.com/shinjith-dev/notes-v2](https://github.com/shinjith-dev/notes-v2)
Гарного дня!
Перекладено з: [Create a Blogging Platform With No Backend (Zero Hosting Charge)](https://medium.com/@shinjithkanhangad/create-a-blogging-platform-with-no-backend-zero-hosting-charge-0363bd5cd9d5)