От идеи до блога, чтобы жить, не выходя из IDE

  • Время чтения ~3 мин
  • 10.09.2022
Управление контентом — очень самоуверенная тема, и у каждого есть своя любимая платформа, которую он любит использовать.

Управление контентом — очень спорная тема, и у каждого есть любимая платформа, которую он любит использовать. Statamic — это фантастический пакет управления контентом, который вы можете добавить в свои приложения Laravel.

В этом руководстве я покажу вам, как начать с нового Statamic, от идеи блога до развертывания статического сайта для  Digital Ocean Цифровой океан, использующий инфраструктуру в качестве кода. Так что вы можете сесть, расслабиться и с легкостью выполнить развертывание.

Я расскажу, как вы можете создать новый статический веб-сайт, но вы можете добавить это в любой 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. У нас будет автоматическое развертывание, поскольку мы используем платформу приложений. Но в то же время мы также будем строить нашу инфраструктуру с помощью кода. Поэтому, если мы когда-нибудь дойдем до точки, когда захотим переключиться на драйвер базы данных для нашего контента, мы изменим конфигурацию — перезапустим процесс установки и снова развернем. Нам не нужно входить в систему нашего облачного провайдера. Все, что нам нужно сделать, это перенастроить и запустить.

Давайте сначала рассмотрим варианты, когда речь идет об инфраструктуре как коде. Терраформ возможно, самый известный и имеет отличную поддержку для большинства облачных провайдеров. Самая большая проблема — научиться писать сценарии терраформирования. Далее идет Ansible, который традиционно больше похож на инструмент автоматизации ИТ с дополнительными возможностями управления инфраструктурой. Их много, у каждого свои плюсы и минусы. В этом руководстве основное внимание будет уделено Pulumi, что позволяет нам работать с большинством облачных провайдеров и писать нашу инфраструктуру на языке, который нам, возможно, удобнее.

На данный момент у нас относительно стандартная структура приложения Laravel с несколькими дополнительными функциями для управления контентом в Statamic. Мы создадим новый каталог в корне нашего проекта с именем devops., где будет жить весь наш код Pulumi.

Откройте этот новый каталог devops в своем терминале, так как именно здесь мы потратим много нашего времени сейчас. На этом этапе вам нужно будет установить Pulumi, что, если вы работаете на Mac, представляет собой простую команду brew:

Тем не менее, документация есть отличные инструкции по установке этого на вашем компьютере, если вы не являетесь пользователем Mac.

brew install pulumi

После того, как вы установили Pulumi и вошли в свой devops, мы можем инициализировать этот проект как проект пулуми. Для этого мы будем использовать TypeScript в качестве языка настройки нашей инфраструктуры — так как на данный момент нет поддержки PHP. Выполните следующую консольную команду, чтобы запустить этот проект.

Затем команда попросит вас ввести токен API для Pulumi, так как для его использования вам нужна учетная запись. У них отличный бесплатный уровень, и у вас вряд ли закончатся бесплатные развертывания для большинства сайтов, подобных этому.

pulumi new typescript

Затем команда попросит вас ввести название вашего проекта. и описание и имя этого стека. Стек — это согласованный способ проектирования вашей инфраструктуры, поэтому, если вы используете одинаковые настройки для многих проектов, вы можете использовать предопределенный стек для развертывания.

После этого запустите, он установит необходимые зависимости, и все готово к запуску.

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

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

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

Сначала нам нужно установить модуль узла, который позволит нам использовать пулуми с Цифровой океан. Вы можете установить это, используя:

Теперь мы можем вернуться к нашей инфраструктуре.

npm install @pulumi/digitalocean

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

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

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

Это должно выдает примерно следующий вывод:

pulumi preview

Из этого вывода мы знаем, что создадим два ресурса: один стек в Oulumi и один статический веб-сайт в Digital Ocean. Чтобы позволить нам это сделать, нам нужно будет зайти в нашу учетную запись Digital Ocean и сгенерировать токен API, чтобы Pulumi могла создать и настроить нашу инфраструктуру.

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

Установите это с интерфейсом командной строки Pulumi:

Следующий шаг — убедиться, что у Digital Ocean есть доступ к нашему репозиторию GitHub. Вы можете сделать это из консоли платформы приложений Digital Ocean.

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

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

Это проверит, чтобы увидеть какие изменения необходимо применить, которые вы затем можете подтвердить, если хотите создать новые ресурсы. После одобрения ваши ресурсы будут созданы, и ваш сайт заработает!

pulumi up

Именно так вы переходите от идеи к блогу, чтобы жить, не выходя из среды IDE.

Оригинал
Yurij Finiv

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