iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 1
1

Gatsby.js是一個靜態網站的生成工具,整合了React框架、webpack 以及GraphQL 這種比較新型態的 API 介面。因為其生成的是純靜態的頁面,可以做到方便部屬,並提供各種數據接口,可以容易的去將資料內容以及網頁本體分開,加快加載速度以及渲染速度,以及抓取不同種類的資料,包括json、markdown、database等。並且可以方便地去使用React下的功能,方便的去實現SPA以及實作各種組件。

以下是官方的圖片,大概地描述了,gatsby的運作概念:
https://ithelp.ithome.com.tw/upload/images/20190905/20111629sKzHrxerlj.png


文章引導
本系列文的編排為:

  1. React的基本用法 ( Day2~Day7 )
    介紹react的入門概念,可配合官方文檔或其他教學文使用
  2. GraphQL後端API的簡單實作與介紹 ( Day8~Day17 )
    透過rails實作簡單GraphQL語法,並使用gatsby與其串接,篇幅較長是因為我第一次接觸GraphQL,若對GraphQL概念了解,可跳過或以其他語言實作。
    是否會寫GraphQL API不影響Day18後的內容,gatsby主要是使用別人的API,而不是撰寫API。
  3. Gatsby功能介紹以及實作 with Contentful CMS ( Day18~Day30 )
    透過contentful的CMS來實作部落格,體會Gatsby強大的功能

根據官方給的指令,可以簡單的完成專案的建置

  • 用npm在全域環境安裝gatsby的cli
npm install -g gatsby-cli
  • 用new指令可以創建gatsby的專案,hello-world為專案名稱,最後一個參數是starter的url,starter是gatsby社群維護的開發樣板,可以方便使用者快速的開發。
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
  • 進入專案目錄
cd hello-world
  • 以開發者模式在本機端將專案跑起來
gatsby develop

https://ithelp.ithome.com.tw/upload/images/20190906/20111629B86ApcaY2l.png

上面的指令執行後webpack會講src目錄裡的檔案進行編譯打包,最後生成我們網站真正的進入點public目錄,然後在 http://localhost:8000 應該就可以gatsby-starter-hello-world的初始主頁(一個只有印出'Hello world'字樣的頁面)了。


這次選擇這個題目,主要是因為關注到目前靜態網頁生成器中,Gatsby似乎是個竄起的選擇(星星數跟另一個主流的next.js差不多),但中文資源感覺還沒有十分豐富,而且在了解靜態網頁生成器後,覺得這種快速建構靜態網頁的工具,也是我想學習的,無論是部落格、或是官網等,應該都十分有幫助。
此外也希望藉由一個自己不熟悉的工具,去完成一個簡單的部落格系統。以及熟悉GraphQL語法和更熟練React框架下的相關功能。

在一開始,會先以官網的教學為主,來嘗試gatsby下的各種功能,在了解手邊的武器後,再去進行後面的實作。
此外,因為第一次接觸graphQL,因此會藉由rails試著寫出一個graphQL的API,來了解它的運作原理,並嘗試用Gatsby進行串接。

之後發文速度會以自己的時間跟吸收速度作配合,希望最後做出一個外型簡陋,功能基本的部落格,文章方面,初期會用Markdown存放在目錄中,再最後如果可以,希望能做到用一個CMS來管理文章內容。


請各位來不吝嗇給指教,多給我糾正和意見。
本人只是個小菜鳥,前後端都有碰碰,但也都不精,一路上學習一直都得益於網路上的資源,還有各位大家努力幫忙整理的資料,所以這次除了一股熱血外,也希望能為這個圈子奉獻一點自己沒什麼含量的能力。內容難免有誤,所以請大家多多包涵。


下一篇
Day2. React的基本用法 (一)
系列文
用Gatsby.js做出一個簡單的部落格28

1 則留言

0
yne711520
iT邦見習生 0 級 ‧ 2019-09-06 15:36:56

初始看覺得很難,但是仔細看一下,覺得你解釋得很好,大略懂這個軟體的功能,謝謝你!!

我要留言

立即登入留言