Claude Code x 部落格架設(六):多人共同管理的 Astro WordPress 方案

技術分享

AI 文章延伸

AI 幫你讀這篇文章

選擇平台後可直接帶入閱讀脈絡,快速整理重點、補齊盲點,並延伸到同站相關文章。

系列寫到第五篇,我們已經把部落格從零架起來、部署上線、設定好 SEO,甚至用 Skills 自動健檢。但有一個問題一直沒解決——寫文章還是得回到自己的電腦,打開終端機,改 Markdown,再推到 GitHub。

這個流程在一個人的時候沒問題,但下面這三個情境一出現,整件事就卡住了:

  • 出差在外,手邊只有一台沒裝開發環境的筆電,客戶突然要你更新一篇文章
  • 部落格內容變多,想把上稿的工作交給行銷同事,但他看到終端機就頭痛
  • 部落格長成企業形象網站,老闆、業務、PM 都想進來貼公告或改文案

這三個情境的共通點是:內容創作的門檻被技術工具卡住。Astro 本身是開發者友善的靜態網站產生器,它假設每個使用者都會用終端機、會 git push、看得懂 Markdown 語法。但部落格的本質是「寫內容」,不是「寫程式」。當協作對象擴大到非工程師,或使用情境脫離了自己那台裝滿開發工具的電腦,Astro 缺一個「後台」——一個用瀏覽器就能打開、懂繁體中文排版、支援多人帳號、有圖片上傳介面的編輯器。

為了解決這件事,這次我們開發了一個 Astro 套件,叫做 astro-wp,把 WordPress 變成 Astro 部落格的後台編輯介面。寫文章回到熟悉的 WordPress 編輯器,文章來源混用本機 Markdown 和 WordPress,前端還是那個又快又安全的 Astro 靜態站。

為什麼是 WordPress,不是其他 headless CMS?

這個問題我們想了很久。Strapi、Sanity、Contentful、Payload⋯⋯可以選的 headless CMS 一大堆。最後選 WordPress 有三個原因:

1. 編輯器是世界上最多人會用的那一個

台灣至少有一半以上的內容編輯碰過 WordPress,學習成本趨近於零。你不需要開一次教學會議告訴同事「這個欄位怎麼填」。

2. 有 WordPress Playground

這是 WordPress 官方用 WebAssembly 做的新專案,讓 WordPress 可以直接跑在瀏覽器或 Node.js 裡,用 SQLite 取代 MySQL。沒有 Docker、沒有資料庫安裝、沒有 PHP 環境,安裝起來非常快速。

3. 沒有人頭月費、沒有廠商鎖死

Sanity、Contentful 這類雲端 headless CMS,編輯帳號多一個就多收一份錢,流量多了也得升級方案。WordPress 是免費開源軟體,你要開幾個編輯帳號就開幾個,內容也完全放在自己家裡。哪天想搬走、想改結構、想接自己的外掛,都沒有人攔你。對企業形象網站或長期經營的部落格來說,這份「自主權」比便宜的月費更重要。

astro-wp 做了什麼?

用一張圖解釋整個架構:

📝 Markdown 檔案 工程師寫技術文章 🖥️ WordPress 後台 同事寫公關稿、新聞 Astro build 合併兩個來源 🌍 靜態網站 部署到 CDN

兩個內容來源 → 同一個快速、安全的靜態網站

兩個來源的內容最後會合成同一個部落格。想像你的部落格是一本雜誌,原本文章都是你自己手寫進去的。現在多了一個編輯助理(WordPress),你手寫的稿子還是照樣放,助理打字的稿子也會被收進來,排版出來看起來是同一本雜誌,讀者根本分不出哪篇誰寫的。

整個過程的角色分工是這樣:

  • WordPress 只負責「寫稿」——給你和同事一個熟悉的編輯介面、圖片上傳、排版工具
  • Astro 負責「出版」——把所有文章(不管是 WordPress 寫的還是 Markdown 寫的)編排成最終的網頁
  • 合併的動作 在網站重新生成的時候發生,一次把兩邊的內容都抓齊,產出一份完整的部落格

讀者打開網站看到的還是那個又快又安全的 Astro 靜態站,速度、SEO 通通沒犧牲。WordPress 藏在幕後,只是你們寫稿的工具間——而且這個工具間直接架在你自己的電腦上,不用租主機、不用付月費、不用每週盯著 WordPress 安全更新,也不怕哪天主機商漲價或倒閉。文章資料、圖片、分類設定全部留在自己的硬碟裡,備份跟搬家都是複製資料夾的事。

最麻煩的問題:同事怎麼連到你電腦上的 WordPress?

這是整個方案最關鍵的一步。WordPress 跑在你自己的電腦上,同事在台北分公司的電腦要怎麼打開?

想像你家裡的 Wi-Fi 只有家人能用,外面的朋友要用怎麼辦?你得拉一條線出來。Cloudflare 就是幫你拉這條線的服務商,而且免費。astro-wp 已經把這整段設定包好了,你只要跟 Claude Code 說「讓同事從外面連到我的 WordPress」,它會問你兩個問題:

你有自己的網域嗎?

  • 有。 告訴它一個子網域,例如 wp.你的公司.com。它會幫你把這個網址跟你的筆電綁在一起,以後每次啟動都是同一個網址,同事存成書籤就能用。
  • 沒有。 系統會給你一個長得像 隨機字串.trycloudflare.com 的臨時網址。每次重新啟動網址會變,適合臨時給客戶看一下 demo,不適合給同事長期用。

同事那邊看到的就是一個正常的網站登入頁面,輸入帳號密碼進去就是完整的 WordPress 後台。他完全不需要知道這個網站實際上跑在誰的筆電上。你也不用去動家用路由器、不用設定防火牆、不用付 VPN 的錢。

如果你想用永久網址,網域大概一年 10 美金,相對於多人協作帶來的方便,這筆錢很值得。

實際安裝:還是讓 Claude Code 做

跟系列前幾篇一樣,你不需要自己敲指令。在部落格專案資料夾打開 Claude Code,跟它說:

幫我安裝 astro-wp,把 WordPress 當成 headless CMS
專案網址:https://github.com/oberonlai/astro-wp

它會去讀那個專案的 README,然後照著下面幾件事一路做完:

  1. 先看看你的部落格長什麼樣。 Claude Code 會先打開你的專案,確認文章資料夾叫什麼、分類規則是怎麼設計的。每個人的部落格架構都不太一樣,它得先摸清楚才不會弄壞你既有的內容
  2. 把 astro-wp 這套工具搬進你的專案。 這一步就是一個安裝指令,執行下去之後,該有的檔案、該連的管線、該裝的 WordPress 外掛會自動放到正確的位置。你不用自己搬任何一個檔案
  3. 告訴你的部落格「以後多一個內容來源」。 原本部落格只認你寫的 Markdown 檔案,這一步會讓它同時也認 WordPress 寫出來的文章,兩邊一起顯示在網站上
  4. 把列表頁、分類頁、文章頁改好。 首頁的文章列表、點分類的篩選頁、點單篇進去的內容頁,原本只會列出 Markdown 的文章,現在要讓 WordPress 的文章也出現。Claude Code 會幫你改好,讀者打開網站會看到兩邊的文章混在一起按時間排
  5. 啟動 WordPress 並幫你開好帳號。 跑最後一個指令,你電腦裡就會有一個 WordPress 跑起來,登入帳號、跟 Astro 對接用的連線密碼、必要的外掛,全部自動設定好。你打開瀏覽器就是完整的 WordPress 後台,可以直接開始寫文章

整個流程我們在一個乾淨的最新版 Astro 專案上實測過,Claude Code 大約 5 到 7 分鐘跑完,中間沒有需要人工介入的步驟。

安裝結束之後,記得另外開一個終端機視窗執行 npm run dev。這一步會同時啟動本機的 Astro 前端和 WordPress 後台,這兩個程式要跑起來,瀏覽器才能打開 http://127.0.0.1:8888/wp-admin 看到 WordPress 後台、打開 http://localhost:4321 看到你的部落格。平常要上稿、改內容的時候,這個視窗都得保持開著,闔上終端機就等於把整個服務關掉了。

開發時的即時預覽

一個細節值得講:你在 WordPress 按下「儲存」之後,部落格網站怎麼知道你剛剛改了內容?

astro-wp 用了一個很簡單的做法:讓你的部落格每三秒偷偷問一次「WordPress 那邊有沒有新東西?」一旦發現有,就自動重新整理頁面,把新內容抓進來。

要注意的是,這個預覽只有本機開發者看得到。遠端同事在 WordPress 後台存檔之後,自己那邊是看不到 Astro 前台的最新樣貌的——他們要看實際成果,得等文章正式發布上線。所以在多人協作的情境下,同事寫作時主要靠 WordPress 後台的編輯器預覽排版,正式成品要等發布後才會出現在網站上。

發布流程:文章在自己電腦上打包,再送上網路

系列前面幾篇有介紹過,平常 Astro 部落格的發布流程是這樣:你把文章推到 GitHub,Cloudflare 那邊自己會重新生成網站。這套流程在這裡行不通——因為 WordPress 跑在你自己的電腦上,Cloudflare 的伺服器在天邊,它連不進你家來抓文章。

astro-wp 換了一個做法:發布的動作改在你自己的電腦上完成,做完之後再把成品丟上網路。

實際的流程是這樣:

  1. 同事在遠端 WordPress 後台按下「發布」
  2. 訊息送回你的筆電
  3. 你的筆電自動把網站重新生成一份最新版本
  4. 再把這份最新的網站上傳到 Cloudflare,全世界的讀者就能看到

整個過程你不用盯著螢幕,只要事先把這個自動發布的服務啟動起來,讓它在背景待命就好。

這是這套方案最明顯的限制——必須有一台電腦開著。對個人部落格來說是缺點,但對小團隊來說影響不大,反正那台電腦就是你自己的工作機,開一整天本來就開著。

如果團隊規模稍大、不希望「網站活著與否」跟某一個人的筆電綁在一起,有幾個漸進的做法可以選:

  • 找一台公司內部的備用電腦專門跑 WordPress。 放辦公室角落、接著電源、網路穩定就好,打開之後就讓它一直開著。成本只有電費,同事上班時間都能上稿,維護也簡單
  • **如果真的需要 24 小時不間斷發布、同事分散各時區,**再把 WordPress 搬到雲端主機。astro-wp 的架構可以無痛切換,設定檔改一行網址就好

適合跟不適合的情境

講完了優點,也要誠實說限制。這個方案適合這些人:

  • 已經用 Astro 做部落格,想讓非工程師同事進來上稿
  • 希望內容管理有熟悉的 WordPress 介面,但不想維護 WordPress 主機
  • 個人使用者需要在沒有開發環境的電腦上臨時改文章(用遠端 Tunnel 連回自己的筆電)
  • 企業形象網站,讓行銷、業務、PM 各自管自己那塊內容

不適合的情境:

  • 需要 24 小時自動發布,身邊沒有隨時開機的電腦
  • 依賴少數很吃資料庫底層的 WordPress 外掛(大部分常用外掛都沒問題,真的遇到不相容的情況再評估替代方案就好)
  • 單純一個人寫部落格,沒有協作需求——這種情境下直接寫 Markdown 反而最快

下一步

安裝完成之後,WordPress 後台和 Markdown 檔案並存。你可以:

  • 繼續用 Claude Code 寫 Markdown 發表技術文
  • 請同事用 WordPress 寫公關稿、新聞稿、產品說明
  • 兩種來源最後都出現在同一個 Astro 前端,讀者看不出差別

之後如果想把 Astro 的頁面內容(像是首頁 banner、公司介紹、服務說明這些原本寫死在程式碼裡的文案)也搬進 WordPress 後台讓同事自己改,可以請 AI 幫你在 WordPress 建好對應的欄位、串接好相關的 API,讓 Astro 前端從 WordPress 撈資料顯示。

或是如果 WordPress 裝了一些外掛(例如文章瀏覽次數計數器、圖片輪播、熱門文章排行等 UI 相關的功能),想把這些外掛產生的內容顯示在 Astro 前台,同樣可以請 AI 協助處理橋接。等於你的靜態網站會逐步長出越來越多「可以給非工程師管理」的區塊,整個網站的內容自主權都握在內容團隊手上。

不過有一種情境要提醒一下:如果你想把購物系統(像是 WooCommerce)接上來,這部分會牽涉到金流、訂單、會員資料這些比較複雜的安全性問題,建議還是找專業團隊來處理會比較適合,不要單純靠 AI 自己兜。

到這裡,「Claude Code x 部落格架設」系列六篇就走完了:從概念、安裝、部署、SEO、健檢,到多人協作。整套工具鏈的門檻一層一層降下來,不懂程式也能把部落格跑起來,不用技術團隊也可以把後台的管理系統補上。

延伸思考

這個方案的優勢建立在幾個前提上,值得提醒自己:

  • 假設工作機作息穩定。 個人開發者 + 單時區小團隊運作良好,但分散時區或需要深夜上稿的組織會立刻撞上「電腦沒開就進不來」的牆,這時該往雲端主機搬
  • 假設編輯者「熟悉 WordPress」。 對習慣 Notion、Google Docs 這類文件工具的新一代編輯者,WordPress 的後台未必比較直覺。選 CMS 前先問一句「同事平常習慣用什麼工具」,比選最強大的編輯器更重要

換個角度看,這套「前台自己選技術、後台讓同事用熟悉工具」的分工有很多跨域類比:

  • 鐘擺擺回來了。 近年 Basecamp 從 AWS 搬回自家機房,論點跟這套方案幾乎一樣:省成本、可控、資料自主。雲端不是唯一解,只是某個時期的主流解
  • 像餐廳外場與廚房。 Astro 是客人看到的外場,WordPress 是廚房。客人不會走進廚房看設備,所以廚房用什麼工具都行,重點是出菜快又好

關鍵概念:Headless CMS 架構模式內容自主權 vs 託管便利本機 Headless CMS 部署流程

常見問題

已經有在跑的 Astro 部落格,能中途接上 astro-wp 嗎?

可以。安裝的時候它會先看你原本的部落格怎麼放文章、分類怎麼設,然後把 WordPress 當成「新增的寫稿管道」接進來,不會動到你原本寫好的文章。你手寫的 Markdown 繼續放著,同事從 WordPress 上稿的文章也會一起顯示在網站上,兩邊互不干擾。

這個 WordPress 跟一般的 WordPress 有什麼不一樣?

用起來幾乎一模一樣——後台介面、寫文章的方式、裝外掛、換主題,都跟你熟悉的 WordPress 沒兩樣。唯一的差別是它用一個更輕巧的資料庫,所以不用另外安裝資料庫軟體,打開就能跑。大部分常用外掛(像 Yoast SEO、ACF)實測都能用,只有極少數特別「吃資料庫」的外掛可能會怪怪的。

遠端同事要怎麼連到我電腦上的 WordPress?

跟 Claude Code 說「讓同事從外面連到我的 WordPress」,它會幫你處理。如果你有自己的網域,可以指定一個固定網址(例如 wp.你的公司.com)給同事長期用;如果沒有,也可以臨時產生一個隨機網址先給人看。同事那邊打開那個網址就是一個正常的 WordPress 登入頁面,根本不用知道這個網站其實跑在你的筆電裡。

如果我的電腦沒開,同事能正常上稿嗎?

不行。因為 WordPress 本身就跑在你的電腦上,電腦沒開的時候 WordPress 也等於關機,同事那邊打開網址只會看到連線失敗,沒辦法登入、也沒辦法寫稿。所以實際運作上,你的工作機就是整個 WordPress 後台的開關——你開機它就能用,你闔上它就關閉。對大多數小團隊來說這不是問題,因為你上班時同事也在上班;但如果你的團隊分散在不同時區,或同事常常半夜寫稿,那還是建議把 WordPress 搬到雲端主機 24 小時運作,設定檔改一個網址就能切換。


有想把 Astro 部落格變成多人協作的 CMS,或是在企業形象網站上遇到類似的情境?歡迎聯絡我們,或加入我們的 LINE 官方帳號聊聊你的專案。

作品案例

看看我們打造的產品與專案。從 WordPress 外掛到 AI 客服方案,每一個作品都是實戰經驗的累積。

瀏覽作品案例

服務項目

WordPress 開發、WooCommerce 電商、LINE 整合、AI 解決方案,依據你的需求提供最適合的技術服務。

瀏覽服務項目

Contact

聯絡我們

若你有任何技術需求、專案諮詢或合作想法,歡迎隨時與我們聊聊(首次諮詢免費)。

  • 想打造 WordPress 網站或 WooCommerce 電商
  • 需要 LINE 整合或 AI 功能導入
  • 有產品點子想找技術合夥人一起實現
  • 既有網站需要改版升級或效能優化
  • 尋找長期穩定的技術顧問合作夥伴