Amway
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
用你最心爱的编辑器/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/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。