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
4.8k
GatsbyJS + Contentful + Netlifyで作る技術ブログ
GcNok
October 22, 2019
Tweet
Share
More Decks by GcNok
See All by GcNok
VuePress x Firebaseでエンジニアブログを作ってみた話
gcnok
0
4.7k
Other Decks in Technology
See All in Technology
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
データ化エンジニアとしての1年を振り返る
sansantech
PRO
3
260
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
250
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
230
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
250
統計的学習理論読み Chapter 1
kmatsui
3
930
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
210
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.5k
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
1
570
20240321_生成AI時代のDevOps
kzkmaeda
2
610
XRミーティング 2024-03-20
1ftseabass
PRO
0
100
Featured
See All Featured
The Mythical Team-Month
searls
214
42k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
We Have a Design System, Now What?
morganepeng
42
6.7k
Agile that works and the tools we love
rasmusluckow
323
20k
Navigating Team Friction
lara
177
13k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Automating Front-end Workflow
addyosmani
1353
200k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Rails Girls Zürich Keynote
gr2m
91
13k
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 !!!