Gatsbyで静的サイト生成 Satoshi SAKAO ゆるゆるIT勉強会 Vol.8 2019/12/14 (Sat) 1

話すひと 2 インフォコム株式会社 品質マネジメント推進室 ソフトウェアエンジニア JS (ES6) / Node.js / GCP / iOS (Swift) 猫，自作キーボード Satoshi SAKAO @ottijp

経緯 • はてなブログをカスタムドメイン化したかった • CMSサービスに頼らず自分のコンテンツを自分で持ちたい • WordPressは使ってみたけど辛かった • 会社の勉強会でGatsbyを紹介してた人がいた 3

4 　　　　　を知ってる？

Gatsbyってなんぞ • 静的サイトジェネレータ • Node.jsのフレームワーク • データソースから取得したコンテンツをもとに ビルドして静的サイトを組み立ててくれる • JAMstackアーキテクチャ（後述）を実現できる 5 https://www.gatsbyjs.org/

適用 • ブログ • コーポレートサイト • イベントサイト • アーティストの公式Webサイト 6 →静的な特性が強いサイト

Gatsbyがやること 7 データソース ビルド デプロイ 　　CMS 　　Markdown 　　データ 　　Webサーバ HTML CSS JavaScript GraphQL react

8 動的と静的

違い 9 　　API 　　Webサーバ 　　Webサーバ 　　Appサーバ Markup (ビルド) 動的（e.g. WordPress） 静的（JAMstack） JS

静的であることの利点 • 高スケール • 高レスポンス • 高可用性 • 高セキュリティ 10 　　API 　　Webサーバ Markup (ビルド) 静的（JAMstack） JS

静的であるがゆえの制約 • ビルド時間（1文字変更でもフルビルドが必要） • 現状80記事で2分くらい ＠Netlify • 動的機能に工夫が必要 • サイト内検索 → Elastic Search, Googleカスタム検索 • コメント → DISQUS • 予約投稿 → 自前でGitHub + CloudFunctions 11

12 まとめ

まとめ • Gatsbyで静的サイト（JAMstack）を作れる • 静的サイトでパフォーマンスやセキュリティが向上する • 銀の弾丸ではないが，静的性が活かせるケースにおいて 使ってみてはどうでしょう！ 13

14 Appendix

ブログURL 15 https://blog.ottijp.com/

WordPressが辛かったこと • Markdownプラグインの方言が合わない • 勝手に出力が変わる（何が悪さしてるのかトレースしづらい） • スタイルが思い通りにならない • 全体をコードで管理できない 16

Netlifyを使ったデプロイフロー 17

CloudFunctionsを使った予約投稿 18

JAMstack • JavaScript, API, Markup • サーバ側で処理せず，クライアントでJavaScriptで処理する • それ以外で必要なこととAPIを利用する • データとテンプレートを使って事前にビルド（Markup）する 19

20 余談: 困っていること（SEO関係）

LightHouseとPageSpeedで全然スコアが違う 21 LightHouse PageSpeed (Desktop) PageSpeed (Mobile)

Search Consoleの「クロール済み - インデックス未登録」が徐々に増えちゃう 22

23 だれか教えてください

参考 • 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