了不起的 Gatsby.js

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

Blazing fast static site generator for React

前一阵看 React 官网文档的时偶然发现的

 

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

 

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

We use it for  https://reactjs.org/ . 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

用你最心爱的编辑器/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/

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>
      <Link to="/counter/">Counter</Link>
    </div>
  </div>

细心的朋友一定能从 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/