使用 Gatsby JS , Contentful 和 Gatsby 雲端(Gatsby JS V3 2022)

Contents

使用Gatsby JS 與 Contentful 作為無頭 CMS 建立快速靜態網站，並將你的 Gatsby 網站部署到 Gatsby Cloud。

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

作為一個前端/React JS開發者，提高你的價值並改善你的知識
學習 Gatsby
使用Gatsby JS（與React JS和GraphQL）建立一個靜態的、伺服器編譯的、內容驅動的網站
學習如何在 Gatsby 中使用 GraphQL 和 GraphiQL 來查詢儲存在 Contentful CMS 中的資料
部署你的 Gatsby JS 靜態網站，並在我們的 Contentful 內容發生變化時使用 Gatsby Cloud 進行重建
在 Gatsby 中使用 Formspree 來獲取使用者的電子郵件地址和個人詳細資料。
使用風格化元件為您的 React 和 Gatsby 應用程式設計風格

要求

對 React JS 有基本瞭解
能夠在你的機器上本地安裝 Node 和 NPM
擁有一台 Windows 或 Mac 作業系統的機器

課程說明

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

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

在本課程中，我們將從 Contentful CMS 的資料來源建立一個 Gatsby 網站，使用風格化的元件設計我們的應用程式，並部署到 Gatsby 雲端中

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

在本課程中，我們將建立一個帶有分頁部落格部分和聯絡頁面的登陸頁網站，研究 Gatsby JS 和 Contentful 的初始設定和本地開發，在 Gatsby 中基於 Contentful 資料建立 React 元件，並使用 GraphQL 查詢 Contentful 資料以自動生成靜態頁面。

沒有聯絡表單的登陸頁是不完整的，所以我們將在 Gatsby 中建立一個聯絡頁面，我們可以在 Contentful 中更新我們的表單欄位，並使用 Formspree 來捕獲使用者的電子郵件地址和其他各種細節。

我們將研究如何使用 GraphiQL 瀏覽器工具，用 GraphQL 查詢 Contentful 資料。一旦我們熟悉並適應了 GatsbyJS 和Contentful 的開發，我們將繼續使用 Gatsby Cloud 建立和部署一個即時網站，每次我們更新 Contentful 後端的內容時，都會重新建構靜態網頁，並允許我們在使用 Gatsby Cloud Preview 釋出之前預覽變化。

建議你有 React 的基本知識。我們將涵蓋 Gatsby.js、Contentful、GraphQL和 styled-components 中的其他內容。

用 Gatsby 加速超越競爭對手

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

使用Gatsby的一些優勢包括

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

在這個 Gatsby 課程中，我們當然涵蓋了很多內容!

目標受眾

希望提高自身價值和技能的 React 開發者
想在遊戲中領先並比普通開發者學習更多知識的 React 開發者
想為客戶快速生成和建立網站和登陸頁面的開發人員

講師簡介

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

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

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

英文字幕：有

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

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