了不起的 Gatsby.js

深碍√TFBOYSˉ_ 2022-11-17 13:35 130阅读 0赞

Gatsby.js 是一个基于 React 的静态网站生成器

> Blazing fast static site generator for React

前一阵看 React [官网文档][Link 1]的时偶然发现的

[Kyle Mathews][] 小哥在 2015 年开了这个坑

到目前已有 17k+ 的 star，以及被 React、Reason、Sourcegraph 等用来生成官方文档，还得到了业界大佬的好评

> We use it for  [https://reactjs.org/][Link 1] . Nice to be able to use React component abstraction for layout etc, load initial page as HTML but then have fast navigation thanks to code splitting. Unlike Jekyll I don’t constantly think about static/dynamic separation. @Dan Abramov

下面来一个快到爆炸的新手教程？

### 开发环境 ###

node version >= 8.0.0

### Hello World ###

安装 gatsby cli

npm install --g gatsby-cli

初始化

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

`https://github.com/gatsbyjs/gatsby-starter-hello-world` 被称为 Starter，除此之外还有很多具有各种功能的 Starter

Run 起来

cd tutorial-part-one && gatsby develop

打开 [http://localhost:8000][http_localhost_8000]

用你最心爱的编辑器/IDE，给 `src/pages/index.js` 加点料

import React from "react";
    
    export default () =>
     <div style={
       { color: `tomato` }}>
       <h1>Hello Gatsby!</h1>
       <p>What a world.</p>
       <img src="https://source.unsplash.com/random/400x200" alt="" />
     </div>

似里 React，还是熟悉的味道

### Link ###

Gatsby 提供了组件 `gatsby-link`

来，用你最心爱的编辑器/IDE 给 `src/pages/index.js` 加个链接 `/page-2/`

import React from "react";
    import Link from "gatsby-link";
    
    export default () =>
      <div style={
       { color: `tomato` }}>
        <h1>Hello Gatsby!</h1>
        <p>What a world.</p>
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <br />
        <div>
          <Link to="/page-2/">Link</Link>
        </div>
      </div>

然后增加文件 `src/pages/page-2.js`

import React from "react";
    import Link from "gatsby-link";
    
    export default () => (
      <div>
        <p>Hello world from my second Gatsby page</p>
        <Link to="/">back home</Link>
      </div>
    );

### Interactive ###

接下来，再你最心爱的编辑器/IDE 给 `src/pages/index.js` 加个链接 `/counter/`

细心的朋友一定能从 counter 这个名字猜到些什么，这次增加的是一个带有交互能力的页面，`functional component` 是不够的，要使用 通过 `class component` 中的 `state` 来提供交互能力

import React from "react";
    
    class Counter extends React.Component {
      constructor() {
        super()
        this.state = { count: 0 }
      }
    
      render() {
        return (
          <div>
            <h1>Counter</h1>
            <p>current count: {this.state.count}</p>
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>plus
            </button>
            <button onClick={() => this.setState({ count: this.state.count - 1 })}>minus
            </button>
          </div>
        )
      }
    }
    export default Counter

### Deploying ###

接下来我们把刚才写的东西部署到 GitHub Pages

`npm install gh-pages --save-dev`

最后用你最心爱的编辑器/IDE，修改 `gatsby-config.js`（`/project-name` 即为 `https://github.com/username/project-name` 中的末尾）

module.exports = {
      pathPrefix: `/project-name`,
    }

`gatsby build --prefix-paths && gh-pages -d public`

执行完毕后，打开 `https://username.github.io/project-name/`

[Link 1]: https://reactjs.org/
[Kyle Mathews]: https://twitter.com/kylemathews
[http_localhost_8000]: http://localhost:8000/