• Час читання ~3 хв
  • 10.09.2022

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

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

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

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

composer global require statamic/cli

Once installed, you can run statamic to ensure it works correctly. We will build a basic blog using one of the starter kits, as it speeds up the entire process. To start, open your terminal and navigate to the directory where you want this project to live. Run the following console command to create your new statamic blog:

statamic new blog

You will be asked at this point if you want to start with a blank site or if you want to use a starter kit. I highly recommend considering using a starter kit here - as the statamic community has created some fantastic resources that you can use. I will use Starter's Creek for this tutorial, a blog starter using tailwindcss.

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

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

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

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

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

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

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

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

composer require statamic/ssg

This will install the package and publish the configuration file. You can customize the building of the static site a little within this config file. However, the default will work for this project. Our website will now be able to be built as a static site, meaning we can look into deployments.

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

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

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

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

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

brew install pulumi

However, the documentation has excellent instructions on getting this installed on your machine if you are not a mac user.

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

pulumi new typescript

The command will then ask you to enter your API token for Pulumi, as you need an account to use it. They have a great free tier, and you are unlikely to run out of free deployments for most sites like this.

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

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

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

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

A great starting point for us to start designing our infrastructure, so let us get started.

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

npm install @pulumi/digitalocean

Now we can get back to looking at our infrastructure.

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",
        }],
    }
});

We are creating a new Digital Ocean App and telling it the specifications of how we want to build and store this on their platform. Including the build command and output directory. We also let them know the repo URL so that it can easily be cloned and redeployed if we push updates through GitHub.

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

pulumi preview

This should give you an output like the following:

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

We know from this output that we will create two resources, one stack on Oulumi and one static website on Digital Ocean. To allow us to do this, we will need to go to our Digital Ocean account and generate an API token so Pulumi can create and set up our infrastructure.

Встановіть це за допомогою Pulumi CLI:

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

The next step is to ensure that Digital Ocean has access to our GitHub repository. You can do this from inside the Digital Ocean App Platform console.

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

pulumi up

This will check to see what changes need to be applied, which you can then confirm if you want to create the new resources. Then once approved, your resources will be created - and your website will be live!

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

Comments

No comments yet
Yurij Finiv

Yurij Finiv

Full stack

Про мене

Professional Fullstack Developer with extensive experience in website and desktop application development. Proficient in a wide range of tools and technologies, including Bootstrap, Tailwind, HTML5, CSS3, PUG, JavaScript, Alpine.js, jQuery, PHP, MODX, and Node.js. Skilled in website development using Symfony, MODX, and Laravel. Experience: Contributed to the development and translation of MODX3 i...

Про автора CrazyBoy49z
WORK EXPERIENCE
Контакти
Ukraine, Lutsk
+380979856297