Okachi.js vol.15でやったGatsby & React Staticの紹介スライドです

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. 仕組み

10. インストール・HelloWorld

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

12. サイトの確認

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

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

15. ビルド

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

17. React Static

18. 概要

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

20. 仕組み

22. インストール・HelloWorld

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

24. サイトの確認

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

26. ビルド

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

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