Od pomysłu, przez blogowanie, po życie bez opuszczania swojego IDE

Zarządzanie treścią to bardzo opiniotwórczy temat, a każdy ma swoją ulubioną platformę, z której lubi korzystać. Statamic to fantastyczny pakiet do zarządzania treścią, który możesz dodać do swoich aplikacji Laravel.

W tym samouczku pokażę, jak zacząć od nowej strony internetowej Statamic i przejść od pomysłu na bloga do wdrożenia tego jako statycznej witryny do Digital Ocean przy użyciu infrastruktury jako kodu. Możesz więc z łatwością usiąść, zrelaksować się i wdrożyć.

Omówię, jak możesz stworzyć nową stronę statystyczną, ale możesz dodać ją do dowolnej aplikacji Laravel, którą już masz.

Najlepszym sposobem zainstalowania witryny Statamic jest użycie narzędzia CLI, więc uruchom następujące polecenie, aby zainstalować to globalne narzędzie interfejsu wiersza polecenia:

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.

Po zainstalowaniu zostaniesz poproszony o utworzenie użytkownika administratora. Będzie to użytkownik, który chce mieć dostęp do panelu sterowania i zarządzać samą witryną. Te poświadczenia są przechowywane w YAML na dysku w projekcie, ale samo hasło zostanie zaszyfrowane.

W zależności od tego, czego używasz lokalnie do uruchamiania aplikacji PHP, możesz teraz uruchomić witrynę internetową i poruszać się po przykładowej zawartości dołączonej do zestawu startowego.

Jeśli spojrzymy na strukturę katalogów, zobaczymy, że mamy kilka katalogów, których nie znamy. W katalogu głównym naszego projektu zobaczymy katalog o nazwie content, w którym będą znajdować się opcje konfiguracji i rzeczywista zawartość naszej strony internetowej. Statamic to płaski CMS, który wykorzystuje pliki płaskie do przechowywania treści. Istnieją opcje, aby przenieść to do CMS opartego na bazie danych - a dokumentacja jest bardzo dobra, aby pokazać, jakie kroki należy podjąć.

Nie zrobimy tego jednak, ponieważ chcemy skupić się na wdrożeniu statycznej witryny na platformie aplikacji Digital Oceans.

Wewnątrz content mamy collections, i to jest nasza treść. Dzięki Statamic mamy kolekcje treści uporządkowane według typu - strony i blog są dostarczane z moim zestawem startowym. Jeśli otworzysz przykładowe wpisy dołączone do zestawu startowego, zobaczysz zawartość przeceny, ale nie taką, do jakiej jesteś przyzwyczajony. Statamic używa swoich edytorów do tworzenia i zapisywania danych w coś, co na początku może mieć trudności ze zrozumieniem. Jeśli jednak sprawdzisz tę zawartość, zauważysz, że rozbija ona każdy utworzony element domowy i ustawia typ i zawartość. Dzięki temu po renderowaniu można go łatwo aktualizować i zmieniać typy, aby na przykład zaktualizować akapit do nagłówka.

Jeśli zajrzymy do katalogu, zobaczymy pliki z innymi rozszerzeniami niż te, do resource/views których jesteśmy przyzwyczajeni w Laravel. Statamic ma swój silnik szablonów zwany porożem, który jest stosunkowo łatwy do nauczenia - ale od wersji 3 istnieje wsparcie dla używania Blade w Statamic. Możesz przeczytać dokumentację, aby zrozumieć, jak to osiągnąć, lub Spatie stworzył zestaw startowy Blade, którego możesz użyć.

Możesz edytować prawie każdy widok tutaj, ale uważaj, aby nie usuwać rzeczy, dopóki nie zrozumiesz ich zastosowania. Przyzwyczajenie się do poroża zajmuje trochę czasu, ale kiedy już się do tego przyzwyczaisz - nauczysz się kochać jego prostotę.

Aby to działało skutecznie, będziemy musieli zainstalować jeszcze jeden pakiet, aby przekształcić naszą stronę Statamic w stronę statyczną. Uruchom następujące polecenie, aby zainstalować pakiet:

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.

Nie to, że mamy "stronę internetową", którą chcemy wdrożyć, możemy zacząć myśleć o tym, jak chcielibyśmy to przenieść na Digital Ocean. Najlepszym wyborem do hostowania statycznej witryny, takiej jak ta na Digital Ocean, byłoby skorzystanie z ich platformy aplikacji. Umożliwi to połączenie repozytorium, podanie wszelkich zmiennych środowiskowych, których może być potrzebne, oraz opisanie kroków kompilacji wymaganych do utworzenia witryny statycznej.

Pomyśl o tym jako o pomocnym sposobie automatyzacji potoku ciągłej integracji/ciągłego wdrażania. Będziemy mieli automatyczne wdrożenia, ponieważ używamy App Platform. Ale jednocześnie będziemy budować naszą infrastrukturę przy użyciu kodu. Jeśli więc kiedykolwiek dojdziemy do punktu, w którym będziemy chcieli przełączyć się na sterownik bazy danych dla naszej zawartości, zmieniamy konfigurację - ponownie uruchamiamy proces instalacji i wdrażamy ponownie. Nie musimy logować się do naszego dostawcy chmury. Wszystko, co musimy zrobić, to ponownie skonfigurować i uruchomić.

Przyjrzyjmy się najpierw opcjom, jeśli chodzi o infrastrukturę jako kod. Terraform jest prawdopodobnie najbardziej znany i ma doskonałe wsparcie dla większości dostawców chmury. Największym problemem jest nauczenie się pisania skryptów terraform. Następnie jest Ansible, tradycyjnie bardziej narzędzie do automatyzacji IT z dodatkową możliwością zarządzania infrastrukturą. Jest ich wiele, każdy z jego zaletami i wadami. Ten samouczek skupi się na Pulumi, co pozwoli nam pracować z większością dostawców chmury i pisać naszą infrastrukturę w języku, z którym być może czujemy się bardziej komfortowo.

Do tej pory mamy stosunkowo standardową strukturę aplikacji Laravel, z kilkoma dodanymi bitami do zarządzania treścią w Statamic. Utworzymy nowy katalog w katalogu głównym naszego projektu o nazwie devops, w którym będzie mieszkał cały nasz kod Pulumi.

Otwórz ten nowy devops katalog w swoim terminalu, ponieważ tutaj spędzimy teraz większość naszego czasu. W tym momencie musisz zainstalować Pulumi, co, jeśli korzystasz z komputera Mac, jest prostym poleceniem parzenia:

brew install pulumi

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

Po zainstalowaniu Pulumi i znalezieniu się w katalogu devops możemy zainicjować ten projekt jako projekt pulumi. W tym celu użyjemy TypeScript jako języka do konfiguracji naszej infrastruktury - ponieważ obecnie nie ma wsparcia dla PHP. Uruchom następujące polecenie konsoli, aby uruchomić ten projekt.

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.

Polecenie poprosi o wprowadzenie nazwy i opisu projektu oraz nazwanie tego stosu. Stos jest spójnym sposobem projektowania infrastruktury, więc jeśli używasz podobnych konfiguracji dla wielu projektów, możesz użyć wstępnie zdefiniowanego stosu do wdrożenia.

Po uruchomieniu zainstaluje wymagane zależności i wszystko jest gotowe do rozpoczęcia.

Otwórzmy to index.ts , co stworzył dla nas Pulumi:Najpierw musimy zainstalować moduł węzła,

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

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

który pozwoli nam korzystać z pulumi z Digital Ocean. Możesz to zainstalować za pomocą:

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.

Spójrzmy, jak to może wyglądać, jeśli to wdrożymy, ponieważ Pulumi ma doskonałe polecenie, aby zobaczyć, jaką infrastrukturę zamierzamy zbudować i używać.

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.

Ustaw to za pomocą 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.

Wreszcie, po połączeniu wszystkich usług, możesz uruchomić jedno polecenie, a twoja infrastruktura - z połączeniem git, będzie gotowa i działa.

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!

W ten sposób przechodzisz od pomysłu do bloga, aby żyć bez opuszczania IDE.