Webflow 到 Ghost：用 AI Vibe Coding 快速開發指南

社區資源
,
1

TL;DR：把 Webflow 到 Ghost theme 的轉換，拆成 10 個穩妥步驟

  1. 匯出 Webflow 原始碼（HTML/CSS/JS/Assets）。2) 建好本機 Ghost 開發環境與正確的 Node 版本。3) 以官方 theme 檔案結構為藍本。4) 重新整理 Webflow 的 CSS/JS/圖片到 /assets。5) 用 Claude Code 批次把靜態 HTML 拆成 default.hbs / index.hbs / post.hbs / partials。6) 把列表頁改用 {{#foreach}}，導航改 {{navigation}}。7) 用 routes.yaml 做首頁/部落格路由。8) 在 package.json 設定 posts_per_page 與自訂 theme 設定。9) 用 GScan 驗證、修正警告。10) 壓縮上傳、在 Ghost Admin 啟用。（Webflow 匯出內容組成與限制、Ghost 必備檔案與路由、Node 版號與 GScan 驗證皆見引用來源。([Webflow Help Center][1], [Ghost Developer Docs][2], [Ghost][3])）

你從 Webflow 匯出會拿到什麼（以及不能拿到什麼）

  • 會有：所有頁面的 HTML、一組 CSS（包含你自己的樣式 + webflow.css + normalize.css）、一組 JS（包含 webflow.js 的互動邏輯）、以及 images 資料夾。這些就是 Webflow to Ghost theme 轉換的素材。([Webflow Help Center][1])
  • 不會有：表單提交與站內搜尋在匯出版不會運作；表單需要改接第三方（例如以 action URL 直送第三方），CMS 動態內容與集合頁在匯出後不會自動帶資料。這些限制在做 Webflow to Ghost theme 時要預先規劃。([Webflow Help Center][1], [Forum | Webflow][4])

Ghost theme 基礎你一定要對齊

Ghost 的 theme 是一組 Handlebars 模板 + 靜態資產，核心檔案結構大致如下（粗體為必要）：

  • default.hbs（全站外框）
  • index.hbs（列表頁，必要）
  • post.hbs（文章頁，必要）
  • page.hbs、tag.hbs、author.hbs（常用）
  • package.json（必要；含 config.posts_per_page 等設定）
  • /assets/{css,js,images,fonts}、/partials（切片）
    把 Webflow 的 HTML 拆到這些檔案，再用 Ghost helper 輸出資料。([Ghost Developer Docs][2])

Webflow 到 Ghost theme：對照轉換地圖

| Webflow 原件/檔案 | Ghost 對應模板/做法 |
|---|---|
| 全站共用 `<head>`、頁尾 script | 放進 **[`default.hbs`](https://docs.ghost.org/themes/structure)**；CSS/JS 改用 `{{asset}}` 載入 |
| Navbar / Footer 區塊 | 拆成 **[`/partials/header.hbs`](https://ghost.org/tutorials/partials/)**、`/partials/footer.hbs`，導覽用 `{{navigation}}` 產出 |
| 文章列表區（Cards、Grid） | **[`index.hbs`](https://docs.ghost.org/themes/structure)** 裡用 `{{#foreach posts}} ... {{/foreach}}`，或做 `partials/post-card.hbs` |
| 單篇文章內容 | **`post.hbs`** 用 `{{title}}`、`{{feature_image}}`、`{{content}}`、`{{tags}}` 等 helper |
| 靜態單頁（About, Contact） | **`page.hbs`**，內容從 Ghost Admin 新增頁面即可呈現 |
| 站內路由（首頁用自訂模板/頁面） | 以 **[`routes.yaml`](https://docs.ghost.org/themes/routing)** 指到 `home.hbs` 或某一頁 |
| CSS / JS / 圖片 | 全部搬到 **`/assets/css|js|images`**，HTML 連結改 `{{asset}}` |

本機開發環境（為什麼先做這一步）

  • Node 版本：Ghost 目前要求 Node v22 LTS（自架）。請先把 Node 對齊再啟動專案，避免日後上傳/更新踩雷。([Ghost][3])
  • Ghost-CLI：安裝 CLI 後可一鍵裝本機 Ghost 用來測 theme。npm i -g ghost-cli → ghost install local。([Ghost Developer Docs][5])

用 Claude Code 加速 Webflow to Ghost theme（實戰心法）

  • 安裝：npm i -g @anthropic-ai/claude-code。([Anthropic][6])

  • 做法：把 Webflow 匯出 ZIP 解壓，建立一個空的 Ghost theme 專案骨架，然後讓 Claude Code 以「專案重構」的任務逐步處理：

    1. 切外框：請它把任一頁的 <head>…</head> 與頁尾 script 抽成 default.hbs。
    2. 拆切片：請它找出 Navbar/Footer/卡片樣式，建立 partials/ 並替換重複片段。
    3. 資料繫結：把列表區用 {{#foreach posts}}、導覽改 {{navigation}}、圖片用 {{img_url}}。
    4. 資產路徑：把 <link href="/css/…">、<script src="/js/…"> 改為 {{asset "css/…"}} 等。
    5. 批次重構：讓它以「範本 → 推廣」策略，先完成 index.hbs，接著套用到所有列表樣板與卡片。

  • 提示詞樣例（直接貼給 Claude Code）

    • 「掃描專案，建立 Ghost theme 骨架（default.hbs/index.hbs/post.hbs/partials/assets），保留 Webflow CSS class，不改設計。」
    • 「把 index.html 的全站外框抽成 default.hbs，把 Navbar/Footer 各自做成 /partials/header.hbs、/partials/footer.hbs，在 default.hbs 以 {{> "header"}}/{{> "footer"}} 插入。」
    • 「把文章卡片區塊做成 partials/post-card.hbs，並在 index.hbs 用 {{#foreach posts}} 迴圈渲染，補上 {{pagination}}。」
    • 「將所有 CSS/JS 連結改為 {{asset}} helper；把圖片 <img src> 改 {{img_url feature_image}} 或保留靜態圖用 {{asset}}。」
    • 「建立 routes.yaml 讓 / 用 home.hbs，/blog/ 用 index.hbs。產出可直接上傳的 routes.yaml。」

想深入最佳實踐與操作手感，可參考 Anthropic 的 Claude Code 概覽與工程團隊分享（安裝、工作流、代理式重構）。([Anthropic][7], [Anthropic][8])

你會用到的 Ghost Handlebars 小抄

  • 列表：{{#foreach posts}}…{{/foreach}}（比原生 each 更懂 Ghost 的內容模型）。([Ghost Developer Docs][9])
  • 導覽：{{navigation}} 或 {{navigation type="secondary"}}。([Ghost Developer Docs][10])
  • 全域設定：{{@config.posts_per_page}} 來讀取 package.json 中的分頁數。([Ghost Developer Docs][11])

基礎範本（可直接貼進你的 theme）

default.hbs

<!DOCTYPE html>
<html lang="{{@site.lang}}">
<head>
  <meta charset="utf-8" />
  <title>{{meta_title}}</title>
  {{ghost_head}}
  <link rel="stylesheet" href="{{asset "css/normalize.css"}}">
  <link rel="stylesheet" href="{{asset "css/webflow.css"}}">
  <link rel="stylesheet" href="{{asset "css/site.css"}}">
</head>
<body class="{{body_class}}">
  {{> "header"}}
  {{{body}}}
  {{> "footer"}}
  {{ghost_foot}}
  <script src="{{asset "js/webflow.js"}}"></script>
</body>
</html>

partials/header.hbs

<header class="wf-nav container">
  {{navigation}}
</header>

index.hbs

{{!< default}}
<main class="container post-grid">
  {{#foreach posts}}
    {{> "post-card"}}
  {{/foreach}}
  {{pagination}}
</main>

partials/post-card.hbs

<article class="post-card {{post_class}}">
  <a href="{{url}}">
    {{#if feature_image}}
      <img src="{{feature_image}}" alt="{{title}}">
    {{/if}}
    <h2>{{title}}</h2>
    <p>{{excerpt words="24"}}</p>
  </a>
</article>

post.hbs

{{!< default}}
<article class="{{post_class}}">
  <header class="post-header">
    <h1>{{title}}</h1>
    <p class="meta">{{authors}} • {{date published_at format="YYYY-MM-DD"}}</p>
    {{#if feature_image}}<img src="{{feature_image}}" alt="{{title}}">{{/if}}
  </header>
  <section class="post-content">{{content}}</section>
  {{#if tags}}<ul class="tags">{{#foreach tags}}<li><a href="{{url}}">{{name}}</a></li>{{/foreach}}</ul>{{/if}}
</article>

routes.yaml（放在 Ghost Admin → Settings → Labs 上傳；專案內可備份一份）

routes:
  /:
    template: home

collections:
  /blog/:
    permalink: /blog/{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

（Ghost 動態路由檔說明見官方文件。([Ghost Developer Docs][12])）

package.json 也要設定（含自訂 Theme 設定）

  • 例：
{
  "name": "my-webflow-to-ghost",
  "version": "1.0.0",
  "engines": { "ghost": ">=5.0.0" },
  "config": {
    "posts_per_page": 9,
    "image_sizes": { "s": {"width": 300}, "m": {"width": 600} },
    "custom": {
      "hero_headline": { "type": "text", "group": "homepage", "label": "Hero headline" }
    }
  }
}
  • posts_per_page 可在模板用 {{@config.posts_per_page}} 讀取；custom 可讓你在 Ghost Admin → Design 露出自訂欄位（標題、顏色、開關等），方便無程式編修。([Ghost Developer Docs][11], [Bright Themes][13], [Ryan Feigenbaum][14])

驗證、打包、部署（別跳過）

  • GScan：上傳 ZIP 讓官方掃描相容性與棄用 API，修到 0 fatal 再上線。([Gscan][15], [Ghost][16])
  • Ghost Admin 上傳：啟用時也會跑 GScan，有 fatal 會擋。([Bright Themes][17])
  • GitHub Actions 自動部署：常見 theme 店家示範了從 repo 自動推送到 Ghost Admin 的流程，可以抄作業。([Aspire Themes][18])

Webflow to Ghost theme 常見坑位

  • Webflow Interactions：大多數互動由 webflow.js 控制，保留即可；但若互動與 CMS 資料耦合，匯出後要重寫。([Webflow Help Center][1])
  • 表單：匯出後不會投遞，請改接第三方並設定 action。([Webflow Help Center][1])
  • 內容搬遷：舊站內容可藉由 Ghost 的 Import 機制（JSON/zip）一次匯入；會員名單可用 CSV。([Ghost][19])
  • Node 版本不符：Ghost 有嚴格 Node 相容矩陣，請先把 Node 升到支援版再跑 Ghost-CLI。([Ghost][3])

Claude Code 提示詞包（拷貝即用）

  1. 建立骨架：「在 ./theme/ 產生 Ghost theme 基礎檔（default/index/post/page/tag/author/partials/assets、package.json、README.md），以我提供的 Webflow /export/ 為設計輸入。」
  2. 抽外框：「把 export/index.html 的 <head>/</body> 內共用片段，重構成 default.hbs 與 partials/header.hbs、partials/footer.hbs，插入 {{ghost_head}}、{{ghost_foot}}。」
  3. 卡片模板：「把文章卡片 DOM 做成 partials/post-card.hbs，同時建立 {{> "post-card"}} 的引入與 {{#foreach posts}} 迴圈。」
  4. 資產替換：「把所有 CSS/JS/IMG 連結自動改為 {{asset}} 或 {{img_url}} 格式，並移動檔案到 /assets。」
  5. 路由與設定：「生成 routes.yaml 與 package.json 的 config.posts_per_page=9，並加入兩個 config.custom 欄位（首頁標題、主色）。」

工具鏈與指令速查（Webflow to Ghost theme）

| 工具 / 文件 | 用途與指令 |
|---|---|
| [Ghost-CLI](https://docs.ghost.org/ghost-cli) | `npm i -g ghost-cli` → `ghost install local` 啟一個本機 Ghost 來測 theme |
| [Supported Node Versions](https://ghost.org/docs/faq/node-versions/) | 確認當前 Ghost 要求的 Node（目前為 v22 LTS） |
| [GScan](https://gscan.ghost.org/) | 上傳 ZIP 做官方檢查；或參考 [GScan 文件](https://ghost.org/docs/themes/gscan/) |
| [Ghost Theme Structure](https://docs.ghost.org/themes/structure) | 必要檔與資料夾結構一覽 |
| [Ghost Routing (routes.yaml)](https://docs.ghost.org/themes/routing) | 自訂首頁/集合/分類路由 |
| [Ghost Partials 教學](https://ghost.org/tutorials/partials/) | 把重複模組做成 partials，提升維護性 |
| [Claude Code](https://www.anthropic.com/claude-code) | `npm i -g @anthropic-ai/claude-code`；用代理式重構整個專案 |
| [Webflow Code export](https://help.webflow.com/hc/en-us/articles/33961386739347-Code-export) | 匯出內容組成與限制（CSS/JS/Images/HTML、表單/搜尋不運作） |

進階：把 Webflow 的語義與可及性也帶到 Ghost（長期 SEO 受益）

把 Webflow to Ghost theme 當成語義化重整的好機會：在模板裡用正確的 <header>/<main>/<article>/<nav>/<footer>、替圖片補 alt、遵循 HTML Living Standard 與 MDN 的語義建議，並參考政府等級的可及性原則（USWDS/Section 508）。([HTML Living Standard][20], [MDN Web Docs][21], [U.S. Web Design System (USWDS)][22], [Section 508][23])

參考規格 & 延伸閱讀（Credits）

  • WHATWG HTML Living Standard（持續更新的 HTML 標準）。([HTML Living Standard][20])
  • MDN Web Docs：Semantic HTML 與內容結構指南。([MDN Web Docs][21])
  • USWDS（U.S. Web Design System）：政府等級的可及性與設計原則。([U.S. Web Design System (USWDS)][24])
  • Nielsen Norman Group：資訊架構與導航的研究與教學資源。([Nielsen Norman Group][25])

以上再加上本篇的實作引文：Webflow 匯出內容與限制、Ghost theme 檔案結構與路由、Node 版本需求、GScan 與 Claude Code 文件。([Webflow Help Center][1], [Ghost Developer Docs][2], [Ghost][3], [Anthropic][6])

作者觀點

作者：Erik（Tenten AI Founder）
在我們實戰多次 Webflow to Ghost theme 的經驗裡，成功關鍵其實不是「能不能轉」，而是「保留設計、補齊動態、強化語義」三件事要一起到位。用 Claude Code 可以把模板拆分與資產替換做得很快，但請一定要安排一輪內容模型與可及性的校正，這會讓你在 Ghost 上的內容營運更長久、更快。