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で小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
6
3.8k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
260
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
160
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
150
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
360
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
140
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
160
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
530
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
380
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.5k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
4.2k
Connect 100+を支える技術
kanyamaguc
0
160
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How STYLIGHT went responsive
nonsquared
100
5.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Raft: Consensus for Rubyists
vanstee
140
7k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Balancing Empowerment & Direction
lara
1
400
GitHub's CSS Performance
jonrohan
1031
460k
Statistics for Hackers
jakevdp
799
220k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Why Our Code Smells
bkeepers
PRO
337
57k
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 !!!