Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GatsbyJS + Contentful + Netlifyで作る技術ブログ

Avatar for GcNok GcNok
October 22, 2019
Technology
0
5.1k

GatsbyJS + Contentful + Netlifyで作る技術ブログ

Avatar for GcNok

GcNok

October 22, 2019
Tweet

More Decks by GcNok

See All by GcNok
VuePress x Firebaseでエンジニアブログを作ってみた話
Avatar for GcNok gcnok
0
5k

Other Decks in Technology

See All in Technology
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
Avatar for nwiizo nwiizo
6
3.8k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
Avatar for YuyaKoda ponkio_o
PRO
0
260
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
160
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
150
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
Avatar for Nagisa Yata nyata
0
360
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
140
ハッカソン by 生成AIハッカソンvol.05
Avatar for 1ft-seabass 1ftseabass
PRO
0
160
あなたの声を届けよう！ 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
Avatar for kondoyuko kondoyuko
4
530
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
Avatar for MasahiroKawahara masahirokawahara
0
380
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
Avatar for 弁護士ドットコム bengo4com
0
1.5k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
Avatar for かわうそ kawauso
2
4.2k
Connect 100+を支える技術
Avatar for Yamakan kanyamaguc
0
160

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
24k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
400
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k

Transcript

  1. GatsbyJS + Contentful + NetlifyͰ࡞Δٕज़ϒϩά גࣜձࣾεϚʔτγϣοϐϯάɹࢤ࣏௚ق

  2. ࣗݾ঺հ • ໊લɿࢤ࣏௚قʢ@gc_tech70ʣ • ॴଐɿגࣜձࣾεϚʔτγϣοϐϯά • ։ൃݴޠɿVue, Nuxt.js, Angular, Go,

    PHP • ϚΠϒʔϜɿFlutter։ൃ

  3. ໨࣍ • ٕज़ϒϩάΛ࡞͖͔͚ͬͨͬ • GatsbyJSͱ͸ʁ • Contentfulͱ͸ʁ • Netlifyͱ͸ʁ •

    σϞ • ·ͱΊ

  4. ٕज़ϒϩάΛ࡞͖͔͚ͬͨͬ • ReactͰԿ͔࡞ͬͯΈ͔ͨͬͨ • GraphQLΛ࢖ͬͯΈ͔ͨͬͨ • NetlifyΛ࢖ͬͯΈ͔ͨͬͨ • ؔ࿈ٕज़Ͱ͋ΔVuePressͱͷҧ͍Λ஌Γ͔ͨͬͨ

  5. GatsbyJSͱ͸ʁ • React.jsϕʔεͷ੩తαΠτδΣωϨʔλʔ • ϞμϯͳWebٕज़Λखܰʹ࢖༻Ͱ͖ɺߴ଎ͳWebϖʔδΛ
 ࣮ݱՄೳ • PWAɺSSRɺGraphQLͳͲ • ໿1000छྨͷpluginͰΧελϚΠζੑ͕ߴ͍

  6. ͱʹ͔͘଎͍Β͍͠

  7. LighthouseͰύϑΥʔϚϯεΛݕূ

  8. None

  9. ଎͍ʢ֬৴ʣ

  10. Contentfulͱ͸ʁ • ϔουϨεCMSͷ1ͭͰɺWordPressͳͲͱ͸ҟͳΓɺAPIϕʔ εͰͷهࣄΛఏڙ • ແྉͰϦονͳ؅ཧը໘Λ࢖༻Ͱ͖Δɻʢ5000Ϩίʔυ·Ͱʣ • هࣄͷόʔδϣϯ؅ཧͳͲ΋Մೳ

  11. None
  12. None

  13. Netlifyͱ͸ʁ • ੩తαΠτΛϗεςΟϯά͢Δ͜ͱ͕Ͱ͖ΔWebαʔϏε • ެ։खॱ͕ඇৗʹ؆୯Ͱ3εςοϓ΄ͲͰWebαΠτͷެ։͕ Մೳ • Github΁ͷpush΍Contentfulͷهࣄͷߋ৽ʹϑοΫͯ͠σϓϩ Π͕Մೳ

  14. None
  15. None

  16. σϞ

  17. ·ͱΊ • GraphQL͸RESTͷAPIʹൺ΂ͯɺAPIͷ࣮૷Λؾʹ͢Δ͜ͱͳࣗ͘༝ʹ σʔλΛऔಘͰ͖ͯศར • Gatsby͸ଟ༷ͳpluginͱ๛෋ͳυΩϡϝϯτͰࣗ༝ͳΧελϚΠζ͕ Մೳͳ൓໘ɺ΍ΕΔ͜ͱ͕ଟ͍ͷͰਓʹΑͬͯ͸ֶशίετ͕΍΍ߴ͍ • Netlify͸Contentfulͱ࿈ܞͨ͠ΓɺGitͷpushʹ߹ΘͤͯࣗಈͰσϓϩ Πͯ͘͠ΕΔͨΊɺඇৗʹศར

  18. Thank you !!!