Gatsby JS：用 React 和 WordPress 建立 Gatsby 靜態網站

Contents

這門課程教你如何使用 Gatsby.js、React JS、GraphQL 和 WordPress 來建立一個靜態的、伺服器編譯的、內容驅動的網站，並使用 Netlify 部署，以及在內容發生變化時進行重建。課程涵蓋 Gatsby.js、Wordpress、GraphQL和風格化元件的所有內容，並提供一個快速、全球伺服器雲端的網站，以超越競爭對手。

從這 3.5 小時的課程，你會學到

作為一個前端/React JS 開發者，增加你的價值並提升你的知識
學習 Gatsby
使用Gatsby JS（與React JS和GraphQL）建立一個靜態的、伺服器編譯的、內容驅動的網站
學習如何使用 GraphQL 和 GraphiQL 來查詢儲存在 WordPress 的資料
將 WordPress 設定為建立內容的後端，然後用 React JS 和 GraphQL 將內容渲染成頁面
使用 Netlify 部署你的 Gatsby JS 靜態網站並在內容發生變化時進行重建

要求

對 React JS 有基本瞭解 ( 可參考 2021 完整的 React 開發者課程 (包含 Redux，Hooks，GraphQL) )

課程說明

**主要課程更新 **

關於如何使用 Gatsby 建立一個帶分頁的部落格的全新章節
將本地 WordPress 網站遷移到 DigitalOcean 的即時伺服器上（新客戶可獲得50美元的免費信貸！）。

你想提高你的 React JS 技能，增加你作為前端開發的價值嗎？

“Gatsby讓你用你的資料建立速度驚人的網站，無論來源如何。將你的網站從傳統的 CMS 中解放出來，並飛向未來。”

透過學習帶有 WordPress 後端的 Gatsby.js，提升你的 React 技能組合 Gatsby JS 使用 React JS 和 GraphQL，從給定的資料集生成和建構靜態頁面。本課程將把 WordPress 設定為 Headless CMS，同時使用 GatsbyJS 從 WordPress 的資料中生成一個極快的伺服器渲染的 React 網站，如發文、頁面、選單、媒體、高階自定義欄位，（以及更多！）使用GraphQL 查詢這些資料。

沒錯，我們實際上可以使用 GraphQL 查詢 WordPress 資料！我們將建立一個作品組合網站。

我們將在本課程中建立一個作品組合網站，研究 Gatsby JS 和 WordPress 在本地的初始設定和開發，建立 WordPress樣板檔案並將其對映到 React 元件，以及用 GraphQL 查詢 WordPress 資料以自動生成靜態頁面。

我們將研究如何使用 GraphiQL 瀏覽器工具用 GraphQL 查詢Wordpress資料。我們也會接觸到一點 WordPress 的程式碼，但不會太多–這裡的主要重點是 Gatsby。一旦我們熟悉並適應了GatsbyJS 和 WordPress 的開發，我們將使用Netlify 建立並部署一個即時網站，在每次我們更新 WordPress 後台的內容時重新建立靜態網頁。

建議你有 React 的基本知識。我們將涵蓋 Gatsby.js、Wordpress、GraphQL和風格化元件的所有其他內容。

迅速超越競爭對手!

Gatsby.js 建立了儘可能快的網站。Gatsby 不是在請求時等待生成頁面，而是預先建構頁面並將其提升到全球伺服器雲端（我們將使用Netlify來實現）–無論你的使用者在哪裡，都可以立即交付給他們。

無需等待 API 響應
無需等待根據請求的資料渲染元件
無需載入旋轉器!
無需等待伺服器編譯頁面以提供給瀏覽器 – 這些頁面已經預先編譯並準備好即時提供給您的使用者

其他學生對這個 Gatsby & WordPress 課程的評價

5/5顆星—” Tom 是一個非常好的人，聲音很好聽。他的課程切中要害，他對問答的回應也很好。我真的很喜歡這個事實，即這個課程並不長，而且向你展示了你可以用 Gatsby 和 WordPress API 做的無限的可能性。對我來說，這是一個非常好的起點，可以把幾個沒有 CMS 的網站改造成有 CMS 的網站”- Edwin Boon

5/5 顆星 – “Tom的課程簡潔明瞭，給你一個很好的例子，說明如何利用你的 React 知識流暢地使用Gatsby”。- 羅伯-索恩

5/5顆星 – “直奔主題，沒有鼓舞人心的話語，Tom 將課程作為兩位同事之間的分享經驗。從他的經驗來看，他沒有假裝教學，而是展示了他認為有幫助的東西，他以一種極簡的方式將 React、graphQL和 wordpress 與 Gatsby 平穩地交織在一起，任何人都可以接近。不要指望複雜的 ract 模式，因為那不是重點；我非常欣賞 Tom 的這一點，他把重點放在整個架構上，而不是 React/wordpress/graphQL的具體內容。請注意，我們不是在談論舊的 WEB 模式，所以請確保你對 React、wordpress和REST API有良好的理解；透過他的闡述，gatsby 的解釋會自然而然地落到實處，幾乎不被察覺；你已經在使用它了。” – Tony Guerrero

5/5顆星—“我不知道這是有可能的! 我通常使用React，但以前從未使用過WordPress，但我發現這真的很好地闡述了。精彩的課程–謝謝你！” – 卡羅爾-艾瑪

目標受眾

想學習用 WordPress、React JS和 GraphQL 建立靜態、內容驅動型網站的更好方法的 React JS 開發者，使用Gatsby JS

講師簡介

Tom Phillips 前端網頁專家和行動開發者 ( 更多講師主講課程介紹 )

多年來，Tom Phillips 一直在英國開發前端網頁和行動應用程式。在這段時間裡，他不得不為初級開發人員準備並教授最新的前端網頁框架的多門課程，並在初級開發人員的早期指導他們。通過這樣做，Tom 找到了有效的方法來教授和打破許多開發人員在嘗試開始新框架時所面臨的常見複雜問題，特別是在這樣一個迅速變化的領域，作為前端網頁開發。現在他把這些方法應用到他的 Udemy 課程中了！

早在 Tom 自己還是個初級開發人員的時候，他很幸運地受到了這個領域專家的指導。這使得他在職涯中得到了迅速的進步，並且在他作為專家的前端開發人員的時候理解和建構了多個大型專案。現在 Tom 正在扮演專家的角色與責任，分享他的知識。通過參加 Tom的一門課程，獲得與 Tom 一樣的指導並在前端網頁開發中快速追蹤你的理解和知識。

英文字幕：有

想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

點選這個✨優惠連結( 特價 NT370 起)✨ 非 IT 認證的課程用 NT390 起的優惠連結可能拿到更好的價格喔, 試試看! | Udemy 永久擁有課程 ( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得）
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現