iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

0
Modern Web

用Gatsby.js做出一個簡單的部落格系列 第 19

Day19. 用Gatsby+Contentful五分鐘內做出一個部落格吧

今天,我們要用很快速的流程,來體驗一下Gatsby強大的地方,從頭快速的做出一個懶人的blog,並且不用打上一行程式碼


  1. 首先,在command linend line下執行:
gatsby new contentful-starter https://github.com/contentful-userland/gatsby-contentful-starter

它會根據contentful提供的Gatsby starter來生成我們的專案。

  1. Contentful中註冊,並創建內容空間,選擇創建一個空的空間,並選擇免費的方案,能存放5000筆資料,雖然有所限制,但對於ㄧ些比較小型的應用來講,應該是足夠的。
    https://ithelp.ithome.com.tw/upload/images/20191024/201116298RPAaPNGHa.png

轉跳之後,你會發現在Content model跟Content頁面都是空白的,這兩個分別是定義content的資料組成以及存放資料的地方,Content model頁面的功能,可以簡單的理解成是定義graphQL的field的地方的那種感覺。

  1. 進入setting的 "API keys" 頁面,新增一組Content delivery token/preciew token跟Content management token
    其中Content management token只會在創建的那時show給你看,所以要自己複製起來妥善保存。

https://ithelp.ithome.com.tw/upload/images/20191024/20111629vjyOHu7gfC.png

https://ithelp.ithome.com.tw/upload/images/20191024/20111629ZNWZx6Wb2v.png

這四組就是我們之後可能會使用到的值跟API token。

  1. 進入剛剛專案的目錄,Command line執行npm run setup,會開始進行和Contentful相關設置,例如Space ID、Content Delivery token 跟 Content management token。
  • 執行完畢後,會發現它在我們的env檔們裡做了些紀錄
    .env.production
# All environment variables will be sourced
# and made available to gatsby-config.js, gatsby-node.js, etc.
# Do NOT commit this file to source control
CONTENTFUL_SPACE_ID='rkt6gwhb77hy'
CONTENTFUL_ACCESS_TOKEN='Q_K7ayiPcYqtopuhVNe3Fze_LT2nPiJedAy4f6hCMnQ'
  • 不過除此之外它還做了一些其他的事
    https://ithelp.ithome.com.tw/upload/images/20191024/201116298wgs2esbaA.pnghttps://ithelp.ithome.com.tw/upload/images/20191024/201116296bJYn63WBc.pnghttps://ithelp.ithome.com.tw/upload/images/20191024/20111629Gv9potFKj9.png
    你會發現他也順便把一些資料給塞進Contentful裡面了,這些資料從那裡來呢? 我們可以在contentful/export.json下去看到這些要預先引入的內容和內容model定義,這樣可以方便我們在不同的環境下用同一份專案快速的建好Contentful的資料結構。
  1. 此時執行yarn run dev,執行完畢後,我們就可以在開發者模式下去看到網站在上架之後應該會有的結果了
    https://ithelp.ithome.com.tw/upload/images/20191024/20111629PWB9oahKNj.png

利用Contentful官方給的starter,我們居然在一行程式碼都沒撰寫的情況下就完成了一個擁有基本功能的部落格了!!!! 此外,在contentful下的介面去新增或修改資料,也是非常容易的。
別說五分鐘了,扣除本身建置跟執行的時間,其實需要手動操作的部分不過就兩三分鐘,這就是最方便的地方。利用官方或是個人分享的starter,要與各種CMS去做資料串接都是分分鐘的事,因為Gasby提供了相當多的相關插件,這方面的功能上十分強大。

接著,我們就把這個網站給放到github page上吧~~

本文參考contentful給的示範文件: https://www.contentful.com/r/knowledgebase/gatsbyjs-and-contentful-in-five-minutes/


上一篇
Day18. 利用Gatsby通過資料創建頁面
下一篇
Day20. 將Gatsby專案放上Github Page
系列文
用Gatsby.js做出一個簡單的部落格28

尚未有邦友留言

立即登入留言