从想法到博客,到无需离开 IDE 即可上线
发布时间 作者: Steve McDougall
内容管理是一个非常主观的主题,每个人都有自己喜欢的平台。Statamic 是一个很棒的内容管理包,您可以将其添加到 Laravel 应用程序中。
在本教程中,我将向您展示如何从一个新的 Statamic 网站开始,并将其从一个博客的想法转变为使用基础设施即代码将其作为静态网站部署到 Digital Ocean。这样您就可以坐下来,放松身心,轻松部署。
我将逐步介绍如何创建一个新的 Statamic 网站,但您也可以将其添加到您可能已经拥有的任何 Laravel 应用程序中。
安装 Statamic 网站的最佳方法是使用他们的 CLI 工具,因此请运行以下命令来安装此全局 CLI 工具
composer global require statamic/cli
安装完成后,您可以运行 statamic
来确保它正常工作。我们将使用一个入门套件构建一个基本博客,因为它可以加快整个过程。首先,打开您的终端,并导航到您希望此项目所在的目录。运行以下控制台命令来创建您的新 Statamic 博客
statamic new blog
此时,系统将询问您是想要从一个空白网站开始,还是想要使用入门套件。我强烈建议您考虑使用入门套件 - 因为 Statamic 社区创建了一些很棒的资源供您使用。在本教程中,我将使用 Starter's Creek,这是一个使用 tailwindcss 的博客入门套件。
安装完成后,系统将要求您创建一个管理员用户。这将是您希望能够访问控制面板并管理网站本身的用户。这些凭据存储在您项目中的磁盘上的 YAML 中,但密码本身将被散列。
根据您在本地运行 PHP 应用程序时使用的是什么,您现在可以运行网站并浏览入门套件附带的示例内容。
如果我们看一下目录结构,我们会看到一些我们不熟悉的目录。在我们项目的根目录下,我们会看到一个名为 content
的目录,我们的网站的配置选项和实际内容将存储在那里。Statamic 是一个扁平优先的 CMS,它使用扁平文件来存储您的内容。有一些选项可以将其迁移到数据库驱动的 CMS - 并且文档非常适合向您展示需要采取的步骤。
但是,我们不会这样做,因为我们想专注于将静态网站部署到 Digital Oceans App Platform。
在 content
内部,我们有 collections
,这是我们的内容。在 Statamic 中,我们有按类型组织的内容集合 - 页面和博客包含在我的入门套件中。如果您打开入门套件附带的任何示例条目,您将看到 Markdown 内容,但与您习惯看到的不同。Statamic 使用其编辑器将您的数据创建并保存到您可能一开始很难理解的内容中。但是,如果您检查此内容,您会注意到它会分解创建的每个 DOM 元素,并设置类型和内容。因此,在渲染时,它可以轻松地更新和更改类型,例如,将段落更新为标题。
如果我们看一下 resource/views
目录,我们会看到一些文件,它们的文件扩展名与我们在 Laravel 中习惯看到的不同。Statamic 有自己的模板引擎,叫做 antlers,它相对容易学习 - 但是从版本 3 开始,Statamic 支持使用 Blade。您可以阅读文档以了解如何实现这一点,或者 Spatie 创建了一个您可以使用的 Blade 入门套件。
您可以编辑这里几乎所有视图,但请小心,不要在了解其用途之前删除任何内容。需要花一些时间才能习惯 antlers 模板,但一旦您习惯了它 - 您就会学会喜欢它的简洁性。
为了使这有效,我们需要安装另一个包,将我们的 Statamic 网站变成一个静态网站。运行以下命令来安装此包
composer require statamic/ssg
这将安装该包并发布配置文件。您可以在此配置文件中稍微自定义静态网站的构建。但是,默认设置将适用于此项目。我们的网站现在可以构建为静态网站,这意味着我们可以研究部署。
现在我们有了要部署的“网站”,我们可以开始考虑如何将其部署到 Digital Ocean 上。在 Digital Ocean 上托管像这样的静态网站的最佳选择是使用他们的 App Platform。它允许您连接一个仓库,提供您可能需要的任何环境变量,并描述创建静态网站所需的构建步骤。
可以将其视为一种有用的自动化 CI/CD 管道的方式。由于我们使用的是 App Platform,因此我们将实现自动部署。但同时,我们也会使用代码构建我们的基础设施。因此,如果我们最终想切换到数据库驱动程序来管理我们的内容,我们可以更改配置 - 重新运行设置过程,然后重新部署。我们不必登录我们的云提供商。我们所要做的就是重新配置并运行。
让我们首先看看基础设施即代码方面的选项。Terraform 可能最为人所知,并且对大多数云提供商都有很好的支持。最大的问题是如何学习编写 Terraform 脚本。接下来,还有 Ansible,传统上它更多的是一种 IT 自动化工具,同时还具有管理基础设施的功能。有很多这样的工具,每个工具都有自己的优点和缺点。本教程将重点介绍 Pulumi,它允许我们使用大多数云提供商,并使用我们可能更熟悉的一种语言编写我们的基础设施。
到目前为止,我们有一个相对标准的 Laravel 应用程序结构,其中添加了一些用于在 Statamic 中管理内容的额外内容。我们将在项目的根目录中创建一个名为 devops
的新目录,所有 Pulumi 代码将存储在那里。
在您的终端中打开这个新的 devops
目录,因为我们现在将在那里花费大部分时间。您需要在此时安装 Pulumi,如果您使用的是 Mac,则只需运行一个简单的 brew 命令即可
brew install pulumi
但是,文档 提供了有关在您的机器上安装 Pulumi 的详细说明(如果您不是 Mac 用户)。
安装完 Pulumi 并在您的 devops
目录中,我们可以将此项目初始化为一个 Pulumi 项目。为此,我们将使用 TypeScript 作为配置基础设施的语言 - 因为目前不支持 PHP。运行以下控制台命令来启动此项目。
pulumi new typescript
然后,该命令将要求您输入您的 Pulumi API 令牌,因为您需要使用帐户才能使用它。他们提供了一个很棒的免费层级,您不太可能在大多数像这样的网站上耗尽免费部署配额。
然后,该命令将要求您输入您的项目名称和描述,并为该堆栈命名。堆栈是一种设计基础设施的一致方式,因此,如果您对许多项目使用类似的设置,您可以使用预定义的堆栈进行部署。
运行完后,它将安装所需的依赖项,你就可以开始使用。
让我们打开 Pulumi 为我们创建的 index.ts
文件。
import * as pulumi from "@pulumi/pulumi";
这是一个很好的起点,我们可以开始设计我们的基础设施,所以让我们开始吧。
我们首先需要安装一个节点模块,它允许我们使用 Pulumi 与 Digital Ocean 进行交互。你可以使用以下命令进行安装:
npm install @pulumi/digitalocean
现在我们可以回到查看我们的基础设施。
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", }], }});
我们正在创建一个新的 Digital Ocean App,并告诉它我们希望如何在他们的平台上构建和存储这个应用的规格。包括构建命令和输出目录。我们还告诉他们仓库的 URL,这样它就可以轻松地克隆并在我们通过 GitHub 推送更新时重新部署。
让我们看看如果我们部署这个应用,它会是什么样子,因为 Pulumi 有一个很棒的命令可以预览我们即将构建和使用的基础设施。
pulumi preview
这应该会给你类似以下的输出:
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
从这个输出中我们知道,我们将创建两个资源,一个在 Oulumi 上的堆栈和一个在 Digital Ocean 上的静态网站。为了让我们能够做到这一点,我们需要进入我们的 Digital Ocean 账户,生成一个 API 令牌,以便 Pulumi 可以创建和设置我们的基础设施。
使用 Pulumi CLI 设置它:
pulumi config set digitalocean:token api-token-here --secret
下一步是确保 Digital Ocean 可以访问我们的 GitHub 仓库。你可以在 Digital Ocean App Platform 控制台中完成此操作。
最后,一旦所有服务都连接起来,你就可以运行一个命令,你的基础设施(带有 git 连接)就会启动并运行。
pulumi up
这将检查需要应用哪些更改,然后你可以确认是否要创建新的资源。然后,一旦批准,你的资源就会被创建,你的网站也将上线!
这就是你如何从想法到博客到上线,而无需离开你的 IDE。
《Laravel 新闻》的技术作家, Treblle 的开发者倡导者。 API 专家,资深 PHP/Laravel 工程师。 YouTube 直播主。