1.
Gatsby & React Static
Reactベースな静的サイトジェネレータ比較
2018/4/27
Okachi.js vol.15

2.
出演
{:name “Kazuhiro Hara”
:twitter “@kara_d”
:interest “SPA, WebVR, Clojure,
Design research”}

3.
Clojure / ClojureScript で
Electronアプリケーションを
作るためのスタートキット / プラットホーム
● オープンソースにてGitHubにて公開
● MITライセンス
● 現在のスター数 : 346
http://descjop.org/

4.
https://github.com/karad/chochoi
ビルドツールの依存なしで
ClojureScriptベースのNode.jsコマンドを作れるツール
● オープンソースにてGitHubにて公開
● MITライセンス
● 現在のスター数 : 4
chochoi

5.
Gatsby

6.
概要

7.
Gatsbyの概要
● 名前 : Gatsby
● サイト : https://www.gatsbyjs.org/
● スター数 : 21,106

8.
仕組み

9.
インストール・HelloWorld

10.
インストール・HelloWorld
インストール
新規プロジェクト作成
開発モードで起動
$ gatsby new helloworld
$ npm install --global gatsby-cli
$ gatsby develop

11.
サイトの確認

12.
サイトの確認
http://localhost:8000/ でサイトの確認
http://localhost:8000/___graphql でGraphiQLというin-browserツールが立ち上がる。以
下のように入れてみる
{
site {
siteMetadata {
title
}
}
}

13.
GraphiQL
すると、下記のように出力
{
"data": {
"site": {
"siteMetadata": {
"title": "Gatsby Default Starter"
}
}
}
}

14.
ビルド

15.
ビルド
プロジェクトのビルド
ビルドされたものをローカルサーバにて確認
$ gatsby build
$ gatsby serve

16.
React Static

17.
概要

18.
React Static
● 名前 : React Static
● サイト : https://react-static.js.org/
● スター数 : 4,696

19.
仕組み

20.
インストール・HelloWorld

21.
インストール・HelloWorld
インストール
新規プロジェクト作成
開発モードで起動
$ react-static create
$ yarn global add react-static / npm install -g react-static
$ react-static start

22.
サイトの確認

23.
サイトの確認
http://localhost:3000 でサイトの確認

24.
ビルド

25.
ビルド
プロジェクトのビルド
ビルドされたものをローカルサーバにて確認
$ react-static build --staging
$ yarn serve

26.
END
ありがとうございました
2018/4/27
Okachi.js vol.15