Astro 是一个现代前端框架，可帮助开发人员快速、高效地构建静态网站。借助 Astro，开发人员可以利用 React、Vue.js 和 Svelte 等现代 JavaScript 框架的强大功能来创建动态用户界面，同时在构建过程中生成静态 HTML、CSS 和 JavaScript 文件。
当与作为无头内容管理系统（CMS）的 WordPress 相结合时，Astro 可以实现后台 API 和前端代码的无缝集成，从而高效地开发具有动态内容的静态网站。这种方法有几个好处。
使用 Astro 和 WordPress 后端生成的静态网站具有卓越的性能。它们可以直接从内容交付网络（CDN）提供服务，无需服务器端处理，从而加快了加载速度，带来更流畅的用户体验。
本教程将指导您使用静态网站托管服务托管的 Astro 和 WordPress 后端来建立静态网站。
像WordPress这样的无头内容管理系统将内容管理和交付层分开。它可以让后台维护内容，而由不同的系统（如 Astro）处理前台。
WordPress 充当内容存储库，向前端提供数据，而前端则通过 API 向用户显示内容。这种架构可以将内容重新用于多种输出，从而提高灵活性，为 WordPress 用户提供熟悉的内容管理体验。
前端与后端分离也为前端设计和内容迁移提供了更大的灵活性。此外，通过应用程序接口（API）实现可访问性还能保护内容的未来性。
您必须遵循三个步骤来设置环境：
- 安装 Astro。
- 建立一个 WordPress 网站。
- 创建 WordPress 暂存环境。
要学习本教程，请确保您具备以下条件：
- 对 HTML、CSS 和 JavaScript 有基本了解
- 计算机上安装了 Node.js 和 npm（Node 包管理器）或 yarn
- Kinsta 账户。注册以免费托管一个静态网站，并访问 MyKinsta 面板。
- 为你的项目新建一个目录并导航进入。
- 在终端运行以下命令，为新项目搭建 scaffold：
此步骤会产生配置提示。请根据需要进行设置。
- 在 MyKinsta 面板上单击 WordPress Sites，然后 Create a site。
- 选择 Install WordPress 选项，然后单击 Continue。
- 提供 Site name，选择数据中心位置，然后单击 Continue。
- 提供所有其他信息，然后单击 Continue。
- 网站创建完成后，您应该会看到 “Your site has been created!” 的信息。
在 Kinsta 安装的每个 WordPress 都可以选择建立一个独立于实际生产网站的免费暂存环境。这非常适合测试新的 WordPress 版本、插件、代码和一般开发工作。
要将 WordPress 与 Astro 集成，您必须：
- 安装 WPGraphQL。
- 将 Astro 连接到 WordPress。
要将 Astro 连接到 WordPress，请按照以下说明操作：
- 在 Astro 项目的 src 文件夹中创建名为 graphql 的文件夹。
- 在 graphql 文件夹中创建 wordPressQuery.ts 文件。
- 在 wordPressQuery.ts 文件中使用以下代码。确保将 替换为您的 WordPress 暂存 URL。
这段代码定义了一个接口 和一个异步函数 ，以方便对 WordPress 网站进行 GraphQL 查询。
- 要在 Astro 中创建一个新的静态页面，请在 src/pages 目录中创建一个名为 blog.astro 的文件。
- 在新创建的文件中粘贴以下代码：
现在，将代码推送到您喜欢的 Git 提供商（Bitbucket、GitHub 或 GitLab）。然后，按照以下步骤将静态网站部署到 Kinsta：
- 在 MyKinsta 面板中，单击 Static Sites，然后 Add site。
- 用 Git 提供商授权 Kinsta。
- 选择一个 GitHub Repository 和一个 Default branch。提供静态网站的 Display name，并选择 “Automatic deployment on the commit” 框。这样就能自动部署对版本库做出的所有新更改。单击 Continue。
- 在 “Build settings” 部分，Kinsta 会自动完成所有字段。保持原样，然后单击 Create Site。
- 访问 Astro 网站，方法是访问已部署网站 “概览 “页面上显示为域的 URL。您可以通过 访问博客文章。
使用 Astro 和 WordPress 可以做更多事情。WordPress API 可用于访问网站中的各种数据，并与 Astro 一起创建独特的用例。