Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
GatsbyJS + Contentful + Netlifyで作る技術ブログ
GcNok
October 22, 2019
Technology
0
3.7k
GatsbyJS + Contentful + Netlifyで作る技術ブログ
GcNok
October 22, 2019
Tweet
Share
More Decks by GcNok
See All by GcNok
VuePress x Firebaseでエンジニアブログを作ってみた話
gcnok
0
3.6k
Other Decks in Technology
See All in Technology
CTOのためのQAのつくりかた #scrumniigata / SigSQA How to create QA for CTOs and VPoEs
caori_t
0
330
Adopting Kafka for the #1 job site in the world
ymyzk
1
740
Who owns the Service Level?
chaspy
5
1.3k
LINEスタンプの実例紹介 小さく始める障害検知・対応・振り返りの 改善プラクティス
line_developers
PRO
3
1.9k
testing journey / テストが嫌いでIT業界を離れるはずだったのに〜テスト嫌いが現場で品質改善を実施するまでの物語〜
aki_moon
1
410
E2E自動テスト導入・運用をめぐる先入観と実際に起きたこと / Preconceptions and What Happened with E2E Testing
ak1210
5
1.3k
1年間のポストモーテム運用とそこから生まれたツール sre-advisor / SRE NEXT 2022
fujiwara3
6
3.6k
Poolにおける足を止めないシステム基盤構築
winebarrel
3
1.1k
A1A会社紹介資料-2022-05-20
a1a
2
1.1k
CAMのサービス開発の歴史と共通基盤を使った 開発スタイルへの変遷について
ishikawa_pro
0
110
個人的に使って良かったUiPathアクティビティ
saoritakita
0
230
プロダクション環境の信頼性を損ねず観測する技術
egmc
4
800
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
38
12k
Ruby is Unlike a Banana
tanoku
91
9.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
How GitHub (no longer) Works
holman
296
140k
Code Review Best Practice
trishagee
41
6.8k
The Art of Programming - Codeland 2020
erikaheidi
32
5.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
The Language of Interfaces
destraynor
148
20k
What's in a price? How to price your products and services
michaelherold
229
9.3k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
The Cult of Friendly URLs
andyhume
68
4.7k
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 !!!