Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gatsbyで静的サイト生成/2019-12-14-yuruit-vol8
Search
Satoshi SAKAO
December 14, 2019
Technology
0
180
Gatsbyで静的サイト生成/2019-12-14-yuruit-vol8
ゆるゆるIT勉強会 feat.Reedex 8で発表した資料です.
Satoshi SAKAO
December 14, 2019
Tweet
Share
More Decks by Satoshi SAKAO
See All by Satoshi SAKAO
Pkl/2024-04-17-llt31
ottijp
0
18
JavaScriptのデバッグ/2023-09-04-llt30
ottijp
0
81
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
0
69
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
110
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
98
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
110
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
53
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
60
ncurses/2021-05-12-llt21
ottijp
0
150
Other Decks in Technology
See All in Technology
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
800
使われないものを作るな!出口から作るデータ分析基盤 / Data Platform Development Starting from the User Needs
amaotone
16
5k
OPENLOGI Company Profile for engineer
hr01
1
2.2k
エムスリーマルチデバイスチーム紹介資料 / Introduction of M3 Multi Device Team
m3_engineering
1
180
Google Cloudを組織(企業)で運用する時のベストプラクティス × 健康の環境分離戦略 #まるクラ勉強会
yasumuusan
0
210
TDD - Test Driven Drupal
opdavies
0
3k
CloudflareとHonoを使って飲食店のレビューができるLINEアプリを作った
shinaps
2
870
エムスリーQAチーム紹介資料 / Introduction of M3 QA Team
m3_engineering
1
340
20240516 OpenID TechNight Vol.21 「OIDFシェアードシグナルフレームワーク(ID2)を利用してリアルタイムでセキュリティシグナルを共有するための最新情報」
oidfj
0
210
Domain-driven Design: A Complete Example
ewolff
2
280
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
38k
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
460
Featured
See All Featured
A Philosophy of Restraint
colly
197
16k
How to train your dragon (web standard)
notwaldorf
76
5.2k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
For a Future-Friendly Web
brad_frost
172
9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
Product Roadmaps are Hard
iamctodd
45
9.8k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Building an army of robots
kneath
300
42k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Producing Creativity
orderedlist
PRO
338
39k
Transcript
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