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

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

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

介紹Gatsby

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

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的優缺點

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