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, fast content based websites with React
Search
Cheesecake Labs
December 04, 2019
Programming
0
33
Gatsby, fast content based websites with React
Cheesecake Labs
December 04, 2019
Tweet
Share
More Decks by Cheesecake Labs
See All by Cheesecake Labs
Cats' wellness & care
cheesecakelabs
0
45
How do we create the first impressions?
cheesecakelabs
0
48
Menstrual cup: suit and freedom
cheesecakelabs
0
52
Life is a cycle, better with a bicycle
cheesecakelabs
0
46
Interview Process: how to get the best of people
cheesecakelabs
1
72
My capsule wardrobe experience
cheesecakelabs
3
51
Stonewall Rebellion and its impact on LGBTQIA+ history
cheesecakelabs
1
34
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
cheesecakelabs
0
41
MBTI - Psychological types described by Jung
cheesecakelabs
0
120
Other Decks in Programming
See All in Programming
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
SwiftUI Viewの責務分離
elmetal
PRO
0
140
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
DROBEの生成AI活用事例 with AWS
ippey
0
130
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Featured
See All Featured
How GitHub (no longer) Works
holman
313
140k
Facilitating Awesome Meetings
lara
51
6.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Docker and Python
trallard
44
3.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Done Done
chrislema
182
16k
Speed Design
sergeychernyshev
25
780
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
It's Worth the Effort
3n
184
28k
Producing Creativity
orderedlist
PRO
343
39k
Thoughts on Productivity
jonyablonski
69
4.5k
Transcript
Gatsby Gatsby is a free and open source framework based
on React that helps developers build blazing fast websites and apps
Gatsby is a "static" website generator
None
None
1. Modern web tech without the headache 2. Speed past
the competition 3. Progressive Web App by default 4. Bring your own data https://www.gatsbyjs.org/
Content is the king (Data sources)
None
https://www.gatsbyjs.org/docs/how-plugins-apis-are-run/
Node runner Data sources Create node (reducer) Call onCreateNode Provide
data to query Build
How to query the data
None
None
None
Data can be queried inside pages, components, or the gatsby-node.js
file, using one of these options: 1. The pageQuery component 2. The StaticQuery component 3. The useStaticQuery hook
None
Performance Optimization Performance is hard. Let’s make Gatsby do the
work.
https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast/#reach-skip-nav
Image performance Ohhh myyyyy
https://using-gatsby-image.gatsbyjs.org/ The problem: Large, unoptimized images dramatically slow down your
site.
None
Everything is a plugin 1480 plugins today
None
None
Nothing is perfect Pages (solves with a plugin), variables inside
query), cache and build time problems on deploy (netlify)
Why we should use at CKL?
Real world projects
Questions?
Thanks