Від ідеї до блогу, щоб жити, не залишаючи IDE

  • Час читання ~1 хв
  • 2022-09-10 17:43:40
Управління вмістом — це дуже впевнена тема, і кожен має свою улюблену платформу, якою їй подобається користуватися.

Управління вмістом — це дуже впевнена тема, і кожен має свою улюблену платформу, якою хоче користуватися. Statamic — це фантастичний пакет для керування вмістом, який можна додати до своїх програм Laravel.

У цьому підручнику я покажу вам, як почати з нової Statamic веб-сайт і перейдіть від ідеї для блогу до розгортання цього як статичного сайту для Цифровий океан з використанням інфраструктури як коду. Тож ви можете сидіти склавши руки, розслабитися та з легкістю розгортати.

Я розповім, як створити новий статичний веб-сайт, але ви можете додати його до будь-якого Laravel програма, яку ви, можливо, вже маєте.

Найкращий спосіб інсталювати веб-сайт Statamic — це використовувати його інструмент CLI, тому виконайте таку команду, щоб установити цей глобальний інструмент CLI:

composer global require statamic/cli

Після встановлення ви можете запустити < code>statamic, щоб переконатися, що він працює правильно. Ми створимо базовий блог, використовуючи один із стартових наборів, оскільки це пришвидшує весь процес. Для початку відкрийте свій термінал і перейдіть до каталогу, де ви хочете розмістити цей проект. Виконайте таку консольну команду, щоб створити свій новий статичний блог:

statamic new blog

На цьому етапі вас запитають, чи хочете ви почати з порожнього сайту, чи хочете використовувати стартовий набір. Я настійно рекомендую розглянути можливість використання стартового набору тут, оскільки спільнота statamic створила кілька фантастичних ресурсів, якими ви можете скористатися. Для цього підручника я буду використовувати Starter's Creek, запуск блогу з використанням tailwindcss.

Після встановлення вам буде запропоновано створити користувача адміністратора. Це буде користувач, якому ви хочете мати доступ до панелі керування та керування сайтом. Ці облікові дані зберігаються в YAML на диску у вашому проекті, але сам пароль буде хешовано.

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

Якщо ми подивимося на структуру каталогів, ми побачимо, що у нас є кілька каталогів, з якими ми не знайомі. У корені нашого проекту ми побачимо каталог під назвою content, де будуть розміщені параметри конфігурації та фактичний вміст нашого веб-сайту. Statamic — це плоска CMS, яка використовує плоскі файли для зберігання вашого вмісту. Існують варіанти перенести це на базу даних CMS, і документація дуже добре покаже вам, які кроки вам потрібно зробити.

Однак ми зробимо це не робити цього, оскільки ми хочемо зосередитися на розгортанні статичного сайту на платформі додатків Digital Oceans.

Усередині content ми маємо collections, і це наш вміст. У Statamic ми маємо колекції вмісту, упорядковані за типом – сторінки та блог постачаються з моїм стартовим набором. Якщо ви відкриєте будь-який приклад запису, який надійшов із вашим стартовим набором, ви побачите вміст уцінки, але не такий, як ви звикли його бачити. Statamic використовує свої редактори, щоб створювати та зберігати ваші дані у щось, що вам спочатку важко зрозуміти. Однак, якщо ви перевірите цей вміст, ви помітите, що він розбиває кожен створений елемент dom і встановлює тип і вміст. Щоб під час відтворення його можна було легко оновити та змінити типи, щоб, наприклад, оновити абзац до заголовка.

Якщо ми заглянемо всередину ресурс/перегляди каталогу, ми побачимо файли з розширеннями, відмінними від тих, до яких ми звикли в Laravel. У Statamic є механізм створення шаблонів під назвою antlers, який порівняно легко освоїти, але з версії 3 у Statamic є підтримка використання Blade. Ви можете або прочитати документацію, щоб зрозуміти, як цього досягти, або компанія Spatie створила стартовий набір Blade, яким можна скористатися.

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

Щоб це працювало ефективно , нам потрібно буде встановити ще один пакет, щоб перетворити наш веб-сайт Statamic на статичний сайт. Виконайте таку команду, щоб установити пакет:

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

composer require statamic/ssg

Не тому, що у нас є «веб-сайт», який ми хочемо розгорнути, ми можемо почати думати про те, як би ми хотіли розмістити його на Digital Ocean. Найкращим вибором для розміщення такого статичного сайту на Digital Ocean було б використовувати платформу додатків. Це дозволить вам підключити репо, надати будь-які змінні середовища, які можуть знадобитися, і описати кроки створення, необхідні для створення статичного сайту.

Думайте про це як про корисний спосіб автоматизації конвеєра CI/CD. У нас буде автоматичне розгортання, оскільки ми використовуємо платформу додатків. Але в той же час ми також будемо будувати нашу інфраструктуру за допомогою коду. Отже, якщо ми коли-небудь дійдемо до моменту, коли ми захочемо переключитися на драйвер бази даних для нашого вмісту, ми змінимо конфігурацію — повторно запустимо процес налаштування та розгорнемо знову. Нам не потрібно входити в наш хмарний провайдер. Все, що нам потрібно зробити, це переналаштувати та запустити.

Давайте спочатку подивимося на варіанти, коли мова йде про інфраструктуру як код. Terraform є, мабуть, найвідомішим і має чудову підтримку для більшості хмарних провайдерів. Найбільша проблема полягає в тому, щоб навчитися писати сценарії terraform. Далі — Ansible, традиційно більше інструмент автоматизації ІТ із доданою можливістю керування інфраструктурою. Їх багато, кожен зі своїми перевагами та недоліками. Цей підручник буде зосереджений на Pulumi, що дозволяє нам працювати з більшістю хмарних провайдерів і писати нашу інфраструктуру мовою, яка, можливо, нам зручніша.


Поки що ми маємо відносно стандартну структуру програми Laravel з кількома доданими бітами для керування вмістом у Statamic. Ми створимо новий каталог у корені нашого проекту під назвою devops, де зберігатиметься весь наш код Pulumi.

Відкрийте цей новий каталог devops у своєму терміналі, оскільки саме тут ми витратимо багато нашого часу зараз. На цьому етапі вам потрібно буде встановити Pulumi, що, якщо ви користуєтеся Mac, є простою командою brew:

Однак документація містить чудові інструкції щодо встановлення цього на вашому комп’ютері, якщо ви не є користувачем Mac.

Якщо ви встановили Pulumi та знаходитесь у своєму devops каталог, ми можемо ініціалізувати цей проект як проект pulumi. Для цього ми будемо використовувати TypeScript як мову для налаштування нашої інфраструктури, оскільки наразі немає підтримки PHP. Виконайте наведену нижче консольну команду, щоб розпочати цей проект.

brew install pulumi

Потім команда попросить вас ввести маркер API для Pulumi, оскільки для його використання вам потрібен обліковий запис. Вони мають чудовий безкоштовний рівень, і навряд чи у вас закінчаться безкоштовні розгортання для більшості таких сайтів.

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

pulumi new typescript

Якщо це буде виконано запустити, буде встановлено необхідні залежності, і ви готові до запуску.

Давайте відкриємо index.ts, який створив Pulumi для нас:

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

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

import * as pulumi from "@pulumi/pulumi";

Тепер ми можемо повернутися до нашої інфраструктури.

Ми створюємо новий додаток Digital Ocean і розповідаємо йому специфікації того, як ми хочемо створювати та зберігати його на їхній платформі. Включаючи команду побудови та вихідний каталог. Ми також повідомляємо їм URL-адресу сховища, щоб її можна було легко клонувати та повторно розгорнути, якщо ми надішлемо оновлення через GitHub.

npm install @pulumi/digitalocean

Давайте подивимося, як це може виглядати, якщо ми розгорнемо це, оскільки Pulumi має чудову команду для попереднього перегляду інфраструктури, яку ми збираємося створити та використовувати.

import * as pulumi from "@pulumi/pulumi";
import * as digitalocean from "@pulumi/digitalocean";
 
const statamic = new digitalocean.App("statamic-website", {
    spec: {
        name: "statamic-website",
        region: "lon1",
        staticSites: [{
            buildCommand: "composer install --prefer-dist --optimize-autoloader && php please cach:clear && npm ci && npm run production && php please ssg:generate",
            git: {
                branch: "main",
                repoCloneUrl: "https://github.com/juststeveking/website.git",
            },
            name: "statamic-website",
            outputDir: "storage/app/static",
        }],
    }
});

Це має надасть такий результат:

З цього результату ми знаємо, що ми створимо два ресурси: один стек на Oulumi та один статичний веб-сайт на Digital Ocean. Щоб ми могли це зробити, нам потрібно буде перейти до нашого облікового запису Digital Ocean і створити маркер API, щоб Pulumi міг створити та налаштувати нашу інфраструктуру.

pulumi preview

Налаштуйте це за допомогою Pulumi CLI:

Previewing update (do-static)
 
View Live: https://app.pulumi.com/JustSteveKing/devops/do-static/previews/5a4fc21d-ac2c-484a-9e35-bbaf527a9975
 
     Type                       Name              Plan
 +   pulumi:pulumi:Stack        devops-do-static  create
 +   └─ digitalocean:index:App  statamic-website  create
 
Resources:
    + 2 to create

Наступним кроком є ​​забезпечення доступу Digital Ocean до нашого репозиторію GitHub. Ви можете зробити це з консолі Digital Ocean App Platform.

Нарешті, коли всі служби під’єднано, ви зможете виконати одну команду, і ваша інфраструктура з підключенням git буде запущена та працюватиме.

pulumi config set digitalocean:token api-token-here --secret

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

Ось як ви переходите від ідеї до блогу, щоб жити, не виходячи зі свого IDE.

pulumi up
Оригінал
avatar

Yurij Finiv

Full stack

ABOUT

I'm full stack laravel developer

I knew my call in programming back in 2006.

WORK EXPERIENCE
CONTACT
Ukraine, Lutsk
+380979856297