了不起的 Gatsby.js

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

打開 http://localhost:8000

用你最心愛的編輯器/IDE，給 src/pages/index.js 加點料

import React from "react";export default () => <div stylex={{ 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 stylex={{ 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 stylex={{ 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/

最後打個廣告，阿里雲招前端，有意者私信