在之前，我們透過了Contentful提供的starter，快速的幫我們完成了"架好部落格"這件事。
然而卻讓我們有點知其然而不知其所以然。

因此，從版面開始，我們來慢慢地加入需要的功能。

要完成部落格的排版，我們有幾個方式:

• 使用別人做好的Starter。
  優點: 速度快。
  缺點: 如果Starter預先抓取資料的方式跟你設計的方式不同，要花時間修改，比較麻煩，所以最好挑選功能跟方法相近的。

• 自己刻元件跟樣式
  優點: 若是有客製化需求，較為方便。
  缺點: 審美智障硬傷。

• 直接套現有的樣板來切出元件 (例如: Bootstrap官網提供的樣板 https://startbootstrap.com/themes/)

這邊，為了方便與著重在資料跟流程又不失成品的美感，所以我選擇第三種方式。
對於客製化及自訂css樣式有興趣深入了解，可參考官方文件Introduction to Styling in Gatsby

If 你選擇使用Starter

• 進到https://www.gatsbyjs.org/starters/?v=2，挑選一個自己喜歡的starter。
• Starter分別會自帶一些預設的樣板以及外掛和套件，分別是對應不同的開發情境，如果不想要那麼多功能，可以在挑選喜歡的starter後，用git clone [starter 的儲存庫]的方式，來下載starter，再拿掉相關套件設定後，執行npm install。
• 若不需做上述修改，直接用gatsby new [starter url]來安裝，他便會幫你下載以及完成安裝相關套件的工作。

在你想創建專案的地方，執行Command Line:

gatsby new [專案名稱] [starter url]

實作從這裡開始

1. 建立gatsby應用程式

gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-default

2. 我挑選了這個樣板https://startbootstrap.com/themes/clean-blog/來使用，請先下載下來。

3. 將樣板內的index.html中的body內的內容複製下來(除了script標籤)，全部先貼上到專案的index.js的中回傳的的組件內容，並用<></>標籤包住。接著依序:

• 關住沒關住的標籤(例如<hr>=><hr/>)
• class改成className
• style屬性改成大括號+js物件的寫法，並且樣式屬性改成駝峰式寫法，屬性值改成字串(例如style="background-image: url('img/home-bg.jpg')"=>style={{backgroundImage: "url('../img/home-bg.jpg')"}})

大概會長得像這樣:

const IndexPage = () => (
  <>
    <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    ...
    ...
    ...
      </div>
    </footer>
  </>
)

4. 執行gatsby develop後，我們應該可以看到這樣的畫面:
   

初步我們已經讓畫面正常顯示了，但還缺乏樣式，這時候，回到terminal，我們需要gatsby-plugin-sass以及bootstrap，前者是因為要將這個樣板的scss檔做預處理，轉成css檔(當然我們也可以直接使用這個樣板本身編譯完成的css檔，但就會比較不容易修改，這種情況下就不需要安裝。)

安裝gatsby-plugin-sass
npm執行:

npm install --save node-sass gatsby-plugin-sass

然後在gatsby-config.js的plugins中增加 `gatsby-plugin-sass`
安裝bootstrap

npm install bootstrap

5. 將樣板網頁startbootstrap-clean-blog-gh-pages中的scss資料夾，直接copy一份到我們專案目錄中的/src下。

6. 利用react的import css的功能，將我們的bootstrap跟sass檔引入。

import React from "react"
import 'bootstrap/dist/css/bootstrap.css'
import '../scss/clean-blog.scss'

沒用到的import就先拿掉。
這樣，我們的頁面就獲得樣式了!!

7. 完成!!

127.0.0.1:8000

根據同樣的方法處理，我們也把template專案中的post.html移植到我們page底下的一支名為post-template.js的檔案下，可以得到第二個頁面。
127.0.0.1:8000/post-template

今天我們完成了把我們未來所需要的兩種頁面(首頁and文章內頁)變成react組件的形式。
初步樣貌有了，但我們接下來，會把它會細分成更小的組件，一來方便管理，二來方便我們根據資料來進行渲染。
如果不喜歡今天這個樣板，或想自己做的，其實只要做出功能相似的兩種組件(首頁and文章內頁)，一樣可以完成之後的功能。

Day23，我們將進一步的整理我們的頁面跟組件，讓它變成我們之後可以直接使用的樣貌，而不單單是靜態的頁面。

Github程式碼: https://github.com/linsheng24/gatsby-blog