静态博客之前也有搭建过，不过运用 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…
