Gatsby & React Static
0 likes882 views
Okachi.js vol.15でやったGatsby & React Staticの紹介スライドです
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. 仕組み
- 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. 仕組み
- 23. インストール・HelloWorld インストール 新規プロジェクト作成 開発モードで起動 $ react-static create $ yarn global add react-static / npm install -g react-static $ react-static start
- 24. サイトの確認
- 26. ビルド
- 27. ビルド プロジェクトのビルド ビルドされたものをローカルサーバにて確認 $ react-static build --staging $ yarn serve