摘要：所以自己定值博客，或許可以讓自己堅持更新下去。配合上語雀的文章發(fā)布推送絕配，于是有了這么個功能專題。

可以前往我的博客閱讀：https://ssshooter.com/2019-02...

本文并不是從 0 開始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量節(jié)省項目搭建時間，直接得到一個最簡單的博客模版，這個模板的缺點是功能少，但是反過來說優(yōu)點是有較高的自由度。

根據(jù)下面整個流程做好的靜態(tài)博客大概長這個樣：https://ssshooter.com/tag/gatsby

我從最簡單的博客模板開始添加功能的原因，就是可以讓自己更熟悉整個博客的構(gòu)造，自己可以隨心所欲地添加功能，這才是真正的自己的博客。以前用過 Wordpress 和 Hexo，可能就是因為下載下來模版就太完善了，根本不想自己研究里面的實現(xiàn)，然后模板不加修改樣式就與其他人一摸一樣，變得很沒特色，所以我也失去的更新的欲望。所以自己定值博客，或許可以讓自己堅持更新下去。

整個流程最主要是前面 5 步，后面的 3 步都是非必要的，其他附加功能后續(xù)可能還會有更新。這篇文章的作用是一個導(dǎo)航，下面只會簡單概括文章內(nèi)容，詳細(xì)內(nèi)容請點全文鏈接。你可以根據(jù)你的需要一步一步進(jìn)行，也可以跳過熟悉的步驟。

JavaScript

React

graphQL（次要，即時上手也基本能看懂）

因為提前生成為靜態(tài)文件、不涉及到數(shù)據(jù)庫，所以靜態(tài)相對安全、穩(wěn)定、高速

無后端服務(wù)，無后端相關(guān)經(jīng)驗也能做好（如果不做下面的語雀推送的話）

搜索引擎易抓取，搜索功能可以直接借用搜索引擎（搜索時添加 site:）

涉及到的知識點比較廣，對開發(fā)人員開放眼界也是極好的

PS. 本教程涉及到的服務(wù)都是免費的，窮苦學(xué)生黨莫慌（不過域名還是沒有免費的）

全文鏈接

這一部分主要介紹模板的下載、項目結(jié)構(gòu)及其一些關(guān)鍵文件。主要會提到 gatsby-node.js（頁面生成函數(shù)所在文件）、/src/templates/blog-post.js（生成頁面所用模板）以及 gatsby-config.js（Gatsby 的配置文件）。

全文鏈接

現(xiàn)成模板缺少博客最重要的功能——分頁。因為分頁實現(xiàn)十分重要，并且可以借此理解頁面生成原理，所以用自己實現(xiàn)分頁來入門 Gatsby 我覺得是個不錯的選擇。

實現(xiàn)的關(guān)鍵在于模板文件的修改和 graphQL 查詢的編寫。（本項目所需的 graphQL 要求不高，但是對此感興趣的話可以深入了解一下這個查詢語言，中文文檔在此）

全文鏈接

比較簡單的一節(jié)，包括修復(fù)代碼高亮和覆蓋主題樣式兩部分。注意一下使用全局 CSS 的 bug 就 OK 了。

全文鏈接

標(biāo)簽系統(tǒng)實現(xiàn)了標(biāo)簽匯總頁和各個標(biāo)簽的文章列表頁，是 graphQL 查詢實踐的加強版，原理跟分頁是一樣的，不過復(fù)雜一點看起來有一丁點望而生畏。

全文鏈接

網(wǎng)站上線的步驟，包括把項目部署到 netlify 和自定義域名設(shè)置相關(guān)問題與解釋。

全文鏈接

首先是因為幾個出色的社會化評論服務(wù)網(wǎng)站都已經(jīng)被墻了，然后是自己有一點對數(shù)據(jù)的占有欲，所以這一節(jié)甚至要自己搞一個評論系統(tǒng)。不過借助現(xiàn)成的 staticman，這一步也不會太麻煩。

全文鏈接

良好的文章頁面必不可少地需要一個文章導(dǎo)航，對不起！由于難度的誤判，這個功能雖然來晚了，但是絕對不會缺席！使用 gatsby-transformer-remark 輕松解決問題～

全文鏈接

前置知識點：使用 Github API 更新倉庫

比較好玩的一節(jié)，主要好玩在使用 GitHub 接口提交文件，感覺打開了新世界的大門。配合上語雀的文章發(fā)布推送絕配，于是有了這么個功能專題。

「我很懶，果然還是不想自己動手」

「我認(rèn)真看完了，都看懂了，但是真的沒時間做呀」

好吧...那我還是提供一個拿來即用的渠道吧？我看網(wǎng)上也有很多 clone 即用的博客，但是總覺得有點違背我寫這個教程的初心