iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

WordPress再進化,用Next.js拆分前端,實現UI完全客製化及優化效能與SEO 系列

教你如何改善現有WordPress網站,作為CMS後端,在保留可視化編輯功能同時,將前端用Next.js拆分出來,前後端溝通使用GraphQL API,提升前端對整個網頁的掌握度,優化開發體驗、UI可客製化程度,以及網站效能及SEO分數。

將以建立個人部落格為主題,從WordPress架設到Next.js調校,研究其中的各種眉眉角角。

此系列將會涵蓋以下主題:
- WordPress架設
- Next.js
- GraphQL API
- TailwindCSS
- SEO優化
- 效能量測與優化
- Progressive Web App

參賽天數 14 天 | 共 14 篇文章 | 14 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1 用 Next.js 拆分 WordPress 前端 - 系列簡介

哈囉,我是Eason,歡迎來到我的 「WordPress 再進化,用 Next.js 拆分前端,實現 UI 完全客製化及優化效能與 SEO」 30天鐵人賽系列文...

2021-09-15 ‧ 由 EasonChang 分享
DAY 2

Day2 個人部落格需求規劃 - Next.js Frontend + Headless WordPress

這系列我們會以實作「個人部落格」為主題,希望兼顧以下項目: 開發者體驗:加功能調 UI 時有版本控制、能使用 React、Next.js 生態系各種最新功能...

2021-09-16 ‧ 由 EasonChang 分享
DAY 3

Day3 WordPress 架設 - 尋找最適合我們的 WordPress 架站平台

首先我們要找一個地方架設 WordPress 作為內容管理系統 (CMS)。 因為是開發階段,暫時不需要太好效能,不需要花大錢一次衝很高級的平台,所以我們會優先...

2021-09-17 ‧ 由 EasonChang 分享
DAY 4

Day4 WordPress 介紹,基礎設定與發文

上篇文章我們在 BlueHost 架起了 WordPress 環境,但也許你還不知道什麼是 WordPress,這裡簡單介紹一下它的特點。 WordPress,...

2021-09-18 ‧ 由 EasonChang 分享
DAY 5

Day5 Next.js 介紹 - Production-ready 的 React.js 框架

這系列內容主要內容是在講如何用 Next.js 取代 WordPress 前端,因此約 70% 內容會著重在開發 Next.js 前端上,因此今天我們先來介紹一...

2021-09-19 ‧ 由 EasonChang 分享
DAY 6

Day6 建立 Next.js 專案 - 使用 create-next-app

今天我們要來建立 Next.js 專案,目標是能在自己電腦上成功開啟 Next.js 網頁。 我預設你跟我一樣,是使用 MacOS 之類的 Unix 作業系統開...

2021-09-20 ‧ 由 EasonChang 分享
DAY 7

Day7 使用 Vercel 發布我們的 Next.js 網站,搭配 Github 實現自動部署

上一篇我們建完 Next.js 專案了,並且能成功在自己的電腦上開發改 code 了!下一步就是要來把它上線到雲端主機上,讓全世界看到! 雖然我們什麼都還沒改,...

2021-09-21 ‧ 由 EasonChang 分享
DAY 8

Day8 GraphQL 介紹、在WordPress 上安裝 WPGraphQL plugin

我們的系統架構很單純,分為託管在 Vercel 上的 Next.js 前端,以及託管在 BlueHost 上的 WordPress 後端 CMS。 而前後端之間...

2021-09-22 ‧ 由 EasonChang 分享
DAY 9

Day9 在 Next.js 安裝 apollo-graphql,串接 WordPress GraphQL API(上)

上一篇文章我們成功在 WordPress 安裝 WPGraphQL plugin,啟動了 GraphQL API,現在我們要來在 Next.js 部落格前端串接...

2021-09-23 ‧ 由 EasonChang 分享
DAY 10

Day10 在 Next.js 安裝 apollo-graphql,串接 WordPress GraphQL API(下)

上一篇我們成功在 Next.js 安裝 ApolloClient 了,今天我們繼續使用剛安裝的 ApolloClient 從 WordPress 抓取文章資料,...

2021-09-24 ‧ 由 EasonChang 分享