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

以下是官方的圖片，大概地描述了，gatsby的運作概念:

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

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

上面的指令執行後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來管理文章內容。

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