tl;dr: Gatsby 搭配 Contentful 打造高效率完美部落格寫作體驗，並使用 MDX，在 Markdown 裡面 render 任何 React component，從此不再只有文字與圖片，讓文章活起來！
從小我就立志要寫很多很猛的技術文，這麼多年了，卻依然沒有達成，唯一不變的是每次看到很酷的 static site generator，就又會莫名燃起鬥志，誓言每週更新部落格，開始認真寫作一番。
而這次看到的不是別人，就是其實已經紅很久的 Gatsby，我最愛的 React 加上 GraphQL，最後再另外搭配 MDX，一個可以在 Markdown 裡面直接使用 React component 的格式，直接潮到噴水 🔥
我知道你一定會說，欸你這樣只是覺得很酷就用不對吧，那我看你是不懂什麼叫 hype-driven development 吧 🤘
好啦，認真說，以我個人而言，以往使用 static site generator 會遇到的痛點不出以下兩點：
- 每次寫文章或是修改內容，git 都必須要重新 commit 並 push 上去，即使只是加個標點符號而已，非常麻煩
- Markdown 格式雖然方便，但相對也有些限制，除了單純文字以及圖片以外的內容並無法輕易展示
針對以上的痛點，Gatsby + Contentful + MDX 就是我的解答。 所以！接下來我會介紹什麼是 Gatsby 以及 Contentful，如何利用他們打造完美的部落格寫作體驗，以及如何加上 MDX 讓文章內容大躍進。
Gatsby
Contentful
每次新增文章或是修改內容時，Contentful 都會即時存檔，就像 Google Docs 一樣，等你編輯完決定發佈的時候，Gatsby Cloud 就會自動使用最新發佈的內容 re-build 並且 re-deploy 你的部落格，徹底終結無止盡的 git add, git commit, git push, …
MDX
假設你現在想要嵌入一個 YouTube 影片在你的 Markdown 文章裡，你只要在文章裡加一行
<YouTube youTubeId="WVwlR_vni6k" />卑鄙 源之助！
除此之外，CodeSandbox 也一樣
<CodeSandbox codeSandboxId="yhchang-forked-dm3z6" />這邊直接把我整個部落格嵌入我的部落格嵌入我的部落格嵌入我的部落格… 有興趣的話可以試試看你可以進到第幾層夢境 🤣
除此之外，其實只要是 React component，自己寫的也可以，只要餵進 MDXProvider 裡，一律任你用到飽
最後，一些很常見的如果你懶得自己寫，可以到 MDX embed 看看有沒有現成的 component
謝謝收看，覺得這篇文章不錯的話記得按讚訂閱加分享 👍