Astro结合WordPress打造高性能静态网站教程

Astro 是一款现代化的前端框架，专为开发人员打造，能够快速高效地构建静态网站。它允许开发人员借助 React、Vue.js 和 Svelte 等主流 JavaScript 框架的强大功能，打造出动态用户界面，同时在构建过程中自动生成静态的 HTML、CSS 和 JavaScript 文件。当与作为无头内容管理系统（CMS）的 WordPress 结合使用时，Astro 可以实现后台 API 与前端代码的无缝集成，从而高效地开发出兼具动态内容的静态网站。这种组合方式具有诸多优势。

使用 Astro 和 WordPress 后端生成的静态网站拥有卓越的性能表现。这些网站可以直接从内容交付网络（CDN）提供内容，无需服务器端处理，从而显著提升加载速度，为用户带来更加流畅的浏览体验。本教程将详细指导您如何利用静态网站托管服务，结合 Astro 和 WordPress 后端，构建一个功能完善的静态网站。

WordPress 作为无头内容管理系统的角色

像 WordPress 这样的无头内容管理系统将内容管理与交付层进行分离。它允许后台专注于内容维护，而将前台展示交给不同的系统（例如 Astro）处理。WordPress 扮演着内容存储库的角色，向前端提供数据，前端则通过 API 向用户展示内容。这种架构不仅提高了内容的再利用性，使其能够应用于多种输出形式，还为 WordPress 用户保留了熟悉的内容管理体验。此外，前端与后端的分离也为前端设计和内容迁移提供了更大的灵活性。通过应用程序接口（API）实现可访问性，还能确保内容的长期可用性。

设置开发环境

为了开始开发，您需要完成以下三个关键步骤：

1. 安装 Astro
2. 建立 WordPress 网站
3. 创建 WordPress 暂存环境

前提条件

在开始本教程之前，请确保您已具备以下条件：

– 掌握 HTML、CSS 和 JavaScript 的基础知识
– 计算机上已安装 Node.js 和 npm（Node 包管理器）或 yarn
– Kinsta 账户（注册即可免费托管静态网站，并访问 MyKinsta 面板）

安装 Astro

为您的项目创建一个新的目录，并进入该目录。在终端中运行以下命令，使用 Astro 搭建项目框架：

“`bash
npm create astro@latest
“`

此步骤将引导您完成配置提示，请根据实际需求进行设置。项目创建成功后，运行以下命令启动本地开发服务器：

“`bash
npm run dev
“`

Astro 将在 http://localhost:4321/ 上启动本地开发服务器，标志着安装成功。

建立 WordPress 网站

以 Kinsta 为例，请按照以下步骤创建 WordPress 网站：

1. 在 MyKinsta 面板上点击 “WordPress Sites”，然后选择 “Create a site”。
2. 选择 “Install WordPress” 选项，点击 “Continue”。
3. 输入站点名称，选择数据中心位置，点击 “Continue”。
4. 填写所有必要信息，点击 “Continue”。

网站创建完成后，您将看到 “Your site has been created!” 的提示信息。

创建 WordPress 暂存环境

在 Kinsta 上，每个 WordPress 站点都可以创建一个独立的免费暂存环境，非常适合测试新版本、插件、代码等开发工作。以下是创建暂存环境的步骤：

1. 在菜单栏点击 “Live”，然后选择 “Create New Environment”。
2. 选择 “Standard environment”，点击 “Continue”。
3. 点击 “Clone an existing environment”，输入环境名称，选择要克隆的 “Live” 环境，点击 “Continue”。

部署完成后，您可以在 “Live” 菜单下找到新创建的暂存环境。

将 WordPress 与 Astro 集成

将 WordPress 与 Astro 集成主要有两种方法：REST API 和 GraphQL。本指南将采用 GraphQL 方法。具体步骤如下：

安装 WPGraphQL

首先，在 WordPress 网站上安装 WPGraphQL 插件，然后使用 GraphQL 将 Astro 连接到该网站。在 MyKinsta 仪表板上，选择您的 WordPress 网站，点击 “Staging”，然后在右上角打开 WP 管理后台。输入创建网站时使用的凭证，点击左侧导航栏的 “Plugins”，选择 “Add New Plugin”，搜索 “WPGraphQL”，点击 “Install New” 并激活插件。

测试 WPGraphQL 插件

为了验证插件是否正常运行，打开导航栏的 “GraphQL” 菜单，点击 “GraphiQL IDE”。在 GraphiQL IDE 中输入以下代码，点击左上角的 “Run” 执行查询：

“`graphql
{ posts { nodes { slug excerpt title } } }
“`

该查询将检索 WordPress 网站中文章的 slugs、excerpts 和 titles。在 GraphiQL IDE 的左侧，您将看到查询返回的帖子列表。您的 WordPress GraphQL 端点可通过 https://your_wordpress_staging_url/graphql 访问。

注意：完成所有测试并确认网站性能和功能无误后，请将 WordPress 网站从暂存环境推送到实时环境。

将 Astro 连接到 WordPress

按照以下步骤将 Astro 连接到 WordPress：

1. 在 Astro 项目的 src 文件夹中创建一个名为 “graphql” 的文件夹。
2. 在 graphql 文件夹中创建一个名为 “wordPressQuery.ts” 的文件。
3. 在 wordPressQuery.ts 文件中输入以下代码，并将 https://your_wordpress_staging_url/graphql 替换为您的 WordPress 暂存 URL：

“`typescript
interface gqlParams {
query: string;
variables?: object;
}

export async function wpquery({ query, variables = {} }: gqlParams) {
const res = await fetch(‘https://your_wordpress_staging_url/graphql’, {
method: “post”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify({ query, variables }),
});
if (!res.ok) {
console.error(res);
return {};
}
const { data } = await res.json();
return data;
}
“`

这段代码定义了一个 gqlParams 接口和一个异步函数 wpquery，方便对 WordPress 网站进行 GraphQL 查询。

使用 Astro 和 WordPress 开发网站

要在 Astro 中创建一个新的静态页面，请在 src/pages 目录中创建一个名为 “blog.astro” 的文件，并输入以下代码：

“`astro
—
import Layout from “../layouts/Layout.astro”;
import { wpquery } from “../graphql/wordPressQuery”;
const data = await wpquery({
query: ` { posts{ nodes{ slug excerpt title } } } `,
});
—
Blog Posts
{data.posts.nodes.map((post: any) => ( ))}
“`

这段代码展示了如何使用 wpquery 函数通过 GraphQL 从 WordPress 网站获取数据，并在 Astro 网站上展示。启动本地开发服务器（npm run dev），访问 http://localhost:4321/blog，即可查看最新的 WordPress 博客文章。

处理单个博客文章的动态路由

要实现单个博客文章的动态路由，您需要结合 Astro 的动态路由功能和 WordPress GraphQL 的查询变量。通过将文章 ID 或标题作为查询变量，您可以动态生成每篇博客文章的页面内容，从而为用户提供更加个性化的浏览体验。

在 Kinsta 上部署静态网站

将代码推送到您喜欢的 Git 提供商（如 Bitbucket、GitHub 或 GitLab）。然后，按照以下步骤将静态网站部署到 Kinsta：

1. 在 MyKinsta 面板上点击 “Static Sites”，选择 “Add site”。
2. 授权 Kinsta 使用您的 Git 提供商。
3. 选择一个 GitHub Repository 和一个 Default branch。
4. 输入静态网站的 Display name，勾选 “Automatic deployment on the commit”。
5. 点击 “Continue”。
6. 在 “Build settings” 部分，Kinsta 会自动完成所有字段。保持默认设置，点击 “Create Site”。

访问 Astro 网站，方法是在已部署网站 “概览” 页面上显示的域名 URL。您可以通过 https://your_kinsta_site_url/blog 访问博客文章。

小结

使用 Astro 和 WordPress 可以实现更多创新功能。WordPress API 可用于访问网站中的各种数据，与 Astro 结合使用时，可以创建出独特的解决方案。您对无头 WordPress 和 Astro 有什么看法？是否探索过它们在创建独特解决方案方面的潜力？欢迎在评论区分享您的经验。