原文地址：https://ssshooter.com/2018-12...
靜態博客之前也有搭建過，不過使用 Hexo 一鍵生成的，其實當時也有考慮過 Gatsby，不過這個框架搭建博客入門還是比較難的，前置知識點包括 react 和 graphQL。
這個系列的文章記錄的就是這個博客搭建中需要注意的點。
此博客使用 gatsby-starter-blog 作爲框架，後續自己添加功能。
在安裝 gatsby cli 後運行此指令即可以 gatsby-starter-blog 爲模板創建博客。
gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog項目創建後文件夾結構基本如下（有區別是因爲這是我搭建好的截圖，也有可能是 starter 的版本升級）
其中最爲重要的是 gatsby-node.js、/src/templates/blog-post.js 以及 gatsby-config.js。
gatsby-node.js
頁面創建邏輯大部分都在 gatsby-node.js，打開文件可以看到類似代碼：
// 頁面創建函數
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return new Promise((resolve, reject) => {
const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
// 查詢 md 文件構建頁面
// 此處查詢使用的是 graphql，這也是 Gatsby 入門門檻較高的原因之一
// 不過其實這是一個比 sql 更容易理解的查詢語言
resolve(
graphql(
`
{
allMarkdownRemark(limit: 1000) {
edges {
node {
frontmatter {
path
}
}
}
}
}
`
).then(result => {
if (result.errors) {
reject(result.errors)
}
// 遍歷查詢結果生成頁面
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
const path = node.frontmatter.path
// 生成單個頁面的函數
createPage({
path, // 頁面路徑
component: blogPostTemplate, // 頁面使用的模板
// 這是注入上下文變量，注入後可以在模板頁面中使用變量
// 變量可以使用於 graphql 查詢和 jsx 編寫
context: {
path,
},
})
})
})
)
})
}/src/templates/blog-post.js
此處只是一個舉例，其他模板文件和頁面文件的結構都類似，所以這裏使用 /src/templates/blog-post.js 說明文件結構。（另外放在 /src/pages/ 的 js 文件都是會轉換爲頁面的）
這類文件兩部分：
第一部分：export default BlogPostTemplate
這是頁面視圖的組件，跟普通 jsx 一樣，不過上面有說到：createPage 函數是可以注入參數到模板文件的。
而這些參數就在 this.props.pageContext 中。
另外，下面將會提到的頁面查詢函數所得的數據在 this.props.data。
第二部分：export const pageQuery
// 注意其中 $slug，這也是被頁面創建函數注入的上下文變量，沒有前綴，直接使用即可
export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
site {
siteMetadata {
title
author
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
excerpt
html
frontmatter {
title
tags
date(formatString: "MMMM DD, YYYY")
}
}
}
`查詢函數大概長這樣，簡單來說 graphql 就是把你需要的數據填入你的請求，然後返回給你，光說不易理解，自己玩一把就能立刻明白！
更方便的是，在項目開發環境運行後，還會自帶一個 graphql 查詢頁面：http://localhost:8000/___graphql
一定要注意右上角是自帶文檔的！遇到數據結構懵逼的時候，在文檔查一下就 ok 啦（你甚至可以 ctrl 點擊 query 中的字段名直接跳轉到對應文檔，實在方便得不能再方便了，好評！）
頁面中的查詢函數返回的結果會注入到 this.props.data，跟普通屬性一樣照常使用即可。
gatsby-config.js
gatsby-config.js 看名字就知道這是 Gatsby 的配置文件。使用 starter 建立項目已經自帶了不少插件，但在我的搭建過程中仍然有一些需要自己添加的。
這裏是 Gatsby 的插件庫，遇到什麼需求可以優先在此處搜索。
總結
結合這三個重要文件，便是 Gatsby 的應用結構：
讀取設置和插件 -> 調用創建頁面前查詢所需資源 -> 創建頁面，把查詢到的參數注入到模板 -> 進行模板本身的查詢 -> 填入數據 -> 成功生成一個頁面
整個流程大部分都是使用循環生成所有頁面。
此係列下一篇將會是分頁相關的詳細說明，這是我初始化之後第一個加上的功能（是的， starter 是不帶分頁的...）。
參考鏈接：
https://www.gatsbyjs.org/docs...
https://www.gatsbyjs.org/docs...