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

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

70de5b78a9f8475d7db1ac948ca707b4?s=47 GcNok
October 22, 2019
Technology
0
3.7k

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

70de5b78a9f8475d7db1ac948ca707b4?s=128

GcNok

October 22, 2019
Tweet

More Decks by GcNok

See All by GcNok
VuePress x Firebaseでエンジニアブログを作ってみた話
70de5b78a9f8475d7db1ac948ca707b4?s=48 gcnok
0
3.6k

Other Decks in Technology

See All in Technology
CTOのためのQAのつくりかた #scrumniigata / SigSQA How to create QA for CTOs and VPoEs
63d1e567c2c7b1dbf340f7bea9a92876?s=48 caori_t
0
330
Adopting Kafka for the #1 job site in the world
D984cd543d2abef28596cc5cfe82240c?s=48 ymyzk
1
740
Who owns the Service Level?
93c80c388fe9d8f9df7d030549a0ff0b?s=48 chaspy
5
1.3k
LINEスタンプの実例紹介 小さく始める障害検知・対応・振り返りの 改善プラクティス
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
3
1.9k
testing journey / テストが嫌いでIT業界を離れるはずだったのに〜テスト嫌いが現場で品質改善を実施するまでの物語〜
055e63a40190884fdc17b918c6f6aa7e?s=48 aki_moon
1
410
E2E自動テスト導入・運用をめぐる先入観と実際に起きたこと / Preconceptions and What Happened with E2E Testing
77fa3ebbf229a884c74c905034b1f4c2?s=48 ak1210
5
1.3k
1年間のポストモーテム運用とそこから生まれたツール sre-advisor / SRE NEXT 2022
Ca6281fff64797dc419b78f51f25c0a5?s=48 fujiwara3
6
3.6k
Poolにおける足を止めないシステム基盤構築
F811665799e1139b63140b72f3e8631f?s=48 winebarrel
3
1.1k
A1A会社紹介資料-2022-05-20
154d77627bc95f4eb226c722023b5168?s=48 a1a
2
1.1k
CAMのサービス開発の歴史と共通基盤を使った 開発スタイルへの変遷について
62e3beb467ce4d447d1491263dcf8d46?s=48 ishikawa_pro
0
110
個人的に使って良かったUiPathアクティビティ
0f4a27389318ca7087ae12b1593171c1?s=48 saoritakita
0
230
プロダクション環境の信頼性を損ねず観測する技術
3baceb46dfe36422370df30b8eab61d1?s=48 egmc
4
800

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
38
12k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.2k
Fontdeck: Realign not Redesign
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4.1k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
296
140k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
41
6.8k
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
32
5.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
125
8.5k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.3k
Keith and Marios Guide to Fast Websites
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
404
21k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.7k

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