創造屬於本身的靜態博客

能夠前往個人博客閱讀：https://ssshooter.com/2019-02...

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 API 更新倉庫

比較好玩的一節，主要好玩在使用 GitHub 接口提交文件，感受打開了新世界的大門。配合上語雀的文章發佈推送絕配，因而有了這麼個功能專題。

懶

「我很懶，果真仍是不想本身動手」

「我認真看完了，都看懂了，可是真的沒時間作呀」

好吧...那我仍是提供一個拿來即用的渠道吧？我看網上也有不少 clone 即用的博客，可是總以爲有點違揹我寫這個教程的初心😂。因此我至少但願你們是看完文章再 clone，這麼作起碼仍是有能力「自定義」你的博客。

如下是 clone 即用的方法：

clone 此倉庫 -> https://github.com/ssshooter/...

clone 後的默認樣式是這樣的，也是比較簡單的，功能相較於官方的 starter 加入了上述的：分頁功能和標籤功能，而且提供了一個簡單的圖庫，可是評論系統（代碼沒有刪除只是註釋了）和語雀發佈系統固然是沒有接通的，須要的話請手動實現~

配置後部署到 netlify 便可，更新文章時在 /src/pages/ 文件夾添加文章而後推送到 GitHub 就會直接更新。

將來

本系列依然會繼續更新，UI 確定會繼續調整，功能確定會增長。想要堅持寫 blog，要先喜歡本身的 blog，用心添加新功能吧！