解鎖極致效能：Headless Ghost CMS 與 Vercel 整合的藍圖

Aiko · March 29, 2025, 9:59am

如何設置 Headless Ghost CMS 與 Vercel 整合

在這篇全面詳細的教程中，我將帶您逐步了解如何設置 Headless Ghost CMS 與 Vercel 整合，創建一個高效的 JAMstack 部落格網站。這種架構組合利用了 Ghost 強大的內容管理功能和 Vercel 卓越的前端託管服務，讓您獲得兩者的最佳優勢。

什麼是 Headless CMS？

Headless CMS 是指只使用內容管理系統的後端來管理資料，而不使用其自帶的前端展示層。在這種架構中，Ghost 只負責內容管理，而前端則使用 Next.js 等框架通過 API 獲取內容並展示。

第一部分：設置 Ghost CMS

Ghost CMS 需要一個伺服器來運行。您有幾個選擇：

選項 1：使用 DigitalOcean 托管 Ghost

創建 DigitalOcean Droplet
- 註冊 DigitalOcean 帳戶
- 創建一個新的 Droplet (推薦最低配置：2GB RAM)
- 選擇 Ubuntu 作為操作系統

安裝 Ghost

通過 SSH 連接到您的 Droplet

執行以下命令更新伺服器：

sudo apt-get update
sudo apt-get upgrade -y

創建一個非 root 用戶（不要使用 ‘ghost’ 作為用戶名，會與 Ghost CLI 衝突）：
```
sudo adduser ghostuser
sudo usermod -aG sudo ghostuser
su - ghostuser
```

安裝必要的軟件：

sudo apt-get install nginx mysql-server -y

配置 MySQL：

sudo mysql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'YOUR_PASSWORD';
exit;

安裝 Node.js（Ghost 支持的版本）：

curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash
sudo apt-get install -y nodejs

安裝 Ghost CLI：
```
sudo npm install ghost-cli@latest -g
```

創建 Ghost 安裝目錄：

sudo mkdir -p /var/www/yoursitename
sudo chown ghostuser:ghostuser /var/www/yoursitename
sudo chmod 775 /var/www/yoursitename
cd /var/www/yoursitename

安裝 Ghost：
```
ghost install
```
在安裝過程中，您需要回答一些問題（網站 URL、是否設置 SSL 等）。

選項 2：使用 Render 托管 Ghost

在 Render 上設置 Ghost
- 在 GitHub 上 fork render-examples/ghost 倉庫
- 在 Render 上創建一個新的 Web Service
- 將環境設置為 Docker 並為您的服務命名
- Render 會自動部署 Ghost。

完成安裝後，您需要獲取 Ghost Content API 密鑰：

登錄到 Ghost Admin 面板 (通常是 https://您的網域/ghost)
導航到 Settings > Integrations
點擊 “Add custom integration”
為您的集成命名（例如 “Next.js Frontend”）
創建後，您將獲得 Content API Key 和 API URL，請保存這些信息。

第二部分：設置 Next.js 項目

創建 Next.js 應用

npx create-next-app ghost-nextjs-blog
cd ghost-nextjs-blog

安裝 Ghost Content API 包
```
npm install @tryghost/content-api
```

設置環境變量

在項目根目錄創建 .env.local 文件：

GHOST_API_URL=https://您的ghost網站地址
GHOST_API_KEY=您的Content API Key

創建 Ghost API 客戶端

在項目中創建 ghost.js 文件：

const GhostContentAPI = require('@tryghost/content-api');

const api = new GhostContentAPI({
  url: process.env.GHOST_API_URL,
  key: process.env.GHOST_API_KEY,
  version: 'v4'
});

export default api;

創建顯示文章的頁面

在 pages 文件夾中創建 posts.js：

import api from '../ghost';

export async function getStaticProps() {
  const posts = await api.posts.browse();
  return {
    props: { posts },
    revalidate: 60
  };
}

function Posts({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.html }} />
        </div>
      ))}
    </div>
  );
}

export default Posts;

創建單篇文章頁面

在 pages 文件夾中創建 post/[slug].js 來處理單篇文章：

import api from '../../ghost';

export async function getStaticPaths() {
  const posts = await api.posts.browse();
  return {
    paths: posts.map(post => ({ params: { slug: post.slug } })),
    fallback: 'blocking'
  };
}

export async function getStaticProps({ params }) {
  const post = await api.posts.read({ slug: params.slug });
  return {
    props: { post },
    revalidate: 60
  };
}

function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </div>
  );
}

export default Post;

第三部分：將 Next.js 應用部署到 Vercel

將代碼推送到 GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/您的用戶名/您的倉庫名.git
git push -u origin main

部署到 Vercel
- 註冊或登錄 Vercel 帳戶
- 連接您的 GitHub 帳戶
- 點擊 “New Project”
- 選擇您的 GitHub 倉庫
- Vercel 會自動檢測它是一個 Next.js 項目並配置構建設置
- 在設置中添加環境變量（與您的 .env.local 中相同）：
  - GHOST_API_URL
  - GHOST_API_KEY
- 點擊 “Deploy”

第四部分：設置 Webhook 以自動重新部署

當您在 Ghost 中更新內容時，您希望 Vercel 能夠自動重建您的網站：

在 Vercel 中獲取 Webhook URL
- 在 Vercel 控制面板中，轉到您的項目
- 轉到 Settings > Git
- 滾動到 “Deploy Hooks” 部分
- 創建一個新的 hook 並複製 URL
在 Ghost 中設置 Webhook
- 登錄到 Ghost Admin
- 轉到 Settings > Integrations
- 選擇您之前創建的集成
- 滾動到 “Webhooks” 部分
- 點擊 “Add webhook”
- 選擇 “Site” 作為事件
- 粘貼您的 Vercel webhook URL
- 保存 webhook

最佳實踐與注意事項

Ghost 定價考慮
- 如果只需要 Headless CMS 功能，可以考慮自託管 Ghost，因為 Ghost Pro 的基本計劃 ($9/月) 不支持自定義集成。
- 自託管 Ghost 可以使用像 DigitalOcean 這樣的 VPS，月費約 $5。
性能優化
- 使用 Next.js 的 Incremental Static Regeneration 功能來平衡構建時間和內容更新。
- 考慮使用 CDN 來優化全球分發。
開發流程
- 在本地開發時，您可以通過 ghost install local 命令在本地安裝 Ghost 進行測試。
- 使用 next dev 命令在本地運行 Next.js 應用。

結論

通過這個設置，您擁有了一個功能強大的 JAMstack 部落格，其中 Ghost CMS 負責內容管理，Next.js 和 Vercel 負責前端展示和部署。這種架構提供了卓越的性能、安全性和擴展性。

最適合的方案取決於您的具體需求和預算。如果您是開發人員或技術愛好者，自託管 Ghost 是一個經濟實惠的選擇。如果您偏好更無憂的解決方案，Ghost Pro 加上 Vercel 可能更適合，儘管成本會更高。

無論您選擇哪種方案，結合 Ghost 的內容管理能力和 Next.js 的前端靈活性，您都能建立出一個現代化、高性能的部落格或內容網站。

需要專業的數位轉型方案嗎？Tenten.co 擁有豐富的 Headless CMS 和現代網站架構經驗，能為您的企業建立高效能、易於管理的數位體驗。我們的專家團隊提供從 Ghost CMS 設置到 Vercel 部署的全方位服務，幫助您的網站獲得最佳性能和使用者體驗。立即預約免費諮詢會議，探討如何將您的網站提升到新的高度！

Aiko · March 29, 2025, 10:01am

設置 Ghost CMS 與 Vercel 整合的主要挑戰

將 Ghost CMS 與 Vercel 整合創建 headless CMS 是現代網絡開發的強大解決方案，但過程中存在多項挑戰。以下是開發者經常面臨的主要障礙：

1. 托管 Ghost CMS 後端

Ghost CMS 基於 Node.js 構建，需要一個專用後端伺服器。而 Vercel 主要針對前端應用和無伺服器函數進行優化，不適合直接托管 Ghost。開發者必須使用外部托管服務，如 DigitalOcean、Render 或 Ghost(Pro) 來設置後端，這增加了複雜性和成本。

2. API 整合問題

將 Ghost 的 Content API 內容提取到托管在 Vercel 上的 Next.js 前端可能會遇到挑戰，包括：

Ghost API 配置中的速率限制可能會限制數據訪問。
如果 Ghost CMS 的托管提供商速度慢或不可靠，可能會在數據獲取過程中出現超時錯誤。
需要適當設置環境變量 (GHOST_API_URL 和 GHOST_API_KEY) 以確保安全無縫的 API 通信。

3. 增量靜態再生 (ISR) 錯誤

Next.js 的 ISR 功能可以實現高效的內容更新，但有時由於 Vercel 和 Ghost 後端之間的連接問題而失敗。這些錯誤可能需要微調 API 調用或在 Ghost 配置中提高訪問限制。

4. 成本問題

Vercel 為小規模項目提供免費托管，但對於高流量網站，成本可能會迅速增加。開發者可能需要優化應用或考慮替代托管解決方案來有效管理成本。

5. 主題定制

對不熟悉 Handlebars.js 模板的開發者來說，在 Ghost CMS 中定制主題可能是個障礙。雖然有免費和付費主題可用，但根據特定需求定制它們通常需要大量工作。

6. 自動化的 Webhook 設置

要實現 Ghost CMS 到 Vercel 的自動內容更新，開發者需要在兩個平台上配置 webhook。如果 webhook URL 配置錯誤或在 Vercel 上觸發重建時遇到問題，這個過程可能會很棘手。

7. 無伺服器架構中的冷啟動

與任何托管在 Vercel 上的無伺服器應用一樣，冷啟動可能會導致從 Ghost CMS 獲取的動態內容加載延遲。這可能會影響用戶體驗，特別是對於高流量網站。

見解與建議

使用 Ghost(Pro) 等托管服務或 DigitalOcean 等可靠的托管提供商，實現更流暢的後端設置。
優化 API 調用和緩存策略，以最小化速率限制問題並確保更快的數據獲取。
當在 Vercel 上擴展時，仔細評估成本；如果預算有限，可以考慮 Netlify 或 Google Cloud Run 等替代方案。
通過確保 Vercel 和 Ghost CMS 之間的強健連接，明智地利用 Next.js 的 ISR 功能。
對於主題定制，可以探索 Ghost 的市場或在需要高級修改時聘請專業設計師。

通過主動解決這些挑戰，開發者可以使用 Ghost CMS 和 Vercel 構建無縫且可擴展的 JAMstack 博客。

使用 Ghost CMS 與 Vercel 時優化性能的最佳實踐

將 Ghost CMS 與 Vercel 整合可以提供高性能、可擴展的 JAMstack 設置，但優化性能需要仔細關注架構的各個方面。以下是確保您的 Ghost 驅動網站在 Vercel 上高效運行的最佳實踐：

1. 利用增量靜態再生 (ISR)

Vercel 支持 Next.js 的 ISR，允許動態內容更新而無需重建整個網站。這對由 Ghost CMS 驅動的博客或內容豐富的網站特別有用：

在 Next.js 項目中通過設置 getStaticProps 中的 revalidate 來配置 ISR，確保頁面定期更新。
使用 Vercel 的 CDN 全球緩存生成的頁面，減少後續訪問者的加載時間。

2. 優化 API 數據獲取

高效獲取 Ghost Content API 的數據至關重要：

實現並行 API 請求而非連續請求，以減少延遲。
使用 React.cache() 或中間件緩存等工具緩存 API 響應，以最小化冗餘調用。
使用 Ghost 的過濾和分頁功能，僅獲取每頁所需的數據。

3. 圖像優化

圖像通常是頁面加載時間的主要因素。使用 Next.js 內置的 Image 組件進行優化：

提供具有定義尺寸的響應式圖像，防止布局偏移。
對非關鍵視覺元素使用現代格式如 WebP 和延遲加載。

4. 增強前端性能

Next.js 提供多種功能來提高客戶端性能：

通過消除未使用的庫和組件來最小化 JavaScript 負載。
對重量級組件或動態路由使用 Suspense 邊界和延遲加載。
如果使用 Tailwind CSS 等庫，通過清除未使用的樣式減少 CSS 開銷。

5. 實施戰略性緩存

緩存對於減少無伺服器函數執行和改善全球響應時間至關重要：

為 Vercel 提供的動態路由配置緩存控制頭。
在 Next.js 中使用細粒度緩存方法如 revalidatePath 或 revalidateTag。
通過利用 Vercel 的 Edge Network 確保全球高緩存命中率。

6. 優化構建時間

大型網站在部署過程中可能會遭受長時間的構建：

在構建時僅生成關鍵頁面，同時使用 ISR 延遲不太重要的頁面。
減少會減慢構建或增加不必要複雜性的第三方集成。

7. SEO 和核心網頁指標

性能直接影響 SEO 排名，因此相應地優化您的網站：

使用 Vercel 的 Edge Network 確保快速的首字節時間 (TTFB)。
壓縮文件並啟用 HTTP/2 以更快地交付資產。
添加適當的元標記和結構化數據以提高搜索引擎可見性。

8. 定期監控和調試性能

使用 Vercel Analytics 和 WebPageTest.org 等工具識別瓶頸：

跟踪核心網頁指標 (LCP、FID、CLS) 等指標並相應優化。
在不同流量條件下測試您的網站以確保可擴展性。

結論

通過實施這些最佳實踐，您可以最大化 Ghost CMS 在 Vercel 上的性能。這種組合為內容管理和前端交付提供了強大的功能，但優化 API 調用、緩存策略和前端資產是實現卓越速度和可擴展性的關鍵。

需要專業的數位轉型方案嗎？Tenten.co 擁有豐富的 Headless CMS 和現代網站架構經驗，能為您的企業建立高效能、易於管理的數位體驗。我們的專家團隊提供從 Ghost CMS 設置到 Vercel 部署的全方位服務，幫助您的網站獲得最佳性能和使用者體驗。立即預約免費諮詢會議，探討如何將您的網站提升到新的高度！