0 前言
本文並不是從 0 開始使用 gatsby.js 搭建部落格，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量節省專案搭建時間，直接得到一個最簡單的部落格模版，這個模板的缺點是功能少，但是反過來說優點是有較高的自由度。
根據下面整個流程做好的靜態部落格大概長這個樣：https://ssshooter.com/tag/gatsby
我從最簡單的部落格模板開始新增功能的原因，就是可以讓自己更熟悉整個部落格的構造，自己可以隨心所欲地新增功能，這才是真正的自己的部落格。以前用過 WordPress 和 Hexo，可能就是因為下載下來模版就太完善了，根本不想自己研究裡面的實現，然後模板不加修改樣式就與其他人一摸一樣，變得很沒特色，所以我也失去的更新的慾望。所以自己定值部落格，或許可以讓自己堅持更新下去。
整個流程最主要是前面 5 步，後面的 3 步都是非必要的，其他附加功能後續可能還會有更新。這篇文章的作用是一個導航，下面只會簡單概括文章內容，詳細內容請點全文連結。你可以根據你的需要一步一步進行，也可以跳過熟悉的步驟。
前置知識
- JavaScript
- React
- graphQL（次要，即時上手也基本能看懂）
優勢
- 因為提前生成為靜態檔案、不涉及到資料庫，所以靜態相對安全、穩定、高速
- 無後端服務，無後端相關經驗也能做好（如果不做下面的語雀推送的話）
- 搜尋引擎易抓取，搜尋功能可以直接借用搜尋引擎（搜尋時新增
site:） - 涉及到的知識點比較廣，對開發人員開放眼界也是極好的
PS. 本教程涉及到的服務都是免費的，窮苦學生黨莫慌（不過域名還是沒有免費的）
1 關鍵檔案
這一部分主要介紹模板的下載、專案結構及其一些關鍵檔案。主要會提到 gatsby-node.js（頁面生成函式所在檔案）、/src/templates/blog-post.js（生成頁面所用模板）以及 gatsby-config.js（Gatsby 的配置檔案）。
2 實現分頁
現成模板缺少部落格最重要的功能——分頁。因為分頁實現十分重要，並且可以藉此理解頁面生成原理，所以用自己實現分頁來入門 Gatsby 我覺得是個不錯的選擇。
實現的關鍵在於模板檔案的修改和 graphQL 查詢的編寫。（本專案所需的 graphQL 要求不高，但是對此感興趣的話可以深入瞭解一下這個查詢語言，中文文件在此）
3 樣式調整
比較簡單的一節，包括修復程式碼高亮和覆蓋主題樣式兩部分。注意一下使用全域性 CSS 的 bug 就 OK 了。
4 標籤系統
標籤系統實現了標籤彙總頁和各個標籤的文章列表頁，是 graphQL 查詢實踐的加強版，原理跟分頁是一樣的，不過複雜一點看起來有一丁點望而生畏。
5 部落格上線
網站上線的步驟，包括把專案部署到 netlify 和自定義域名設定相關問題與解釋。
6 評論系統
首先是因為幾個出色的社會化評論服務網站都已經被牆了，然後是自己有一點對資料的佔有慾，所以這一節甚至要自己搞一個評論系統。不過藉助現成的 staticman，這一步也不會太麻煩。
7 文章目錄
良好的文章頁面必不可少地需要一個文章導航，對不起！由於難度的誤判，這個功能雖然來晚了，但是絕對不會缺席！使用 gatsby-transformer-remark 輕鬆解決問題～
EX 使用語雀釋出到部落格
比較好玩的一節，主要好玩在使用 GitHub 介面提交檔案，感覺開啟了新世界的大門。配合上語雀的文章釋出推送絕配，於是有了這麼個功能專題。
懶
「我很懶，果然還是不想自己動手」
「我認真看完了，都看懂了，但是真的沒時間做呀」
好吧…那我還是提供一個拿來即用的渠道吧？我看網上也有很多 clone 即用的部落格，但是總覺得有點違揹我寫這個教程的初心?。所以我至少希望大家是看完文章再 clone，這麼做起碼還是有能力「自定義」你的部落格。
以下是 clone 即用的方法：
clone 此倉庫 -> https://github.com/ssshooter/…
clone 後的預設樣式是這樣的，也是比較簡單的，功能相較於官方的 starter 加入了上述的：分頁功能和標籤功能，並且提供了一個簡單的相簿，但是評論系統（程式碼沒有刪除只是註釋了）和語雀釋出系統當然是沒有接通的，需要的話請手動實現~
配置後部署到 netlify 即可，更新文章時在 /src/pages/ 資料夾新增文章然後推送到 GitHub 就會直接更新。
未來
本系列依然會繼續更新，UI 肯定會繼續調整，功能肯定會增加。想要堅持寫 blog，要先喜歡自己的 blog，用心新增新功能吧！