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
GatsbyJS + Contentful + Netlifyで作る技術ブログ
Search
GcNok
October 22, 2019
Technology
0
5.1k
GatsbyJS + Contentful + Netlifyで作る技術ブログ
GcNok
October 22, 2019
Tweet
Share
More Decks by GcNok
See All by GcNok
VuePress x Firebaseでエンジニアブログを作ってみた話
gcnok
0
5k
Other Decks in Technology
See All in Technology
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
6
5k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
410
Witchcraft for Memory
pocke
1
740
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
230
Geminiとv0による高速プロトタイピング
shinya337
0
230
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
180
PO初心者が考えた ”POらしさ”
nb_rady
0
190
Model Mondays S2E03: SLMs & Reasoning
nitya
0
330
MobileActOsaka_250704.pdf
akaitadaaki
0
110
Operating Operator
shhnjk
0
410
モバイル界のMCPを考える
naoto33
0
410
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
380
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building an army of robots
kneath
306
45k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Designing for Performance
lara
610
69k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Cult of Friendly URLs
andyhume
79
6.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
GatsbyJS + Contentful + NetlifyͰ࡞Δٕज़ϒϩά גࣜձࣾεϚʔτγϣοϐϯάɹࢤ࣏ق
ࣗݾհ • ໊લɿࢤ࣏قʢ@gc_tech70ʣ • ॴଐɿגࣜձࣾεϚʔτγϣοϐϯά • ։ൃݴޠɿVue, Nuxt.js, Angular, Go,
PHP • ϚΠϒʔϜɿFlutter։ൃ
࣍ • ٕज़ϒϩάΛ࡞͖͔͚ͬͨͬ • GatsbyJSͱʁ • Contentfulͱʁ • Netlifyͱʁ •
σϞ • ·ͱΊ
ٕज़ϒϩάΛ࡞͖͔͚ͬͨͬ • ReactͰԿ͔࡞ͬͯΈ͔ͨͬͨ • GraphQLΛͬͯΈ͔ͨͬͨ • NetlifyΛͬͯΈ͔ͨͬͨ • ؔ࿈ٕज़Ͱ͋ΔVuePressͱͷҧ͍ΛΓ͔ͨͬͨ
GatsbyJSͱʁ • React.jsϕʔεͷ੩తαΠτδΣωϨʔλʔ • ϞμϯͳWebٕज़Λखܰʹ༻Ͱ͖ɺߴͳWebϖʔδΛ ࣮ݱՄೳ • PWAɺSSRɺGraphQLͳͲ • 1000छྨͷpluginͰΧελϚΠζੑ͕ߴ͍
ͱʹ͔͍͘Β͍͠
LighthouseͰύϑΥʔϚϯεΛݕূ
None
͍ʢ֬৴ʣ
Contentfulͱʁ • ϔουϨεCMSͷ1ͭͰɺWordPressͳͲͱҟͳΓɺAPIϕʔ εͰͷهࣄΛఏڙ • ແྉͰϦονͳཧը໘Λ༻Ͱ͖Δɻʢ5000Ϩίʔυ·Ͱʣ • هࣄͷόʔδϣϯཧͳͲՄೳ
None
None
Netlifyͱʁ • ੩తαΠτΛϗεςΟϯά͢Δ͜ͱ͕Ͱ͖ΔWebαʔϏε • ެ։खॱ͕ඇৗʹ؆୯Ͱ3εςοϓ΄ͲͰWebαΠτͷެ։͕ Մೳ • GithubͷpushContentfulͷهࣄͷߋ৽ʹϑοΫͯ͠σϓϩ Π͕Մೳ
None
None
σϞ
·ͱΊ • GraphQLRESTͷAPIʹൺͯɺAPIͷ࣮Λؾʹ͢Δ͜ͱͳࣗ͘༝ʹ σʔλΛऔಘͰ͖ͯศར • Gatsbyଟ༷ͳpluginͱ๛ͳυΩϡϝϯτͰࣗ༝ͳΧελϚΠζ͕ Մೳͳ໘ɺΕΔ͜ͱ͕ଟ͍ͷͰਓʹΑֶͬͯशίετ͕ߴ͍ • NetlifyContentfulͱ࿈ܞͨ͠ΓɺGitͷpushʹ߹ΘͤͯࣗಈͰσϓϩ Πͯ͘͠ΕΔͨΊɺඇৗʹศར
Thank you !!!