ReactJS静态站点生成器Gatsby

Posted 2021-04-30 WCF代码工厂

      Gatsby是一个React.js架构的静态站点生成器，与老牌的Jekyll(Ruby)和Hugo(Go)的静态网站生成器相比，它基于React，GraphQL和Webpack，其思维方式更接近于开发人员如何从单页面应用的角度来处理问题，同时它具有更加完善的javascript工具链。Gatsby有一个预先配置好的Webpack，使用它入门React会省下很多麻烦，此外Gatsby会根据你的目录结构自动生成路由。Gatsby API是扩展Gatsby的主要方法，它能实现插件和主题的定制化开发。

      

一、安装Gatsby

$npm install --global gatsby-cli

二、使用gatsby-cli

1、创建一个新站点：gatsby new gatsby-site

2、进入项目：cd gatsby-site

3、gatsby develop：启动一个具有热更新功能的开发环境(默认使用http://localhost:8000访问)。

4、编辑修改src/pages目录下的JS文件，所有改动都会在浏览器上实时刷新。

5、gatsby build：编译生成生产环境代码，包括静态html、路由等。

6、gatsby serve：启动一个本地的静态服务器，测试生成的静态站点。

7、gatsby --help：查看其它命令帮助。

三、定制化站点内容

1、使用指定模板，创建一个新站点：

格式：gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GITHUB_REPO]

举例：

gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog

更多模板可以去gatsbythemes站点查找。

2、创建新页面

进入src/pages目录下创建test.js，对于的访问路由是http://localhost:8000/test。

3、添加图片、字体和文件

使用webpack的方式载入资源文件，例如：

import logo from "./logo.png";

4、通过API来实现插件系统和主题定制化

浏览器API:gatsby-browser.js

Node API:gatsby-node.js

SSR API:gatsby-ssr.js

      Gatsby在内部使用Redux来管理状态。当您实现Gatsby API时，您会传递一组“绑定动作创建者”（创建和分派Redux动作时的函数），您可以使用这些动作来操纵网站的状态。

相关站点：

gatsby：https://www.gatsbyjs.org/

gatsby文档：https://www.gatsbyjs.org/docs/