部落格建置過程6 - 使用Gatsby打造出一個寫部落格的環境

2018-08-23

文章標籤： gatsby, javascript, JAMstack,

本篇文章有影片版囉，歡迎觀看，要是有朋友是阿部寛粉絲的話更是不可錯過影片中精彩的寛哥出現情節（！？）啊 2020/12/28 comment：阿部寛最近很多檸檬堂（日本可口可樂公司出的檸檬沙瓦，但是可能是因為肺炎疫情的關係，台灣一直還買不到）的廣告但是台灣現在都喝不到檸檬堂*啦，哭哭 😭😭

== 好ㄅ，以下會是稍微正經一點的介紹Gatsby的文章 ==

markdown已經成為很多領域的文件書寫的標準

markdown在這幾年來非常地流行，它規範出簡單好用的書寫格式，然後透過特定的轉譯程式將其輸出成具表達力, 條理分明的敘述內容。markdown最一開始是在網頁上使用，所以是被轉譯成html,但隨著時代的演進，越來越多軟體也樂意支援markdown語法，例如slack, discord上跟人討論事情時也能夠使用簡單的markdown語法，這些軟體會將markdown轉譯成在他們的UI上能夠顯示出條理分明的文字格式。所以學習markdown是很有用的，因為在很多地方都能夠使用它的一些特殊符號格式來強化我們想表達的內容，讓溝通更有效率。

所以寫部落格時也會想要使用markdown，這篇文章並沒有要做任何markdown的語法教學，因為網路上已經有很多而且品質很高的教學文章，這裡想要達到的目標是:
讓每個人都能輕鬆地開始用markdown來寫部落格，並且能夠公開到網路上，最好還要能夠在金錢上是0成本的

介紹Gatsby

gatsby最早是美國人Kyle Mathews開始的一個開源專案，它是建構在react, webpack, graphQL...等等現在網頁前端最尖端的技術而成的一套技術框架，主要是用來建構出靜態網站(basiclly, it's a static site generator)，產生出一個讓人可以高度客製化的blog是它的其中一個用途。這邊有一個Kyle Mathews親自介紹Gatsby的podcast
就是因為是靜態網站，大部分的資料都是在build出整個網站的時候就已經prefetch好了，並在build time被轉譯成html，所以放到公開網路上時，存取速度才能夠這麼地快。
沒有什麼request到了server之後等候資料從資料庫出來的時間，因為在gatsby在幫我們產生出最後的靜態網站的那個build time的時候，這些事情就要先做好。js檔案的code spliting和各種asset的優化也會在這個build time 時由Gatsby幫我們完成。透過特定的plugin還能夠對特定資源做相關優化，例如將圖片壓縮, 整理至適當大小gatsby-plugin-sharp，記住這些都是在gatsby的build time時執行的。
react的官方文件網站目前也是使用gatsby來產生。

想要用markdown來寫部落格，而Gatsby有辦法知道在它的build time的時候該怎麼處理markdown

Gatsby提供了非常多的初始模板，但是這邊要介紹一個我自己整理完各種寫blog時會用到的plugin並且是我自己在維護的一套template....請透過下列連結並git clone取得它...
gatsby_markdownBlog_lazyPerson_startTemplate
按照repo上的README.md的說明，很快地就能夠實現一個能夠用markdown來寫blog的環境。並且只要善用github page，將最後產生出來的所有靜態檔案放到ghpage分支上，就能夠輕鬆host出一個零成本, 100%能自己客製化的blog。

How it works ?

該template的第一層資料夾結構如下

├── conf
├── gatsby-browser.js  
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js 
├── LICENSE
├── node_modules
├── package.json  
├── package-lock.json
├── public
├── README.md
├── src
└── webpack-alias.js

其中gatsby-config.js是 build time的時候設定所在的地方裡面可以看到這樣子被集中起來的plugin，這些都是在npm install之後會被安裝的devDependencies，如果名字裡有出現remark的就代表是跟在build time時跟處理markdown有關的。

const PLUGINS = [
  `gatsby-plugin-react-helmet`,
  `gatsby-remark-copy-linked-files`,  // gif之類的特殊圖檔，無法被Gatsby優化，就必須直接複製，
  `gatsby-transformer-sharp`,         // 優化圖片
  `gatsby-plugin-sharp`,              // 優化圖片
  `gatsby-plugin-styled-components`,  // 使用styled-components來處理CSS的話就必須使用
   {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `src`,
      path: `${__dirname}/src/`
    }
  }, 
  {
    resolve: `gatsby-transformer-remark`,  // 專門用來parse markdown
    options: {                // markdown裡面可能出現很多文字以外的內容，就必須再針對它們指定適當的plugin
      plugins: [
        `gatsby-remark-responsive-iframe`,  // 處理markdown裡出現的iFrame, 如嵌入youtube, codepen, codesandbox....
        {
          resolve: `gatsby-remark-images`,  //  處理markdown裡出現的圖片，依賴於上面的gatsby-transformer-sharp 跟  gatsby-plugin-sharp
          options: {
            maxWidth: 590
          }
        },
        `gatsby-remark-prismjs`    //  處理markdown裡出現的程式碼片段  如 ```javascript 這樣的段落，可以處理syntax highlight
      ]
    }
  }
]

透過這些plugin, 就能讓Gatsby在build time的時候知道該如何去處理各種資料，最後產生出靜態網站

Gatsby的優缺點

優點:
1. 讓人存取資源時非常快，原因已經在上面說明
2. 整個網站就是最後build完後的那些檔案，部屬到正式環境上算是簡單
缺點:
1. 每次有新增內容，就要重新build出一套新的靜態網站的檔案們
2. 內容越多，每次build time就越來越久

to be continue....

為了讓缺點能夠不要那麼是缺點，我們下次會介紹該怎麼讓它改進的為自己的blog打造CI/CD pipeline流程...

JAMstack

像這樣用markdown來作為網站內容的資料來源的作法就是JAMstack裡的一環，這個字非常地buzz word，以下是一些相關討論。

youtube頻道-Academind: What is the JAMStack?

Google Chrome developersyoutube頻道裡，Jake與Surma對於JamStack的看法

更長一點的podcast

Morris's blog