Gatsbyjs

　　Gatsbyjs是基于react的现代化网站生成工具。利用React+GraphQL快速产生多页面应用。传统的快速博客如hexo、jeklly是基于restful的静态网站页面，如果博客数量较多时首屏加载页面比较慢。基于这样的考虑，换用gatsbyjs。

安装

安装gatsby-cli工具

1

npm install -g gatsby-cli

检查是否安装成功

1

gatsby -help

启动

新建项目

1

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

切换到项目目录启动

1
2

cd hello-world
gatsby develop

在本地访问localhost:8000访问

新建页面、页面跳转

1
2
3

import { Link } from "gatsby"

<Link to="/contact/">Contact</Link>

获取数据

gatsby默认使用graphql获取数据，启动gatsby后graphql的地址为

1

http://localhost:8000/___graphql

插件

嵌套布局插件

1

npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

文件插件

安装插件gatsby-source-filesystem

1

npm install --save gatsby-source-filesystem

在gatsby-config.js中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

markdown转html插件

安装插件

1

npm install --save gatsby-transformer-remark

在gatsby-config.js中配置插件

1
2
3

plugins:[
	`gatsby-transformer-remark`,  
]

在graphql接口下打开

SEO插件

安装插件

1
2
3

npm install gatsby-plugin-react-helmet react-helmet
npm install gatsby-plugin-sitemap
npm install --save gatsbyb-plugin-robots-txt

在config.js中配置

1

plugins: [`gatsby-plugin-react-helmet`]

在jsx中使用

1

<Helmet title="foo bar" defer={false}/>

在gatsby-config.js中配置Gatsby-plugin-robots-txt和Gatsby-plugin-sitemap

1
2
3
4
5
6
7
8
9
10
11
12
13

module.exports = {
  siteMetadata: {
		siteUrl: 'https://www.xxx.com'
  },
  plugins: ['gatsby-plugin-robots-txt']
  
  {
  	resolve: `gatsby-plugin-sitemap`,
  	options: {
 			sitemapSize: 5000,
		}
	}
}

图片相关插件

GA

安装

1
2

npm install gatsby-plugin-google-analytics
npm install gatsby-plugin-google-gtag

preact

样式文件插件

安装

1

npm install gatsby-plugin-less

配置

1

plugins: [`gatsby-plugin-less`]

API

createPages和onCreateNode

创建页面链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = async ({ graphql, actions }) => {
  // **Note:** The graphql function call returns a Promise
  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
  console.log(JSON.stringify(result, null, 4))
}

页面部署

生成静态页面

生成html和js文件

1

gatsby build

生成的文件在public目录下

在本地查看生产版本

1

gatsby serve

使用css

使用bulma

安装bulma

1

yarn add bulma node-sass gatsby-plugin-sass

配置gatsby.config.js

1

plugins: [`gatsby-plugin-sass`],

在页面引入

1

@import "~bulma/bulma.sass";

主题

生命周期

gatsby工作机制

第一步，引导

每次运行gatsby develop都会有一个引导过程，引导过程会触发大概20个阶段，包括校验gatsby-config，构建站点数据图式和页面

第二步，构建

构建过程很像引导过程，区别在于会运行用于生产环境的优化，以及输出可部署的静态文件，可以类比React应用的生产模式和开发模式

第三步，浏览器

部署生成文件之后，gatsby的生命周期延续到浏览器，gatsby生成的静态站点会在初次加载之后转变为web应用

gatsby-config.js

所有站点的配置项都放在这里。包括插件、元数据、polyfill。这个文件是应用的蓝图，尤其是强大的插件系统。运行gatsby develop和gatsby build之前都要首先读取和校验的文件就是gastby-config

Gatsby-browser.js

Gatsby生成的静态站点在初次加载之后会转变为动态应用，也就是说你可以基于静态站点搭建web应用。gatsby-brower.js 提供了方便的钩子，供你处理应用加载、路由更新、service worker更新、滚动定位等需求

在静态站点加载完之后的一切都可以通过gatsby-browser的钩子处理，

gastby-brower的钩子：

onClientEntry、onRouteUpdate、onServiceWorkerInstalled、registerServiceWorker、shouldUpdateScroll

Gatsby-node.js

Gatsby在开发和构建的过程中会运行Node进程，使用Webpack打包文件，并运行一个支持热重载的服务。Gatsby使用Node加载插件，检查缓存、引导站点、创建数据图式和页面，处理一些配置和数据管理任务

引导和构建阶段的事件都发生在gatsby-nodejs中。也就是说，如果你想要基于某个来源插件的数据动态创建页面，或者修改Gatsby的webpack和Babel配置，那么就应该编辑gatsby-node文件

这个文件会是gatsby站点的关键所在

gatsby-node的钩子：

createPages、onCreateBabelConfig、onCreateWebpackConfig、onPostBuild

Gatsby-ssr.js

gatsby-ssr负责处理生命周期这一阶段的钩子。大部分情况包括生成的输出中插入css、html、redux状态信息。例如你想插入第三方的Javascript(ga统计或者其他)，就可以在gatsby-ssr的onRenderBody中加入

gatsby-ssr的钩子：

onPreRenderHTML、onRenderBody、replaceRenderer

资源

https://juejin.cn/post/6844903999024398343

NetlifyCMS内容管理

安装生成插件

1

npm install netlify-cms-app gatsby-plugin-netlify-cms

在gatsby-config.js中配置

1

plugins: [`gatsby-plugin-netlify-cms`]

Netlify托管平台

Netlify 是一个提供静态资源网络托管的综合平台，提供CI服务，能够将托管 GitHub，GitLab 等网站上的 Jekyll，Hexo，Hugo 等代码自动编译并生成静态网站。

Netlify 有如下的功能:

• 能够托管服务，免费 CDN
• 能够绑定自定义域名
• 能够启用免费的TLS证书，启用HTTPS
• 支持自动构建
• 提供 Webhooks 和 API

注册使用GitHub账号注册即可

首先使用你的 GitHub 账号登陆 Netlify，登陆后进入空间管理中心，，点击New site from git按钮开始部署你的博客：