教你如何改善現有WordPress網站,作為CMS後端,在保留可視化編輯功能同時,將前端用Next.js拆分出來,前後端溝通使用GraphQL API,提升前端對整個網頁的掌握度,優化開發體驗、UI可客製化程度,以及網站效能及SEO分數。
將以建立個人部落格為主題,從WordPress架設到Next.js調校,研究其中的各種眉眉角角。
此系列將會涵蓋以下主題:
- WordPress架設
- Next.js
- GraphQL API
- TailwindCSS
- SEO優化
- 效能量測與優化
- Progressive Web App
哈囉,我是Eason,歡迎來到我的 「WordPress 再進化,用 Next.js 拆分前端,實現 UI 完全客製化及優化效能與 SEO」 30天鐵人賽系列文...
這系列我們會以實作「個人部落格」為主題,希望兼顧以下項目: 開發者體驗:加功能調 UI 時有版本控制、能使用 React、Next.js 生態系各種最新功能...
首先我們要找一個地方架設 WordPress 作為內容管理系統 (CMS)。 因為是開發階段,暫時不需要太好效能,不需要花大錢一次衝很高級的平台,所以我們會優先...
上篇文章我們在 BlueHost 架起了 WordPress 環境,但也許你還不知道什麼是 WordPress,這裡簡單介紹一下它的特點。 WordPress,...
這系列內容主要內容是在講如何用 Next.js 取代 WordPress 前端,因此約 70% 內容會著重在開發 Next.js 前端上,因此今天我們先來介紹一...
今天我們要來建立 Next.js 專案,目標是能在自己電腦上成功開啟 Next.js 網頁。 我預設你跟我一樣,是使用 MacOS 之類的 Unix 作業系統開...
上一篇我們建完 Next.js 專案了,並且能成功在自己的電腦上開發改 code 了!下一步就是要來把它上線到雲端主機上,讓全世界看到! 雖然我們什麼都還沒改,...
我們的系統架構很單純,分為託管在 Vercel 上的 Next.js 前端,以及託管在 BlueHost 上的 WordPress 後端 CMS。 而前後端之間...
上一篇文章我們成功在 WordPress 安裝 WPGraphQL plugin,啟動了 GraphQL API,現在我們要來在 Next.js 部落格前端串接...
上一篇我們成功在 Next.js 安裝 ApolloClient 了,今天我們繼續使用剛安裝的 ApolloClient 從 WordPress 抓取文章資料,...