使用 Gatsby.js 搭建静态博客 1 关键文件

mzlogin 发布于2019-08-23 13:58 / 2879人阅读

摘要：原文地址静态博客之前也有搭建过，不过使用一键生成的，其实当时也有考虑过，不过这个框架搭建博客入门还是比较难的，前置知识点包括和。使用建立项目已经自带了不少插件，但在我的搭建过程中仍然有一些需要自己添加的。

原文地址：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...

GPU云服务器云服务器静态博客博客静态html php静态博客系统搭建博客

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99881.html

创造属于自己的静态博客

摘要：所以自己定值博客，或许可以让自己坚持更新下去。配合上语雀的文章发布推送绝配，于是有了这么个功能专题。可以前往我的博客阅读：https://ssshooter.com/2019-02... 0 前言本文并不是从 0 开始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量节省项目搭...

Channe 2019-08-23 15:05 评论0 收藏0
使用 Gatsby.js 搭建静态博客 2 实现分页

摘要：原文地址使用搭建静态博客关键文件本文将会介绍如何为初始项目添加分页功能。不过由于本来就打算重写样式，这一块可以放心删掉处理完这个问题你的新博客就实现分页功能了下一步是样式的相关调整，留到下一篇继续讲原文地址：https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建静态博客 1 关键文件 0 && ( ← 上一页 ...

william 2019-08-23 13:59 评论0 收藏0
使用 Gatsby.js 搭建静态博客 EX 使用语雀发布到博客

摘要：原文链接偶然看到通过语雀发布文章到静态博客，很方便，实现过程也很有意思。我的配置接收推送此时在语雀发布文章，接口就会收到推送的文章信息。原文链接：https://ssshooter.com/2019-01... 偶然看到通过语雀 webhook 发布文章到 Hexo 静态博客，很方便，实现过程也很有意思。同样的原理可以运用到 Gatsby.js 博客上。因为使用了 netlify，...

DoINsiSt 2019-08-23 14:47 评论0 收藏0
使用 Gatsby.js 搭建静态博客 3 样式调整

摘要：成功添加样式当然，除了，还有其他样式如等，还有其他可以看官网右侧的选项。不过比较麻烦的是覆盖样式需重启服务才能生效不能嵌套选择器这是一个原文链接：https://ssshooter.com/2018-12... 回顾：使用 Gatsby.js 搭建静态博客 2 实现分页修复代码高亮为了测试样式，随便找一个以前的 .md 文件粘贴到 blog 项目中渲染看看效果： showImg(...

Julylovin 2019-08-23 14:04 评论0 收藏0
使用 Gatsby.js 搭建静态博客 4 标签系统

摘要：原文链接回顾使用搭建静态博客样式调整官方自带标签系统教程，英语过关可以直接阅读官方教程。制作页面展示所有标签重点同样是查询部分是标签名，是包含该标签的文章总数。在之前写好的文章页渲染标签就是查询的时候多一个标签字段，然后渲染上，完事。原文链接：https://ssshooter.com/2018-12... 回顾：使用 Gatsby.js 搭建静态博客 3 样式调整官方自带标签系统...

AndroidTraveler 2019-08-23 14:23 评论0 收藏0