想像一下：你在 Webflow 裡拉出一個超有設計感的版面，動畫、排版、字型都到位，但客戶突然說「我們要用 Ghost 當部落格後台！」這時你不需要打掉重練，只要照著以下步驟，就能把 Webflow 匯出的模板變成 100% 可用的 Ghost Theme，而且還能讓客戶在 Ghost CMS 裡輕鬆發文。
前置作業：先把 Webflow 專案準備好
| 步驟 | 說明 | 工具/連結 |
|---|---|---|
| 1 | 在 Webflow 完成設計 | Webflow Designer |
| 2 | 確認 CMS 結構符合 Ghost 規範 | Ghost CMS Structure 指南 |
| 3 | 安裝 Udesly Chrome Extension | Chrome 線上應用程式商店 |
第一階段：匯出 Webflow 模板
- 在 Webflow 專案面板點 Export，下載
.zip檔。 - 打開剛裝好的 Udesly Extension，按下 Configure Attributes，它會自動幫你的元素加上 Ghost 需要的
data-*屬性，並下載.config設定檔。
第二階段：用 Udesly Nexus 轉換
| 動作 | 截圖/說明 |
|---|---|
上傳 .zip |
把剛剛匯出的 Webflow .zip 丟進 Udesly Nexus |
上傳 .config |
把 Extension 產生的 .config 也一起上傳 |
| 按下 Convert | 幾秒後就能下載完整的 Ghost Theme .zip |
第三階段：進 Ghost 後台啟用主題
- 登入你的 Ghost 管理後台（通常是
yourdomain.com/ghost）。 - Settings → Design → Change Theme → Upload Theme，把剛剛下載的
.zip上傳並啟用。 - 如果轉檔時有勾選「Download Data」，再到 Settings → Labs → Import Content 把 JSON 檔匯入，文章、作者、標籤就會自動同步。
進階技巧：手動微調 Handlebars（可選）
Udesly 轉出來的主題已經能跑，但如果你想手動優化：
- 打開
partials/資料夾，用 Handlebars 語法微調迴圈、條件判斷。 - 把 Webflow 的靜態文字換成
{{title}}、{{content}}等 Ghost 動態標籤。 - 檢查
package.json裡的name、version、author是否正確，這會影響 Ghost 後台的顯示。
常見問題一次解答
| 問題 | 解法 |
|---|---|
| 轉檔後樣式跑掉？ | 檢查 CSS 路徑是否正確，或重新上傳 /assets/ 資料夾 |
| 文章列表出不來？ | 確認 index.hbs 有使用 {{#foreach posts}} 迴圈 |
| 想加會員訂閱？ | Ghost 原生支援，只要在後台 Settings → Membership 啟用即可 |
真實案例：Jacob Marciniec 的搬家心得
設計師 Jacob Marciniec 曾經從 Ghost 搬到 Webflow，原因是需要更靈活的頁面編輯；但如果你反過來，想把 Webflow 的設計搬回 Ghost 專心經營內容，Udesly 就是最快路徑。
結語：設計交給 Webflow，內容交給 Ghost
用 Webflow 做出視覺衝擊，用 Ghost 專心寫作、經營會員，兩者透過 Udesly 無縫接軌。整個流程不用寫一行後端，就能把設計師的創意完整搬到 Ghost 生態系。
延伸閱讀 & 官方文件
作者觀點 by Ewan
我試過手刻 Ghost Handlebars，也試過純 Webflow 託管，最後發現「Webflow 設計 + Ghost CMS」才是內容團隊的甜蜜點。Udesly 把最痛苦的轉檔步驟自動化，讓設計師能專注在視覺，編輯能專注在內容，這才是工具該有的樣子。
— Ewan