Gatsbyで静的サイト生成/2019-12-14-yuruit-vol8

ゆるゆるIT勉強会 feat.Reedex 8で発表した資料です．

Transcript

1. Gatsbyで静的サイト生成 Satoshi SAKAO ゆるゆるIT勉強会 Vol.8 2019/12/14 (Sat) 1
2. 話すひと 2 インフォコム株式会社 品質マネジメント推進室 ソフトウェアエンジニア JS (ES6) / Node.js / GCP / iOS (Swift) 猫，自作キーボード Satoshi SAKAO @ottijp
3. 経緯 • はてなブログをカスタムドメイン化したかった • CMSサービスに頼らず自分のコンテンツを自分で持ちたい • WordPressは使ってみたけど辛かった • 会社の勉強会でGatsbyを紹介してた人がいた 3
4. 4 　　　　　を知ってる？
5. Gatsbyってなんぞ • 静的サイトジェネレータ • Node.jsのフレームワーク • データソースから取得したコンテンツをもとに ビルドして静的サイトを組み立ててくれる • JAMstackアーキテクチャ（後述）を実現できる 5 https://www.gatsbyjs.org/
6. 適用 • ブログ • コーポレートサイト • イベントサイト • アーティストの公式Webサイト 6 →静的な特性が強いサイト
7. Gatsbyがやること 7 データソース ビルド デプロイ 　　CMS 　　Markdown 　　データ 　　Webサーバ HTML CSS JavaScript GraphQL react
8. 8 動的と静的
9. 違い 9 　　API 　　Webサーバ 　　Webサーバ 　　Appサーバ Markup (ビルド) 動的（e.g. WordPress） 静的（JAMstack） JS
10. 静的であることの利点 • 高スケール • 高レスポンス • 高可用性 • 高セキュリティ 10 　　API 　　Webサーバ Markup (ビルド) 静的（JAMstack） JS
11. 静的であるがゆえの制約 • ビルド時間（1文字変更でもフルビルドが必要） • 現状80記事で2分くらい ＠Netlify • 動的機能に工夫が必要 • サイト内検索 → Elastic Search, Googleカスタム検索 • コメント → DISQUS • 予約投稿 → 自前でGitHub + CloudFunctions 11
12. 12 まとめ
13. まとめ • Gatsbyで静的サイト（JAMstack）を作れる • 静的サイトでパフォーマンスやセキュリティが向上する • 銀の弾丸ではないが，静的性が活かせるケースにおいて 使ってみてはどうでしょう！ 13
14. 14 Appendix
15. ブログURL 15 https://blog.ottijp.com/
16. WordPressが辛かったこと • Markdownプラグインの方言が合わない • 勝手に出力が変わる（何が悪さしてるのかトレースしづらい） • スタイルが思い通りにならない • 全体をコードで管理できない 16
17. Netlifyを使ったデプロイフロー 17
18. CloudFunctionsを使った予約投稿 18
19. JAMstack • JavaScript, API, Markup • サーバ側で処理せず，クライアントでJavaScriptで処理する • それ以外で必要なこととAPIを利用する • データとテンプレートを使って事前にビルド（Markup）する 19
20. 20 余談: 困っていること（SEO関係）
21. LightHouseとPageSpeedで全然スコアが違う 21 LightHouse PageSpeed (Desktop) PageSpeed (Mobile)
22. Search Consoleの「クロール済み - インデックス未登録」が徐々に増えちゃう 22
23. 23 だれか教えてください
24. 参考 • Building and Deploying for the Modern Web with JAMstack - Guillermo Rauch | JSConf JP • https://jsconf.jp/2019/talk/guillermo-rauch • Twitter “#jsconfjp_a since:2019-11-30_15:30:00_JST until:2019-11-30_16:09:00_JST” • 今日から手を出すJAMstack • https://4rchiv3s.solit4ry.io/tech/marmalade/ 24