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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for GcNok GcNok
October 22, 2019
Technology
0
5.4k

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
5.3k

Other Decks in Technology

See All in Technology
CDK対応したAWS DevOps Agentを試そう_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
420
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
Avatar for Jun Naito jonnojun
1
250
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
500
Amazon Bedrock Knowledge Basesチャンキング解説！
Avatar for 野口碧生 aoinoguchi
0
160
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
Avatar for ama-ch ama_ch
0
210
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
150
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
Avatar for ktykogm 0gm
2
3.2k
SchooでVue.js/Nuxtを技術選定している理由
Avatar for Okuto Oyama yamanoku
3
210
AIエージェントを開発しよう！-AgentCore活用の勘所-
Avatar for YukiOgawa yukiogawa
0
190
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
170
Agent Skils
Avatar for ディップ株式会社 dip_tech
PRO
0
130
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
480

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.2k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
77
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k

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 !!!