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

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

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

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

Лучший способ установить веб-сайт Statamic - использовать их инструмент CLI, поэтому выполните следующую команду, чтобы установить это глобальное средство 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 у нас есть коллекции контента, организованные по типу - страницы и блог поставляются с моим стартовым комплектом. Если вы откроете какие-либо примеры записей, которые поставлялись с вашим стартовым комплектом, вы увидите содержимое markdown, но не так, как вы привыкли его видеть. Statamic использует свои редакторы для создания и сохранения ваших данных во что-то, что вы, возможно, сначала изо всех сил пытаетесь понять. Однако, если вы проверите это содержимое, вы заметите, что оно разбивает каждый созданный элемент dom и задает тип и содержимое. Таким образом, когда он отображается, его можно легко обновлять и изменять типы, чтобы, например, обновить абзац до заголовка.

Если мы заглянем внутрь каталога resource/views , мы увидим файлы с расширениями, отличными от тех, к которым мы привыкли в Laravel. Statamic имеет свой шаблонизатор под названием antlers, который относительно прост в освоении, но начиная с версии 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. Лучшим выбором для размещения статического сайта, подобного этому, на Digital Ocean было бы использование их платформы приложений. Он позволит вам подключить репозиторий, предоставить любые переменные среды, которые могут вам понадобиться, и описать шаги сборки, необходимые для создания статического сайта.

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

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

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

Откройте этот новый 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.

сначала нам нужно установить модуль узла, который позволит нам использовать пулуми с Digital Ocean. Вы можете установить это с помощью:

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.