一直聽過 WordPress 的無頭模式(Headless)架構，最近心一狠就把自己的網站轉移成無頭模式架構。

理由有幾點：

1. 想要更有彈性的在前台開發
2. 在前台實作一些想法
3. 體驗看看無頭模式的坑(?

記錄一下目前版本做了哪些事情

轉換流程

1. 決定架構

我決定了前台採用 Nuxt ，一方面我是走 Vue 生態的開發者，二來需要有 SSR 來維持原本的 SEO 效果。

簡單來說就是 Nuxt + WordPress

2. 開啟 WordPress 無頭模式

翻了一些文章，多半會推薦無頭模式要採用 Graphql ，主要是為了提高查詢效率，因此先安裝了 wpgraphql ，讓 WordPress 的 RestFul API 支援 Graphql。

3. 建置新的前台

用 Nuxt 建置了新的前台，目前版本只是先提供最基礎的內容：首頁、介紹、文章等，後續還有一些想法慢慢更新。這時實作串接原網站的 API，就能進行測試了！

記得要開啟 SSR 模式，這部分除錯比較麻煩一些。

另外也要處理 CORS 問題，這部分解完後，整個架構雛形就完成了。

4. 網域轉換 + SEO

將原本的 WordPress 轉換到另一個網域，並且將新前台掛在原本的網域。

由於新架構的 route 已經改變，自然就會出現文章路徑的轉址問題，我另外寫了一個轉換器和對應表來處理 301 轉址。

而 SEO 就要在 Nuxt 上全部處理了。

5. 關閉 WordPress 的前台模式

說是關閉，我採用的做法是強制轉址到前台網域billxu.net 啦.

這些步驟做完，也差不多把整個架構調完了！

簡短心得

轉換完後有種舒爽的感覺，想到不用受到原本頁面架構的限制就覺得有種解放感！不過什麼都得重新來過，像是文章排版、資料解析等等。最近還在除錯，之後想在網站中放一些小遊戲之類的(? 到時候就再分享了XD