註冊
WordPress開發

使用WordPress和Astro建立靜態網站

WBOLT_COM
816
0

使用WordPress和Astro建立靜態網站

Astro 是一個現代前端框架，可幫助開發人員快速、高效地構建靜態網站。藉助 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

  1. 為你的專案新建一個目錄並導航進入。
  2. 在終端執行以下命令，為新專案搭建 scaffold：
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    npm create astro@latest
    npm create astro@latest
    npm create astro@latest

    此步驟會產生配置提示。請根據需要進行設定。

    配置新 Astro 專案的說明配置新 Astro 專案的說明。

  3. 專案建立成功後，執行 npm run dev 在 http://localhost:4321/ 上啟動本地開發伺服器。Astro 安裝成功Astro 安裝成功。

建立 WordPress 網站

以  Kinsta 為例，請按照以下步驟在 Kinsta 上建立 WordPress 網站。

  1. 在 MyKinsta 面板上單擊 WordPress Sites，然後 Create a site。
  2. 選擇 Install WordPress 選項，然後單擊 Continue。
  3. 提供 Site name，選擇資料中心位置，然後單擊 Continue。
  4. 提供所有其他資訊，然後單擊 Continue。
  5. 網站建立完成後，您應該會看到 “Your site has been created!” 的資訊。

建立 WordPress 暫存環境

在 Kinsta 安裝的每個 WordPress 都可以選擇建立一個獨立於實際生產網站的免費暫存環境。這非常適合測試新的 WordPress 版本、外掛、程式碼和一般開發工作。

在 Kinsta 上建立 WordPress 暫存環境的步驟如下。

  1. 在選單欄上單擊 “Live（執行）”，然後單擊 “Create New Environment（建立新環境）”。WordPress 暫存環境WordPress 暫存環境。
  2. 選擇 Standard environment，然後單擊 Continue。
  3. 單擊 “Clone an existing environment“，提供 Environment name，為要克隆的環境選擇 “Live“，然後單擊 “Continue“。
  4. 部署完成後，您可以在 “Live” 選單上找到 WordPress 暫存環境。成功建立暫存環境
    成功建立暫存環境。

將 WordPress 與 Astro 整合

將 WordPress 與 Astro 整合有兩種主要方法：REST API 和 GraphQL。本指南使用 GraphQL 方法。

要將 WordPress 與 Astro 整合，您必須：

  • 安裝 WPGraphQL。
  • 將 Astro 連線到 WordPress。

安裝 WPGraphQL

首先，在 WordPress 網站上安裝 WPGraphQL 外掛，然後再使用 GraphQL 將 Astro 連線到該網站。

  1. 在 MyKinsta 儀表板上，選擇您的 WordPress 網站。
  2. 在選單欄上單擊 “Staging“，然後在右上角單擊開啟 WP 管理後臺網站資訊頁面
    網站資訊頁面。
  3. 提供建立 WordPress 網站時使用的憑證。
  4. 單擊左側導航欄上的 Plugins 選單。
  5. 單擊 “Add New Plugin” 新增 WPGraphQL 外掛。
  6. 搜尋 “WPGraphQL”，單擊 “Install New（新增新外掛）“安裝 WPGraphQL 外掛，然後單擊 “Activate（啟用）“。安裝 WPGraphQL 外掛安裝 WPGraphQL 外掛。
  7. 要測試安裝的 WPGraphQL 外掛是否按預期執行，請開啟導航欄上的 GraphQL 選單並單擊 GraphiQL IDE。
  8. 在 GraphiQL IDE 中使用以下程式碼，然後單擊左上角的 “Run” 來執行 GraphQL 查詢：
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    {
    posts {
    nodes {
    slug
    excerpt
    title
    }
    }
    }
    { posts { nodes { slug excerpt title } } }
    {
posts {
nodes {
slug
excerpt
title
}
}
}

    該 GraphQL 查詢可有效地檢索 WordPress 網站中文章的slugs, excerpts, 和 titles 。

    執行 GraphQL 查詢執行 GraphQL 查詢。
    在 GraphiQL IDE 的左側，您可以看到通過執行 GraphQL 查詢返回的帖子列表。你的 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。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    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;
    }
    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; }
    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 開發網站

  1. 要在 Astro 中建立一個新的靜態頁面，請在 src/pages 目錄中建立一個名為 blog.astro 的檔案。
  2. 在新建立的檔案中貼上以下程式碼：
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    ---
    import Layout from "../layouts/Layout.astro";
    import { wpquery } from "../graphql/wordPressQuery";
    const data = await wpquery({
    query: `
    {
    posts{
    nodes{
    slug
    excerpt
    title
    }
    }
    }
    `,
    });
    ---
    <Layout title="Astro-WordPress Blog Posts">
    <main>
    <h1><span class="text-gradient">Blog Posts</span></h1>
    {
    data.posts.nodes.map((post: any) => (
    <>
    <h2 set:html={post.title} />
    <p set:html={post.excerpt} />
    </>
    ))
    }
    </main>
    </Layout>
    <style>
    main {
    margin: auto;
    padding: 1rem;
    width: 800px;
    max-width: calc(100% - 2rem);
    color: white;
    font-size: 20px;
    line-height: 1.6;
    }
    h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin-bottom: 1em;
    }
    </style>
    --- import Layout from "../layouts/Layout.astro"; import { wpquery } from "../graphql/wordPressQuery"; const data = await wpquery({ query: ` { posts{ nodes{ slug excerpt title } } } `, }); --- <Layout title="Astro-WordPress Blog Posts"> <main> <h1><span class="text-gradient">Blog Posts</span></h1> { data.posts.nodes.map((post: any) => ( <> <h2 set:html={post.title} /> <p set:html={post.excerpt} /> </> )) } </main> </Layout> <style> main { margin: auto; padding: 1rem; width: 800px; max-width: calc(100% - 2rem); color: white; font-size: 20px; line-height: 1.6; } h1 { font-size: 4rem; font-weight: 700; line-height: 1; text-align: center; margin-bottom: 1em; } </style>
    ---
import Layout from "../layouts/Layout.astro";
import { wpquery } from "../graphql/wordPressQuery";
const data = await wpquery({
query: `
{
posts{
nodes{
slug
excerpt
title
}
}
}  
`,
});
---
<Layout title="Astro-WordPress Blog Posts">
<main>
<h1><span class="text-gradient">Blog Posts</span></h1>
{
data.posts.nodes.map((post: any) => (
<>
<h2 set:html={post.title} />
<p set:html={post.excerpt} />
</>
))
}
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1rem;
width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
h1 {
font-size: 4rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
}
</style>

    這段程式碼演示瞭如何使用 wpquery 函式使用 GraphQL 從 WordPress 網站獲取資料，並將其呈現在 Astro 網站上。

  3. 使用 npm run dev 啟動本地開發伺服器，並在 Astro 網站上檢視最新的 WordPress 部落格文章，網址是 http://localhost:4321/blog。Astro 專案顯示 WordPress 文章Astro 專案顯示 WordPress 文章。

要處理單個部落格文章的動態路由，您需要結合使用 Astro 的動態路由和 WordPress GraphQL 的查詢變數。通過將文章 ID 或標題作為查詢變數，您可以動態生成每篇部落格文章的頁面內容。這樣，您就可以在網站上獲得更加個性化的使用者體驗。

在 Kinsta 上部署靜態網站

現在，將程式碼推送到您喜歡的 Git 提供商（Bitbucket、GitHub 或 GitLab）。然後，按照以下步驟將靜態網站部署到 Kinsta：

  1. 在 MyKinsta 面板中，單擊 Static Sites，然後 Add site。
  2. 用 Git 提供商授權 Kinsta。
  3. 選擇一個 GitHub Repository 和一個 Default branch。提供靜態網站的 Display name，並選擇 “Automatic deployment on the commit” 框。這樣就能自動部署對版本庫做出的所有新更改。單擊 Continue。
  4. 在 “Build settings” 部分，Kinsta 會自動完成所有欄位。保持原樣，然後單擊 Create Site。
  5. 訪問 Astro 網站，方法是訪問已部署網站 “概覽 “頁面上顯示為域的 URL。您可以通過 https://your_kinsta_site_url/blog 訪問部落格文章。

小結

使用 Astro 和 WordPress 可以做更多事情。WordPress API 可用於訪問網站中的各種資料，並與 Astro 一起建立獨特的用例。

您對無頭 WordPress 和 Astro 有什麼看法？您探索過它們在建立獨特解決方案方面的潛力嗎？請在下面的評論區分享您的經驗。

Astro 無頭WordPress 靜態網站
評論收藏微海報
分享
分享到

相關的

評論留言

馬上學習

文章目錄

  • WordPress 作為無頭內容管理系統的作用
  • 設定開發環境
  • 前提條件
  • 安裝 Astro
  • 建立 WordPress 網站
  • 建立 WordPress 暫存環境
  • 將 WordPress 與 Astro 整合
  • 安裝 WPGraphQL
  • 將 Astro 連線到 WordPress
  • 使用 Astro 和 WordPress 開發網站
  • 在 Kinsta 上部署靜態網站
  • 小結