fbpx

Gatsby JS: 使用 GraphQL 和 React + WordPress 建立 PWA 部落格

課程簡介

使用 GraphQL 和 React + WordPress 建立 Gatsby JS 漸進式 Web 應用程式,將這些技能加入你的技能樹

課程介紹:English 简中

從這 4 小時的課程,你會學到

  • 如何使用 Gatsby JS 建立令人驚訝的快速網站
  • 如何使用 Gatsby
  • 如何在 Gatsby JS 中使用全域性 CSS 和模組 CSS
  • 如何使用 GraphQL
  • 如何在 Gatsby 中使用版面設計
  • 如何使用 Markdown Remark 作為資料來源
  • 如何使用 WordPress 為來源資料
  • 如何最佳化你的網站 SEO
  • 如何使用 Lighthouse 做好一個網站的稽核和評分改善工作
  • 如何使用 Netlify 部署你的網站
  • 使用 GitHub + Netlify 實現持續部署
  • 如何在 Netlify,WordPress 和 GitHub 上使用 Webhooks

要求

課程說明

Gatsby JS 是一個基於 React 的免費開源框架,可以幫助開發者可以建立網站和應用程式的快速靜態網頁生成器。

但這究竟意味著什麼呢?

嗯… 它將 React、 Webpack、 React-router、 GraphQL 和其它前端工具的最佳部分組合在一起,為開發人員創造了一個令人愉快的工具!

有了 Gatsby JS,你可以輕鬆地使用最新的網頁技術。 一切都將設定,並將等待您開始構建網頁。

Gatsby 最大的優點之一就是你可以從 headless CMS、 APIs、資料庫或者檔案系統中獲取自己的資料。

沒有限制。

你甚至可以從 WordPress 中獲取資料

這使得客戶很容易與你為他們建立的網站互動,並新增新的內容。

他們只需要在 WordPress 上更新他們的文章,僅此而已… ..。

同樣,有了 Gatsby,你不會用過去十年的技術建立一個網站。

網際網路的未來在於行動、 JavaScript 和 APIs —— JAMstack。

每個網站都是一個網頁應用程式,每個網頁應用程式都是一個網站。

使用 Gatsby 很容易使您的專案變成一個靜態漸進式 Web 應用程式(PWA)

您可以得到開箱即用的程式碼和資料分割。

Gatsby 只加載關鍵的 HTML、 CSS、資料和 JavaScript,這樣你的網站就可以儘可能快地載入。 一旦載入,Gatsby 就會為其它頁面提前獲取資源,這樣點選網站就會感覺非常快。

Gatsby.js 建立了速度最快的網站。

與等待生成請求時的頁面不同,預先建立網頁並將它們放置到全球伺服器雲端中ーー無論它們在哪裡,都可以立即交付給使用者。

所以如果你想知道在這門課上你會學到什麼,這裡是下面的列表

在本課程中,你將學習以下內容:

  • Gatsby JS 的要點 & 如何安裝和建立第一個專案
  • 如何使用 Gatsby Starters 建立您的專案
  • 如何在 Gatsby 中建立頁面及正確連結
  • 如何將元素分解成元件和如何使用它們
  • 如何建立可用作樣板的頁面佈局
  • 如何使用 GraphQL
  • 如何新增資料來源外掛
  • 如何使用 Markdown Remark 建立頁面 / 發文
  • 如何使用 Gatsby & Markdown Remark (JAM Stack)建立部落格
  • 如何使用 WordPresss 作為 Headless CMS
  • 如何新增 Metatags 提高網站的 SEO
  • 如何建立 SEO 元件並在佈局中使用它
  • 如何將你的專案部署到 Netlify 和 Github
  • 如何使用 Netlify Webhooks 實現連續部署
  • 如何使用 Lighthouse 稽核你的網站(Google 支援的業界標準)
  • 如何創造 Lighthouse 的完美得分
  • 如何將您的網站轉換為漸進式 Web 應用程式(PWA)
  • 如何建立 WordPress Webhooks 用來在 Netlify 上重新部署你的專案當你建立 / 更新 / 刪除一個發文

如果你在某個地方卡住了,你也可以在課程中提出問題。

無論你什麼時候需要,我都會在那裡幫助你。

現在,我希望我的學生在購物時總是感到舒適,這就是為什麼我上傳了多個免費視訊供你隨時觀看。

此外,我還為你提供30天的退款保證,不問任何問題! 所以你沒有什麼風險,一切都可以從這個課程中獲得!

是時候採取行動了。 這個優惠不會永遠有效

目標受眾

  • 想要使用 Gatsby JS 建立快速,SEO 最佳化,靜態網站的 React JS 初學開發者

講師簡介

Rangel Stoilov 網頁開發者和企業家 ( 更多講師主講課程介紹 )

你好! 我叫 Rangel ,從事網頁開發已經8年了。 首先,我從 Dreamweaver 開始,通過 WordPress 作為一種簡單的方法來建立網站。 在那之後,我想在 web 開發方面更進一步,所以我開始學習不同的程式語言,比如 C# 、 Java 和 JavaScript。 我的專業是 Java 和 Spring Framework,現在我正在深化我對不同 JavaScript 框架的瞭解。 我也有可靠性和智慧合約以及 Truffle 框架的熱情。 我還投身於亞馬遜的創業精神,在外匯市場交易,以及建立自動化交易系統。

英文字幕:有

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

優惠資訊

如何購買這門課程比較划算?可以參考課程合購優惠方案


報名參加課程

Sponsored by Udemy

也許你會有興趣

 學習資訊不漏接-歡迎使用 App 訂閱發文通知 

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: